/* Shared dropdown language -------------------------------------------------
   Standard selects are progressively enhanced by dropdowns.js. Keep page-
   specific pickers opt-in/out through data-xfe-select="off" and their own
   component styles. */

:root {
    --xfe-dropdown-surface: color-mix(in srgb, var(--bg-color) 96%, var(--text-color) 4%);
    --xfe-dropdown-surface-strong: color-mix(in srgb, var(--bg-color) 91%, var(--text-color) 9%);
    --xfe-dropdown-hover: color-mix(in srgb, var(--main-color) 10%, var(--bg-color));
    --xfe-dropdown-selected: color-mix(in srgb, var(--main-color) 15%, var(--bg-color));
    --xfe-dropdown-border: color-mix(in srgb, var(--text-color) 17%, transparent);
    --xfe-dropdown-shadow: 0 1rem 2.5rem color-mix(in srgb, #000 18%, transparent),
        0 .2rem .7rem color-mix(in srgb, #000 10%, transparent);
}

/* Bootstrap action menus share the same surface, spacing and motion. More
   specific feature styles can still adapt menus such as branch and clone
   pickers. */
.dropdown-menu {
    padding: .42rem;
    border: 1px solid var(--xfe-dropdown-border);
    border-radius: .78rem;
    background: var(--xfe-dropdown-surface);
    box-shadow: var(--xfe-dropdown-shadow);
    color: var(--text-color);
}

.dropdown-menu.show {
    animation: xfe-dropdown-fade .14s ease-out;
}

.dropdown-item {
    min-height: 2.35rem;
    padding: .5rem .68rem;
    border-radius: .52rem;
    color: var(--text-color);
    line-height: 1.25;
    transition: background-color .14s ease, color .14s ease, transform .14s ease;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--xfe-dropdown-hover);
    color: var(--text-color);
    text-decoration: none;
}

.dropdown-item:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--main-color) 55%, transparent);
    outline-offset: -2px;
}

.dropdown-item.active,
.dropdown-item:active {
    background: var(--main-color);
    color: var(--on-main-color);
}

