@charset "UTF-8";
@use "../../jkl";
@use "menu-item";
@use "menu-divider";

@layer jokul.components {
    .jkl-menu {
        /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
        --border-color: transparent;
        --border-color: light-dark(transparent, var(--jkl-color-border-strong));
        /* stylelint-enable declaration-block-no-duplicate-custom-properties */
        background-color: var(--jkl-color-background-container);

        width: 100%;
        max-width: jkl.rem(336px);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
        box-shadow: 0 jkl.rem(4px) jkl.rem(20px) rgb(49 48 48 / 20%);
        border-radius: var(--jkl-border-radius-s);
        border: 2px solid var(--border-color);
        z-index: jkl.$z-index--dropdown;
        padding-block: var(--jkl-unit-15);

        &:focus-visible {
            outline: none;
        }

        & &[data-placement="bottom-start"] {
            box-shadow:
                rgb(0 0 0 / 20%) 0 -1px 2px 0,
                rgb(0 0 0 / 14%) -1px 2px 2px 0,
                rgb(0 0 0 / 12%) 3px 1px 5px 0;
        }
    }
}