@use "../../core/jkl";

@layer jokul.components {
    .jkl-menu-item {
        --jkl-menu-item-height: var(--jkl-unit-60);
        --jkl-menu-item-padding: var(--jkl-unit-15) var(--jkl-unit-30);
        --background-color: var(--jkl-color-background-interactive);

        background-color: var(--background-color);
        color: var(--jkl-color-text-default);
        text-decoration: none;
        cursor: pointer;

        box-sizing: border-box;
        user-select: none;

        @include jkl.text-style("text-medium");
        display: flex;
        align-items: center;
        gap: var(--jkl-unit-10);
        width: 100%;
        height: var(--jkl-menu-item-height);
        padding: var(--jkl-menu-item-padding);

        @include jkl.reset-outline;

        &__content {
            display: flex;
            gap: var(--jkl-unit-05);
            justify-content: flex-start;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            flex-grow: 1;
            flex-shrink: 1;
            max-width: 100%;
        }

        &__icon {
            display: flex;
            align-items: center;
            flex-shrink: 0;
        }

        &__arrow {
            display: flex;
            align-items: center;
        }

        &__chevron {
            flex-shrink: 0;
        }

        &:hover,
        &:focus-visible {
            --background-color: var(--jkl-color-background-interactive-hover);
        }
    }
}