/* reset */
button {
    all: unset;
}

.DropdownMenuContent,
.DropdownMenuSubContent {
    z-index: 9;
    min-width: 124px;
    background-color: var(--background-neutral-container);
    border-radius: 6px;
    padding: var(--size-100);
    box-shadow: var(--shadow-level-2);
    animation-duration: 400ms;
    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
    // border: 1px solid var(--border-neutral-subtle);
    &.noPadding {
        padding: 0;
    }
    &:focus-visible {
        box-shadow: var(--shadow-level-2);
        // border: 1px solid var(--border-neutral-subtle);
    }
}
.DropdownMenuContent[data-side="top"],
.DropdownMenuSubContent[data-side="top"] {
    animation-name: slideDownAndFade;
}
.DropdownMenuContent[data-side="right"],
.DropdownMenuSubContent[data-side="right"] {
    animation-name: slideLeftAndFade;
}
.DropdownMenuContent[data-side="bottom"],
.DropdownMenuSubContent[data-side="bottom"] {
    animation-name: slideUpAndFade;
}
.DropdownMenuContent[data-side="left"],
.DropdownMenuSubContent[data-side="left"] {
    animation-name: slideRightAndFade;
}

.DropdownMenuItem,
.DropdownMenuCheckboxItem,
.DropdownMenuRadioItem,
.DropdownMenuSubTrigger,
.DropdownMenuSwitchItem {
    line-height: 1;
    border-radius: 4px;
    display: flex;
    align-items: center;
    height: 36px;
    font-size: 14px;
    color: var(--foreground-neutral);
    position: relative;
    padding-left: 4px;
    user-select: none;
    outline: none;
    &:focus {
        box-shadow: none;
    }
    &:focus-visible {
        box-shadow: var(--focus);
        outline: none;
    }
    &:hover {
        box-shadow: none;
    }
    .LabelSlot {
        margin-right: auto;
        padding-right: var(--size-200);
        width: max-content;
    }
    .RightSlot {
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        padding-right: 4px;
        color: var(--foreground-neutral);
        .RadioButton {
            width: 16px;
            height: 16px;
            border-radius: 20px;
            border: 1px solid currentColor;
            display: flex;
            align-items: center;
            justify-content: center;
            span {
                width: 10px;
                height: 10px;
                border-radius: 10px;
                display: block;
                background-color: currentColor;
            }
        }
        .Hotkey {
            background-color: var(--background-neutral);
            padding: 2px var(--size-50);
            border-radius: var(--size-50);
            height: 24px;
            display: flex;
            align-items: center;
            width: max-content;
            span {
                color: var(--foreground-neutral-placeholder);
                font-size: 14px;
                line-height: 20px;
            }
        }
    }
    .LeftSlot {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 20px;
        margin-right: 12px;
        // &:empty {
        //     width: 0;
        // }
        color: var(--foreground-neutral);
        svg {
            width: 20px;
            height: auto;
            display: block;
            * {
                stroke-width: 1.25px;
            }
        }
    }
}
.DropdownMenuSwitchItem {
    .SwitchRoot {
        pointer-events: none;
    }
    &[data-state="checked"] {
        .SwitchRoot {
            background-color: var(--foreground-neutral-subtle);
        }
    }
}
.darkmode {
    .DropdownMenuSwitchItem {
        &[data-state="checked"] {
            .SwitchRoot {
                background-color: var(--foreground-neutral-subtle);
                &:hover {
                    background-color: var(--black-200);
                }
                &[data-disabled] {
                    background-color: var(--black-200);
                }
            }
        }
    }
}

.DropdownMenuCheckboxItem[data-state="unchecked"] {
    .RightSlot {
        svg {
            display: none;
        }
    }
}
.DropdownMenuRadioItem[data-state="unchecked"] {
    .RightSlot {
        .RadioButton {
            border-color: var(--border-neutral-subtle);

            span {
                display: none;
            }
        }
    }
}
.DropdownMenuSubTrigger[data-state="open"] {
    background-color: var(--background-neutral-hover);
    color: var(--foreground-neutral);
}
.DropdownMenuItem[data-disabled],
.DropdownMenuCheckboxItem[data-disabled],
.DropdownMenuRadioItem[data-disabled],
.DropdownMenuSubTrigger[data-disabled],
.DropdownMenuSwitchItem[data-disabled] {
    color: var(--foreground-neutral-disabled);
    pointer-events: none;
    .LeftSlot {
        color: var(--foreground-neutral-disabled);
    }
    .RightSlot {
        .Hotkey {
            background-color: transparent;
            span {
                color: var(--foreground-neutral-disabled);
            }
        }
    }
}
.DropdownMenuItem[data-highlighted],
.DropdownMenuCheckboxItem[data-highlighted],
.DropdownMenuRadioItem[data-highlighted],
.DropdownMenuSubTrigger[data-highlighted],
.DropdownMenuSwitchItem[data-highlighted] {
    background-color: var(--brand-2);
    color: var(--black);
}

.DropdownMenuLabel {
    padding-left: var(--size-300);
    font-size: 12px;
    line-height: 26px;
    color: var(--foreground-neutral-subtle);
}

.DropdownMenuSeparator {
    height: 1px;
    background-color: var(--border-neutral-subtle);
    margin: var(--size-100);
}

.DropdownMenuItemIndicator {
    position: absolute;
    left: 0;
    width: var(--size-300);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

// .DropdownMenuArrow {
//     fill: white;
// }

.RightSlot {
    margin-left: auto;
    padding-left: var(--size-200);
    color: var(--foreground-neutral);
}
[data-highlighted] > .RightSlot {
    color: var(--black);
}
[data-highlighted] > .LeftSlot {
    color: var(--black);
}
[data-disabled] .RightSlot {
    color: var(--foreground-neutral-disabled);
}

@keyframes slideUpAndFade {
    from {
        opacity: 0;
        transform: translateY(2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideRightAndFade {
    from {
        opacity: 0;
        transform: translateX(-2px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideDownAndFade {
    from {
        opacity: 0;
        transform: translateY(-2px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideLeftAndFade {
    from {
        opacity: 0;
        transform: translateX(2px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}