/*
 * One look for every dropdown of the administrative interface.
 *
 * It is loaded after the Select2 stylesheets on purpose: the theme that ships
 * with the plugin declares the same properties with the same specificity, so
 * order is what decides. Loading it with the rest of the own styles, which come
 * before the theme, would leave every rule here without effect.
 *
 * The colours come from the brand tokens; nothing here writes a value of its own.
 */

/* The border and the ground of every box, single or multiple. The theme of the
   plugin writes its own grey and its own radius here, which are not the ones of
   the interface.

   The error and the confirmation borders are left alone: the theme states them
   with more specific selectors, so a dropdown inside a validated form answers
   like the text input next to it. */
.select2-container--bootstrap4 .select2-selection {
    border: 1px solid var(--sf-neutral-200);
    border-radius: 0.42rem;
    background-color: var(--sf-white);
    font-family: var(--sf-font-body);
    color: var(--sf-text);
}

/* The box reads as the text input next to it: same height, same border, same
   radius. Without this a dropdown and an input in the same row sit at
   different heights.

   The height carries `!important` because the theme declares its own that way,
   and it is the only place where the height is set: the text is centred by the
   line height of its own line and not by padding on the box. Padding on top of
   a fixed height is what pushed the text to the top edge and the arrow out
   below the box. */
