/*
    Styling for a dropdown's button and the arrow at its end, shared by every dropdown so they look
    and move the same.

    A page can set these CSS custom properties on an element around the button:
    - --control-height: the button's height, border included, as in a row of controls that line up.
      As tall as its text and padding by default.
    - --dropdown-button-hit-reach-top, -right, -bottom and -left: how far past each edge the button
      takes clicks, as where a small button sits among crowded controls. None by default.
*/
.dropdown-button
{
    position: relative;
    box-sizing: border-box;
    height: var(--control-height, auto);
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.25rem;
    padding-right: 0.75rem;
    padding-bottom: 0.25rem;
    padding-left: 0.75rem;
    border: 1px solid var(--neutral-highest-emphasis-surface-color);
    border-radius: 8px;
    color: var(--neutral-surface-highest-emphasis-contrast-color);
    background: var(--neutral-medium-emphasis-surface-color);
    font: inherit;
    cursor: pointer;

    &:hover
    {
        background: var(--neutral-high-emphasis-surface-color);
    }

    /* The area past the button's edges that takes its clicks. Each reach is multiplied by -1 because
       a negative offset moves the area's edge outward, past the button's edge. */
    &::before
    {
        content: "";
        position: absolute;
        top: calc(-1 * var(--dropdown-button-hit-reach-top, 0px));
        right: calc(-1 * var(--dropdown-button-hit-reach-right, 0px));
        bottom: calc(-1 * var(--dropdown-button-hit-reach-bottom, 0px));
        left: calc(-1 * var(--dropdown-button-hit-reach-left, 0px));
    }

    /* The button brightens while pressed, like the site's other clickable controls. */
    &:active
    {
        filter: brightness(130%);
    }

    /* A gold outline shows the button has keyboard focus, or focus its dropdown marks as shown
       after a pick, even one by mouse. */
    &:focus-visible,
    /* any-focus: the class marks focus the dropdown chose to show after a pick by mouse. */
    &.dropdown-button-focus-shown:focus
    {
        outline: 2px solid var(--primary-higher-emphasis-color);
        outline-offset: 1px;
    }
}

/* The arrow is drawn larger than its text, so it is easy to see, and flips vertically to point up
   while the dropdown is open, quickly enough to follow the dropdown opening and closing. A transform
   enlarges it rather than a larger font, so the button keeps its height and width and nothing
   around it moves. The scale is a chosen value; nothing else depends on it. */
.dropdown-arrow
{
    display: inline-block;
    scale: 1.4;
    transition: transform 150ms ease;

    /* The site's filled down caret icon, sized so its caret is about half the text's size wide
       before the enlargement: the caret fills about 0.64 of its icon's width, and the icon is 0.8
       of the text's size. It is centered on the line's middle. */
    ion-icon
    {
        font-size: 0.8em;
        vertical-align: middle;
    }

    &.dropdown-arrow-open
    {
        transform: scaleY(-1);
    }
}

/* The arrow flips at once when the user's system asks for less motion. */
@media (prefers-reduced-motion: reduce)
{
    .dropdown-arrow
    {
        transition: none;
    }
}