@reference "tailwindcss";

.dropdown-menu__trigger {
    line-height: 0;
    transition: 250ms background-color;
    background-color: rgb(var(--sm-page-background));
    border-color: rgb(var(--sm-active-border));
    @apply appearance-none inline-flex items-center justify-center gap-2 w-auto outline-none px-2 pr-1 py-2 rounded border;
}
.dropdown-menu__trigger:hover {
    background-color: rgb(var(--sm-active-background));
}
.dropdown-menu__trigger:focus-visible {
    outline: 2px solid hsl(200 98% 39%);
    outline-offset: 2px;
}
.dropdown-menu__trigger:active {
    background-color: rgb(var(--sm-active-background));
}
.dropdown-menu__trigger-icon {
    flex: 0 0 20px;
    transition: transform 250ms;
}
.dropdown-menu__trigger-icon[data-expanded] {
    transform: rotate(180deg);
}
.dropdown-menu__content,
.dropdown-menu__sub-content {
    min-width: 220px;
    padding: 8px;
    border-radius: 6px;
    border: 1px solid hsl(240 6% 90%);
    box-shadow:
        0 4px 6px -1px rgb(0 0 0 / 0.1),
        0 2px 4px -2px rgb(0 0 0 / 0.1);
    outline: none;
    transform-origin: var(--kb-menu-content-transform-origin);
    animation: contentHide 250ms ease-in forwards;
    background-color: rgb(var(--sm-main-background));
    border-color: rgb(var(--sm-active-border));
    color: rgb(var(--sm-primary-foreground));
    @apply border;
}
.dropdown-menu__content[data-expanded],
.dropdown-menu__sub-content[data-expanded] {
    animation: contentShow 250ms ease-out;
}
.dropdown-menu__item,
.dropdown-menu__checkbox-item,
.dropdown-menu__radio-item,
.dropdown-menu__sub-trigger {
    font-size: 16px;
    line-height: 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    height: 32px;
    position: relative;
    user-select: none;
    outline: none;
    color: rgb(var(--sm-primary-foreground));
    @apply cursor-pointer pr-2;
}
.dropdown-menu__sub-trigger[data-expanded] {
    background-color: hsl(204 94% 94%);
    color: hsl(201 96% 32%);
}
.dropdown-menu__item[data-disabled],
.dropdown-menu__checkbox-item[data-disabled],
.dropdown-menu__radio-item[data-disabled],
.dropdown-menu__sub-trigger[data-disabled] {
    color: hsl(240 5% 65%);
    opacity: 0.5;
    pointer-events: none;
}
.dropdown-menu__item[data-highlighted],
.dropdown-menu__checkbox-item[data-highlighted],
.dropdown-menu__radio-item[data-highlighted],
.dropdown-menu__sub-trigger[data-highlighted] {
    outline: none;
    background-color: rgb(var(--sm-active-background));
    color: rgb(var(--sm-active-foreground));
}
.dropdown-menu__group-label {
    padding: 0 24px;
    font-size: 14px;
    line-height: 32px;
    color: hsl(240 4% 46%);
}
.dropdown-menu__separator {
    height: 1px;
    border-top: 1px solid hsl(240 6% 90%);
    margin: 6px;
}
.dropdown-menu__item-indicator {
    position: absolute;
    left: 0;
    height: 20px;
    width: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.dropdown-menu__item-right-slot {
    margin-left: auto;
    padding-left: 20px;
    font-size: 14px;
    color: hsl(240 4% 46%);
}
[data-highlighted] > .dropdown-menu__item-right-slot {
    color: white;
}
[data-disabled] .dropdown-menu__item-right-slot {
    color: hsl(240 5% 65%);
    opacity: 0.5;
}
@keyframes contentShow {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
@keyframes contentHide {
    from {
        opacity: 1;
        transform: scale(1);
    }
    to {
        opacity: 0;
        transform: scale(0.96);
    }
}
