@charset "UTF-8";
@use "../../jkl";

@layer jokul.components {
    .jkl-popover {
        /* stylelint-disable declaration-block-no-duplicate-custom-properties -- fallback for browsers without light-dark() support */
        --shadow-color: rgb(49 48 48 / 20%);
        --shadow-color: light-dark(rgb(49 48 48 / 20%), rgb(0 0 0 / 50%));
        /* stylelint-enable declaration-block-no-duplicate-custom-properties */
        padding: var(--popover-padding, 0);
        z-index: var(--jkl-floating-z-index, #{jkl.$z-index--floating});
        box-shadow: 0 4px 20px 0 var(--shadow-color);
        background-color: var(--jkl-color-background-container);
        border-radius: var(--jkl-border-radius-s);

        &:focus-visible {
            @include jkl.focus-outline;
        }
    }

    .jkl-popover-trigger {
        &:focus {
            outline: 0;
        }

        &:focus-visible {
            @include jkl.focus-outline;
        }
    }
}