@use '../../../styles/variables';
@use '../../select/styles/select.mixin';
@use 'option.mixin';

$optionsSize: 'sm', 'default', 'md', 'lg';

.thy-select-dropdown-options {
    @include select.thy-select-options-container();

    .loading-more {
        min-height: auto;
        text-align: center;
    }

    .thy-option-item-group {
        @include option.thy-option-common-layout();
    }

    .thy-option-item {
        @include option.thy-option();
        &.hidden {
            display: none;
        }
    }

    .thy-option-item-group {
        flex-direction: column;

        &.thy-select-option-group-hidden {
            display: none;
        }

        .group-name {
            width: 100%;
            height: 30px;
            line-height: 30px;
            color: variables.$gray-600;
            background-color: variables.$gray-80;
            padding: {
                left: 20px;
                right: 20px;
            }
            font-size: variables.$font-size-sm;
        }
        .thy-option-item {
            padding: {
                left: 20px;
                right: 20px;
            }
        }
    }
}
.thy-select-dropdown {
    @include select.thy-select-dropdown();
    &.thy-select-dropdown-multiple {
        .thy-select-dropdown-options {
            .thy-option-item {
                @include option.thy-multiple-option();
            }
        }
    }

    &.thy-select-dropdown-single {
        .thy-select-dropdown-options {
            .thy-option-item {
                .checked-icon {
                    display: none;
                }
            }
        }
    }
    .thy-custom-select-footer {
        display: flex;
        height: 41px;
        line-height: 40px;
        color: variables.$primary;
        cursor: variables.$hand-cursor;
        border-top: solid 1px variables.$gray-200;
        padding: {
            left: 20px;
            right: 20px;
        }
        &:hover {
            background-color: variables.$gray-80;
        }
    }
}

@each $size in $optionsSize {
    .thy-select-dropdown-options-#{$size} {
        @include select.thy-select-options-size($size);
    }
}