.select2-container--bootstrap4 .select2-selection--single {
    height: calc(1.5em + 1.3rem + 2px) !important;
    padding: 0;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__rendered {
    /* Room on the right for the arrow, so a long option does not run under it. */
    padding: 0 2rem 0 1rem;
    line-height: calc(1.5em + 1.3rem);
    color: var(--sf-text);
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__placeholder {
    line-height: calc(1.5em + 1.3rem);
    color: var(--sf-text-muted);
}

/* The arrow spans the whole height of the box and centres its caret in it. The
   theme anchors it at half the height, which with a taller box left the caret
   hanging under the bottom border. */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 0.75rem;
    height: calc(1.5em + 1.3rem);
    width: 8px;
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__arrow b {
    top: 50%;
    border-top-color: var(--sf-neutral-500);
}

/* A box that holds several choices grows with them, and starts at the height of
   an input so a row of filters lines up. */
.select2-container--bootstrap4 .select2-selection--multiple {
    min-height: calc(1.5em + 1.3rem + 2px) !important;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__rendered {
    padding: 0 0.65rem;
}

/* Each chosen option is a chip in the neutral pair the palette already defines
   for a chip that carries no state. It is deliberately quiet: a chosen value is
   not an action, so it does not take the accent, which is what tells apart what
   heads a screen and what can be pressed.

   No tint can also give the chip a silhouette against the white of the box: a
   ground light enough to hold its text at 9:1 is by construction close to white,
   so the chip is told apart by its text and its remove glyph. Giving it an edge
   means a border, and that decision was taken the other way. */
.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice {
    padding: 0 0.5rem 0 0;
    margin-top: calc(0.4rem - 1px);
    margin-right: 0.35rem;
    color: var(--sf-neutral-700);
    background-color: var(--sf-neutral-100);
    border: 1px solid transparent;
    border-radius: 0.3rem;
    line-height: calc(1.5em + 0.5rem);
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove {
    margin: 0 0.35rem 0 0.45rem;
    padding: 0;
    color: var(--sf-text-muted);
    font-weight: 600;
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--sf-danger);
}

/* The field where the reader types sits on the line of the chips, and its
   placeholder reads like the placeholder of an input. */
.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field {
    margin-top: calc(0.4rem - 1px);
    color: var(--sf-text);
    line-height: calc(1.5em + 0.5rem);
    font-family: var(--sf-font-body);
}

.select2-container--bootstrap4 .select2-selection--multiple .select2-search--inline .select2-search__field::placeholder {
    color: var(--sf-text-muted);
    opacity: 1;
}

/* Open, and focused, the border is the accent: the same signal the rest of the
   controls give. */
.select2-container--bootstrap4.select2-container--focus .select2-selection,
.select2-container--bootstrap4.select2-container--open .select2-selection {
    border-color: var(--sf-blue);
    box-shadow: none;
}

/* A dropdown never sticks out of the column that sizes it. Select2 writes the
   width of the original control into the container as pixels, so a narrower
   viewport would otherwise leave it wider than its own column. */
.select2-container {
    max-width: 100%;
}

/* The panel is one piece with the box it hangs from: the edge where they meet
   carries no border and no radius, and only the outer edge is rounded. Rounding
   all four corners leaves the two borders stacked along that edge and the panel
   reads as a second control glued under the first one. Which edge is which
   depends on whether the panel opened downwards or upwards. */
.select2-container--bootstrap4 .select2-dropdown {
    border-color: var(--sf-blue);
    border-radius: 0;
    overflow: hidden;
}

.select2-container--bootstrap4 .select2-dropdown--below {
    border-bottom-right-radius: 0.42rem;
    border-bottom-left-radius: 0.42rem;
}

.select2-container--bootstrap4 .select2-dropdown--above {
    border-top-color: var(--sf-blue);
    border-top-right-radius: 0.42rem;
    border-top-left-radius: 0.42rem;
}

/* The list breathes at both ends, so the option under the pointer does not
   paint against the edge of the panel. */
.select2-container--bootstrap4 .select2-results > .select2-results__options {
    max-height: 18em;
    padding: 0.25rem 0;
}

/* The search field spans the panel. The theme gives its container 90% of the
   width, which left the field short of the right edge and off centre inside its
   own panel. */
.select2-container--bootstrap4 .select2-search--dropdown {
    width: 100%;
    padding: 0.5rem;
    background-color: var(--sf-white);
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field {
    height: calc(1.5em + 1rem + 2px);
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--sf-neutral-200);
    border-radius: 0.42rem;
    font-family: var(--sf-font-body);
    color: var(--sf-text);
}

.select2-container--bootstrap4 .select2-search--dropdown .select2-search__field:focus {
    border-color: var(--sf-blue);
    outline: 0;
}

.select2-container--bootstrap4 .select2-results__option {
    padding: 0.5rem 1rem;
    color: var(--sf-text);
}

/* Under the pointer, and under the keyboard, the option is the solid accent
   with white on top. */
.select2-container--bootstrap4 .select2-results__option--highlighted,
.select2-container--bootstrap4 .select2-results__option--highlighted[aria-selected] {
    background-color: var(--sf-blue);
    color: var(--sf-white);
}

/* The option already chosen is the light accent, so it stays legible while the
   pointer is somewhere else in the list. The panel is named in the selector
   because the theme states its own grey for this one that way, and a shorter
   selector loses to it. */
.select2-container--bootstrap4 .select2-dropdown .select2-results__option[aria-selected="true"],
.select2-container--bootstrap4 .select2-dropdown .select2-results__option[data-selected="true"] {
    background-color: var(--sf-blue-bg);
    color: var(--sf-text);
}

.select2-container--bootstrap4 .select2-dropdown .select2-results__option--highlighted[aria-selected="true"],
.select2-container--bootstrap4 .select2-dropdown .select2-results__option--highlighted[data-selected="true"] {
    background-color: var(--sf-blue);
    color: var(--sf-white);
}

/* A group header is not an option: it names the set that follows it. */
.select2-container--bootstrap4 .select2-results__group {
    padding: 0.5rem 1rem;
    color: var(--sf-text-muted);
    font-size: 0.85rem;
    font-weight: 600;
}

.select2-container--bootstrap4 .select2-results__message {
    color: var(--sf-text-muted);
}

/* A disabled option — an option of a component the instance does not have —
   reads as unavailable and not as absent. */
.select2-container--bootstrap4 .select2-results__option[aria-disabled="true"] {
    color: var(--sf-neutral-300);
}

/* The clear button of a dropdown that allows emptying itself: a × in the text
   colour of a hint, on the line of the text and to the left of the arrow. The
   theme drew it as a filled grey circle, which read as a second control. */
.select2-container--bootstrap4 .select2-selection--single .select2-selection__clear {
    float: right;
    width: auto;
    height: auto;
    margin: 0 0.4rem 0 0;
    padding: 0;
    color: var(--sf-text-muted);
    background-color: transparent;
    border-radius: 0;
    font-size: 1.15rem;
    line-height: calc(1.5em + 1.3rem);
}

.select2-container--bootstrap4 .select2-selection--single .select2-selection__clear:hover {
    color: var(--sf-danger);
}

/* A dropdown of a disabled field is grey and keeps its text readable. */
.select2-container--bootstrap4.select2-container--disabled .select2-selection--single {
    background-color: var(--sf-neutral-100);
    color: var(--sf-text-muted);
}

/* Inside the filter row of a table the control is the height of that row, and
   the panel is tighter, because the whole row is smaller. The width and the
   border of that case are already resolved in custom.css. */
.sf-column-filter-dropdown .select2-search--dropdown {
    padding: 0.35rem;
}

.sf-column-filter-dropdown .select2-search--dropdown .select2-search__field {
    height: calc(1.5em + 0.7rem + 2px);
    padding: 0.35rem 0.6rem;
}