.dropdown-header {
    padding: .45rem .68rem .3rem;
    color: var(--text-secondary-color);
    font-size: .72rem;
    font-weight: 750;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.dropdown-divider {
    margin: .38rem .3rem;
    border-color: var(--xfe-dropdown-border);
}

.dropdown-toggle::after {
    width: .42rem;
    height: .42rem;
    margin-left: .55rem;
    border: solid currentColor;
    border-width: 0 1.5px 1.5px 0;
    transform: translateY(-.1rem) rotate(45deg);
    transition: transform .16s ease;
}

.dropdown-toggle.show::after {
    transform: translateY(.12rem) rotate(225deg);
}

.dropup .dropdown-toggle::after {
    transform: translateY(.12rem) rotate(225deg);
}

.dropup .dropdown-toggle.show::after {
    transform: translateY(-.1rem) rotate(45deg);
}

/* Enhanced native selects ------------------------------------------------ */
div.xfe-select.form-select {
    position: relative;
    display: block;
    padding: 0;
    border-color: var(--xfe-dropdown-border);
    border-radius: .68rem;
    background-color: var(--bg-color);
    background-image: none;
    color: var(--text-color);
    cursor: pointer;
    isolation: isolate;
    transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

div.xfe-select.form-select:hover:not(.is-disabled) {
    border-color: color-mix(in srgb, var(--main-color) 48%, var(--xfe-dropdown-border));
    background-color: color-mix(in srgb, var(--bg-color) 97%, var(--main-color) 3%);
}

div.xfe-select.form-select:focus,
div.xfe-select.form-select:focus-within,
div.xfe-select.form-select.is-open {
    border-color: var(--main-color);
    background-color: var(--bg-color);
    box-shadow: 0 0 0 .22rem color-mix(in srgb, var(--main-color) 18%, transparent);
    color: var(--text-color);
    outline: 0;
}

div.xfe-select.form-select.is-disabled {
    background: var(--xfe-dropdown-surface-strong);
    color: var(--text-secondary-color);
    cursor: not-allowed;
    opacity: .66;
}

div.xfe-select.form-select.is-invalid {
    border-color: var(--bs-form-invalid-border-color, #dc3545);
}

div.xfe-select.form-select.is-invalid:focus-within {
    box-shadow: 0 0 0 .22rem color-mix(in srgb, #dc3545 18%, transparent);
}

.xfe-select__native.form-select {
    position: absolute !important;
    z-index: -1 !important;
    top: 0 !important;
    left: 0 !important;
    width: 1px !important;
    height: 1px !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    clip-path: inset(50%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.xfe-select__trigger {
    display: grid;
    width: 100%;
    min-width: 0;
    min-height: calc(1.5em + .75rem + 2px);
    height: 100%;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: .7rem;
    padding: .42rem .68rem .42rem .78rem;
    border: 0;
    border-radius: inherit;
    background: transparent;
    color: inherit;
    font: inherit;
    line-height: 1.5;
    text-align: left;
    cursor: inherit;
}

.form-select-sm.xfe-select .xfe-select__trigger {
    min-height: calc(1.5em + .5rem + 2px);
    padding: .28rem .55rem .28rem .65rem;
    font-size: .875rem;
}

.xfe-select__trigger:focus {
    outline: 0;
}

.xfe-select__value {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .58rem;
    overflow: hidden;
}

.xfe-select__value-text,
.xfe-select__option-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xfe-select__value.is-placeholder {
    color: var(--text-secondary-color);
}

.xfe-select__chevron {
    width: .54rem;
    height: .54rem;
    margin: -.2rem .1rem 0 0;
    border: solid currentColor;
    border-width: 0 1.75px 1.75px 0;
    color: var(--text-secondary-color);
    transform: rotate(45deg);
    transition: color .16s ease, transform .16s ease;
}

.xfe-select.is-open .xfe-select__chevron {
    margin-top: .2rem;
    color: var(--main-color);
    transform: rotate(225deg);
}

.xfe-select__menu {
    position: fixed;
    z-index: 1090;
    display: none;
    overflow: hidden;
    padding: .38rem;
    border: 1px solid var(--xfe-dropdown-border);
    border-radius: .78rem;
    background: var(--xfe-dropdown-surface);
    box-shadow: var(--xfe-dropdown-shadow);
    color: var(--text-color);
    transform-origin: top center;
}

.xfe-select__menu.is-open {
    display: grid;
    animation: xfe-dropdown-in .14s cubic-bezier(.2, .75, .25, 1);
}

.xfe-select__menu[data-placement="top"] {
    transform-origin: bottom center;
}

.xfe-select__search-wrap {
    position: relative;
    padding: .18rem .18rem .42rem;
}

.xfe-select__search-icon {
    position: absolute;
    top: 50%;
    left: .88rem;
    width: .78rem;
    height: .78rem;
    border: 1.7px solid var(--text-secondary-color);
    border-radius: 50%;
    pointer-events: none;
    transform: translateY(-63%);
}

.xfe-select__search-icon::after {
    position: absolute;
    right: -.36rem;
    bottom: -.22rem;
    width: .42rem;
    height: 1.7px;
    border-radius: 999px;
    background: var(--text-secondary-color);
    content: "";
    transform: rotate(45deg);
}

.xfe-select__search {
    width: 100%;
    min-height: 2.35rem;
    padding: .4rem .65rem .4rem 2.15rem;
    border: 1px solid var(--xfe-dropdown-border);
    border-radius: .56rem;
    background: var(--bg-color);
    color: var(--text-color);
    font: inherit;
    font-size: .88rem;
}

.xfe-select__search::placeholder {
    color: var(--text-secondary-color);
}

.xfe-select__search:focus {
    border-color: var(--main-color);
    box-shadow: 0 0 0 .18rem color-mix(in srgb, var(--main-color) 15%, transparent);
    outline: 0;
}

.xfe-select__list {
    max-height: var(--xfe-select-max-height, 19rem);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: color-mix(in srgb, var(--main-color) 42%, transparent) transparent;
    scrollbar-width: thin;
}

.xfe-select__group {
    padding: .6rem .68rem .3rem;
    color: var(--text-secondary-color);
    font-size: .7rem;
    font-weight: 750;
    letter-spacing: .055em;
    text-transform: uppercase;
}

.xfe-select__group:not(:first-child) {
    margin-top: .28rem;
    border-top: 1px solid color-mix(in srgb, var(--text-color) 9%, transparent);
}

.xfe-select__option {
    display: grid;
    width: 100%;
    min-height: 2.55rem;
    grid-template-columns: minmax(0, 1fr) 1.1rem;
    align-items: center;
    gap: .62rem;
    padding: .5rem .65rem;
    border: 0;
    border-radius: .55rem;
    background: transparent;
    color: var(--text-color);
    font: inherit;
    font-size: .9rem;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}

.xfe-select__option:hover,
.xfe-select__option.is-active {
    background: var(--xfe-dropdown-hover);
    color: var(--text-color);
}

.xfe-select__option[aria-selected="true"] {
    background: var(--xfe-dropdown-selected);
    color: var(--text-color);
    font-weight: 680;
}

.xfe-select__option[aria-disabled="true"] {
    color: var(--text-secondary-color);
    cursor: not-allowed;
    opacity: .55;
}

.xfe-select__option-main {
    display: flex;
    min-width: 0;
    align-items: center;
    gap: .62rem;
}

.xfe-select__option-check {
    width: .74rem;
    height: .4rem;
    border-bottom: 2px solid transparent;
    border-left: 2px solid transparent;
    justify-self: center;
    transform: rotate(-45deg) translateY(-.08rem);
}

.xfe-select__option[aria-selected="true"] .xfe-select__option-check {
    border-color: var(--main-color);
}

.xfe-select__empty {
    padding: 1.6rem .8rem;
    color: var(--text-secondary-color);
    font-size: .86rem;
    text-align: center;
}

/* Repository-owner select variant. */
.xfe-select--owner .xfe-select__trigger {
    padding-top: .28rem;
    padding-bottom: .28rem;
}

.xfe-select__owner-icon {
    display: inline-flex;
    width: 1.75rem;
    height: 1.75rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid color-mix(in srgb, var(--main-color) 25%, transparent);
    border-radius: .52rem;
    background: color-mix(in srgb, var(--main-color) 13%, var(--bg-color));
    color: var(--main-color);
    font-size: .68rem;
    font-weight: 800;
}

.xfe-select__owner-icon.has-image {
    overflow: hidden;
    background: color-mix(in srgb, var(--text-color) 4%, var(--bg-color));
}

.xfe-select__owner-icon img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.xfe-select__owner-copy {
    display: grid;
    min-width: 0;
    gap: 0;
}

.xfe-select__owner-copy small {
    color: var(--text-secondary-color);
    font-size: .62rem;
    font-weight: 700;
    line-height: 1.05;
}

.xfe-select__owner-copy strong {
    overflow: hidden;
    font-size: .86rem;
    line-height: 1.2;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.xfe-select__option .xfe-select__owner-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.xfe-select__option .xfe-select__owner-copy small {
    font-size: .66rem;
}

.xfe-select__option .xfe-select__owner-copy strong {
    font-size: .92rem;
}

@keyframes xfe-dropdown-in {
    from {
        opacity: 0;
        transform: translateY(-.28rem) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes xfe-dropdown-fade {
    from { opacity: 0; }
    to { opacity: 1; }
}

@media (max-width: 575.98px) {
    .xfe-select__menu {
        max-width: calc(100vw - 1rem);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dropdown-menu.show,
    .xfe-select__menu.is-open {
        animation: none;
    }

    .dropdown-item,
    .xfe-select__chevron,
    div.xfe-select.form-select {
        transition: none;
    }
}