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

@mixin roolith-dropdown() {
    .dropdown {
        display: inline-block;
        position: relative;

        &:hover .dropdown-body {
            display: block;
        }
    }

    .has-dropdown-icon {
        &:after {
            @include mixin.triangle(down, var(--r-dropdown-icons-size));
            vertical-align: rem(2);
            margin-left: rem(25);
        }

        &.button-small:after {
            @include mixin.triangle(down, var(--r-dropdown-icons-size-small));
        }

        &.button-large:after {
            @include mixin.triangle(down, var(--r-dropdown-icons-size-large));
            margin-left: rem(35);
        }
    }

    .dropdown-body {
        display: none;
        position: absolute;
        left: 0;
        width: var(--r-dropdown-width);
        font-size: rem(14);
        line-height: rem(22);
        background-color: var(--r-dropdown-background);
        border: rem(1) solid var(--r-dropdown-border-color);
        margin-top: rem(-1);
        border-radius: rem(2);
        box-shadow: var(--r-dropdown-shadow);
        z-index: 2;
        top: 100%;

        .active & {
            display: block;
        }
    }

    .dropdown-body-text {
        padding: rem(15);
    }

    .dropdown-item {
        display: block;
        padding: rem(5) rem(15);
        color: var(--r-dropdown-item-color);
        @include mixin.transition('background, color');

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

        &:first-child {
            margin-top: rem(5);
        }

        &:last-child {
            margin-bottom: rem(5);
        }
    }

    .dropdown-item-sep {
        height: rem(1);
        background: var(--r-dropdown-item-sep);
        display: block;
    }
}