/*
 * Country and city picker (Views/Shared/_CountryCityPicker.cshtml).
 *
 * Makes the two Select2 dropdowns read as ordinary fields of whichever site they are on. Select2
 * ships its own small, square, blue-highlighted look, which belongs to neither theme here.
 *
 * The container is styled as the field and Select2's own chrome inside it is flattened, so nothing
 * is drawn twice. The numbers below are the two themes' real input metrics: the public site's
 * fields are tall and rounded, the admin panel's are shorter with a dashed border.
 */

/* ----- The field: public site ----- */

.ccp-select2.select2-container {
    display: block;
    box-sizing: border-box;
    height: 56px;
    padding: 12px 25px;
    border: 1px solid #e4e4e4;
    border-radius: 6px;
    background: #fff;
    color: #848587;
    font-size: 16px;
    line-height: 30px;
    cursor: pointer;
}

/* Select2 writes an inline pixel width onto the container; the field should fill its column. */
.ccp-select2.select2-container,
.ccp-select2.select2-container--open {
    width: 100% !important;
}

/* ----- The field: admin panel, whose inputs are shorter and dashed ----- */

#pageWrapper .ccp-select2.select2-container {
    height: 38px;
    padding: 6px 12px;
    border: 1px dashed rgba(106, 113, 133, 0.3);
    color: #212529;
    line-height: 24px;
}

body.dark-only .ccp-select2.select2-container {
    border-color: rgba(255, 255, 255, 0.12);
    background: #262932;
    color: rgba(255, 255, 255, 0.88);
}

/* ----- Flattening Select2's own chrome ----- */

/*
 * The inner box would otherwise draw a second border, background and rounded corner inside the
 * first, and force Select2's own 28px height. Flattened to nothing, the container's own padding
 * and line height size the field exactly as the theme sizes its inputs.
 */
.ccp-select2 .select2-selection--single {
    display: flex;
    align-items: center;
    /* The admin theme pins this to 47px with !important, so matching its own inputs needs the same.
       Filling the container means the field's height is decided in one place, just above. */
    height: 100% !important;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    outline: 0;
}

.ccp-select2 .select2-selection--single .select2-selection__rendered {
    /* Select2 indents and line-heights the label itself; the container's padding does that here. */
    flex: 1;
    padding: 0 18px 0 0;
    color: inherit;
    font: inherit;
    line-height: inherit;
}

.ccp-select2 .select2-selection--single .select2-selection__placeholder {
    color: inherit;
    opacity: 0.65;
}

/* The arrow sits at the inner edge of the theme's padding rather than at the container's edge. */
.ccp-select2 .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 0;
    width: 18px;
    height: 100%;
}

/* ----- The dropdown panel ----- */

.ccp-select2-dropdown {
    border-color: inherit;
    border-radius: 6px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
    font-family: inherit;
    overflow: hidden;
}

.ccp-select2-dropdown .select2-search--dropdown {
    padding: 8px;
}

.ccp-select2-dropdown .select2-search--dropdown .select2-search__field {
    padding: 8px 10px;
    border: 1px solid rgba(106, 113, 133, 0.3);
    border-radius: 4px;
    font: inherit;
    outline: 0;
}

.ccp-select2-dropdown .select2-results__option {
    padding: 8px 12px;
    font-size: 0.95em;
}

/* Select2's default highlight is its own blue, which belongs to no theme here. */
.ccp-select2-dropdown .select2-results__option--highlighted[aria-selected] {
    background-color: rgba(106, 113, 133, 0.12);
    color: inherit;
}

.ccp-select2-dropdown .select2-results__option[aria-selected="true"] {
    background-color: rgba(106, 113, 133, 0.2);
    color: inherit;
    font-weight: 600;
}

/* The "no cities yet" line is a message, not something to pick. */
.ccp-select2-dropdown .select2-results__option[aria-selected]:first-child:only-child {
    color: inherit;
    opacity: 0.7;
}

body.dark-only .ccp-select2-dropdown {
    background: #262932;
    color: rgba(255, 255, 255, 0.88);
}

body.dark-only .ccp-select2-dropdown .select2-search--dropdown .select2-search__field {
    border-color: rgba(255, 255, 255, 0.15);
    background: #1d1e26;
    color: rgba(255, 255, 255, 0.88);
}