@charset "UTF-8";
@use "../../jkl";
@use "../icon/base-styles" as icon;

@layer jokul.components {
    .jkl-option {
        --icon-color: transparent;
        --text-color: var(--jkl-color-text-default);

        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: subgrid;
        padding: var(--jkl-spacing-8);
        background-color: transparent;
        color: var(--text-color);
        border: none;
        border-radius: var(--jkl-border-radius-s);
        outline: none;
        align-items: start;
        text-align: left;

        &::before {
            @include icon.base-styles;
            color: var(--icon-color);
            content: "check" / "";
        }


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

        &[aria-selected="true"]::before {
            --icon-color: var(--jkl-color-background-contrast);
            content: "check" / "";
        }

        &[data-multiple] {
            --icon-color: var(--jkl-color-background-contrast);

            &::before {
                content: "check_box_outline_blank" / "";
            }

            &[aria-selected="true"]::before {
                --jkl-icon-fill: 1;
                content: "check_box" / "";
            }
        }

        &__label {
            flex-grow: 999;
        }

        &__media {
            position: relative;
            width: var(--media-size, 2em);
            min-width: 2em;
            aspect-ratio: 1;
            flex-shrink: 0;
            overflow: hidden;
            border-radius: var(--jkl-border-radius-xs);

            & :is(img, picture, video) {
                position: absolute;
                inset: 0;
                object-fit: cover;
                width: 100%;
                height: 100%;
            }
        }
    }
}