/**
 * Shared custom-select dropdown chrome (form selects + catalog toolbar pills).
 */

.dc-form-select__chevron,
.dc-catalog-toolbar__control-chevron {
    display: inline-flex;
    flex: 0 0 auto;
    color: var(--dc-gris);
    pointer-events: none;
    transition: transform 0.15s ease;
}

.dc-form-select.is-open,
.dc-catalog-toolbar__control-pill.is-open {
    z-index: 30;
}

.dc-form-select.is-open .dc-form-select__chevron,
.dc-catalog-toolbar__control-pill.is-open .dc-catalog-toolbar__control-chevron {
    transform: rotate(180deg);
}

.dc-form-select__menu,
.dc-catalog-toolbar__control-menu {
    position: absolute;
    top: calc(100% + 0.375rem);
    z-index: var(--dc-z-dropdown);
    margin: 0;
    padding: 0.375rem;
    list-style: none;
    border: 1px solid var(--dc-ceniza);
    border-radius: var(--dc-radius-control);
    background: var(--dc-blanco);
    box-shadow: 0 8px 24px rgb(26 51 40 / 12%);
}

.dc-form-select__menu {
    left: 0;
    right: 0;
    max-height: 16rem;
    overflow-y: auto;
}

.dc-form-select.is-drop-up .dc-form-select__menu {
    top: auto;
    bottom: calc(100% + 0.375rem);
}

.dc-catalog-toolbar__control-menu {
    right: 0;
    min-width: 100%;
    width: max-content;
    max-width: min(20rem, calc(100vw - 1.5rem));
}

.dc-form-select__menu[hidden],
.dc-catalog-toolbar__control-menu[hidden] {
    display: none;
}

.dc-form-select__menu:not([hidden]),
.dc-catalog-toolbar__control-menu:not([hidden]) {
    display: block;
}

.dc-form-select__option,
.dc-catalog-toolbar__control-option {
    margin: 0;
    padding: var(--dc-space-2) 0.625rem;
    border-radius: var(--dc-radius-sm);
    font-size: var(--dc-size-small);
    line-height: 1.35;
    color: var(--dc-tinta);
    cursor: pointer;
    user-select: none;
}

.dc-form-select__option:hover,
.dc-form-select__option:focus,
.dc-catalog-toolbar__control-option:hover,
.dc-catalog-toolbar__control-option:focus {
    outline: none;
    background: var(--dc-hueso);
}

.dc-form-select__option.is-selected,
.dc-catalog-toolbar__control-option.is-selected {
    font-weight: var(--dc-weight-semibold);
    background: var(--dc-lima-300);
    color: var(--dc-pino);
}

.dc-form-select__option.is-selected:hover,
.dc-form-select__option.is-selected:focus,
.dc-catalog-toolbar__control-option.is-selected:hover,
.dc-catalog-toolbar__control-option.is-selected:focus {
    background: var(--dc-lima-300);
}