@use "sass:map";
@use "sass:list";

@use "../../../dev" as *;
@use "../../../variables" as *;

@use "../../soul_type" as *;
@use "../../soul_object" as *;
@use "../../head_layout" as *;
@use "input" as *;
@use "input_select" as *;

@mixin dropdown--container {
    width: 100%;
    position: relative;
}

@mixin dropdown--header {
    @include select--base;
    @include flex;
    @include align--center;
    @include justify--between;

    button {
        right: 0;
    }
}

@mixin dropdown--menu {
    @include flex--col;
    width: 100%;
    margin-top: q(4);
    padding: q(4);
    @include object--corner--rounded;
    background: var(--color_fill_primary);
    border: q(1) solid var(--color_text_primary);
    z-index: 10;

    label {
        @include flex;
        @include align--center;
        @include justify--between;
        cursor: pointer;

        &:hover {
            background-color: var(--color_state_hover);
        }

        input[type="checkbox"] {
            width: q(16);
            height: q(16);
        }
    }
}

@mixin dropdown--collapse {
    display: none !important;
    position: absolute;

    &.active {
        @include flex;
        display: flex !important;
    }
}

@mixin select_dropdown {
    @include dropdown--container;

    &--header {
        @include dropdown--header;
    }

    &--menu {
        @include dropdown--collapse;
        @include dropdown--menu;
    }
}