@use '../function' as *;
@use '../mixin';

@mixin roolith-combo-box() {
    .combo-box {
        display: inline-block;
        position: relative;
        text-align: left;

        &.open {
            .combo-box-menu {
                display: block;
            }
        }
    }

    .combo-box-menu {
        --r-animation-duration: var(--r-combo-box-show-animation-duration);

        position: absolute;
        top: 100%;
        left: 0;
        z-index: 2;
        display: none;
        width: var(--r-combo-box-width);
        margin: 0;
        padding: 0;
        list-style: none;
        background-color: var(--r-combo-box-background);
        border: rem(1) solid var(--r-combo-box-border-color);
        border-radius: var(--r-combo-box-border-radius);
        box-shadow: var(--r-combo-box-shadow);
        @extend .animation, .fadeIn;

        .combo-box-right & {
            left: auto;
            right: 0;
        }
    }

    .combo-box-item {
        display: block;
        position: relative;

        &:first-child {
            margin-top: calc(var(--r-combo-box-item-y-padding) - #{rem(2)});
        }

        &:last-child {
            margin-bottom: calc(var(--r-combo-box-item-y-padding) - #{rem(2)});
        }

        &:hover {
            background-color: var(--r-dropdown-item-hover-background-color);

            > .combo-box-submenu {
                display: block;
            }
        }

        &:has(.combo-box-submenu) {
            &:after {
                position: absolute;
                top: 50%;
                right: var(--r-combo-box-item-x-padding);
                transform: translateY(-50%);
                @include mixin.triangle(right, var(--r-combo-box-icon-size));
            }
        }
    }

    .combo-box-link {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: rem(10);
        color: inherit;
        line-height: inherit;
        padding: var(--r-combo-box-item-y-padding) var(--r-combo-box-item-x-padding);
        color: var(--r-combo-box-item-color);
        font-size: rem(14);
        line-height: 1.3;
        @include mixin.transition('background, color');

        &:hover {
            background-color: var(--r-dropdown-item-hover-background-color);
            color: var(--r-dropdown-item-hover-color);
            cursor: pointer;
        }
    }

    .combo-box-primary {
        display: flex;
        align-items: center;
        gap: rem(5);
    }

    .combo-box-secondary {
        color: var(--r-combo-box-secondary-color);
        font-size: rem(12);
    }

    .combo-box-submenu {
        position: absolute;
        top: calc(var(--r-combo-box-item-y-padding) * -1);
        left: calc(100% - #{rem(3)});
        z-index: 2;
        display: none;
        width: var(--r-combo-box-width);
        margin: 0;
        padding: 0;
        list-style: none;
        background-color: var(--r-combo-box-background);
        border: rem(1) solid var(--r-combo-box-border-color);
        border-radius: var(--r-combo-box-border-radius);
        box-shadow: var(--r-combo-box-shadow);

        .combo-box-right & {
            left: auto;
            right: calc(100% - #{rem(3)});
        }
    }

    .combo-box-item-sep {
        display: block;
        height: rem(1);
        margin: var(--r-combo-box-item-y-padding) 0;
        background-color: var(--r-combo-box-item-sep);
    }

    .combo-box-item-header {
        padding: var(--r-combo-box-item-y-padding) var(--r-combo-box-item-x-padding);
        color: var(--r-combo-box-item-header-color);
        font-size: rem(12);
        line-height: 1.3;
        text-transform: uppercase;
    }
}