@use 'sass:map';
@use '../../../styles/variables';
@use '../../../styles/mixins/shadow.scss';
@use '../../../avatar/styles/mixin.scss' as avatarMixin;

$avatarHeight: (
    'sm': variables.$select-control-height-sm,
    'md': variables.$select-control-height-md,
    'default': variables.$select-control-height-default,
    'lg': variables.$select-control-height-lg
);

@mixin select-control-size($tag-height, $padding-y, $height) {
    padding: {
        top: $padding-y;
        bottom: $padding-y;
    }

    .select-control-rendered {
        line-height: $height;
        min-height: $height;

        .select-control-search {
            height: $height;
            line-height: $height;
        }

        .thy-avatar {
            display: inline-flex;
            & > img,
            & > .avatar-default {
                width: $height;
                height: $height;
                line-height: $height;
            }
        }

        .selected-value,
        .select-control-search > .form-control-lg {
            @if $tag-height == variables.$tag-height-lg {
                font-size: 1.125rem;
            }
        }

        .select-control-search {
            @if $tag-height == variables.$tag-height-md or $tag-height == variables.$tag-height-lg {
                height: $tag-height;
            } @else {
                height: unset;
            }
        }

        .choice-item {
            padding: 0 0 0 12px;
            border: 0 none;
            .choice-remove-link {
                height: 100%;
                transition: background 0.2s ease-in-out;
                cursor: variables.$hand-cursor;
                span {
                    height: 100%;
                    padding: 0 6px;
                    border-top-right-radius: variables.$tag-border-radius;
                    border-bottom-right-radius: variables.$tag-border-radius;
                    transition: background 0.2s ease-in-out;
                    display: flex;
                    align-items: center;
                }
                .thy-icon {
                    transition: color 0.2s ease-in-out;
                    margin-right: 0;
                }

                &:hover {
                    background-color: variables.$bg-default;
                    span {
                        background-color: rgba(variables.$danger, 0.1);
                    }

                    .thy-icon {
                        color: variables.$danger;
                    }
                }
            }
            &.disabled,
            &.max-tag-count-choice {
                padding-right: 8px;
            }
        }
    }
}

@mixin thy-select-dropdown {
    width: 100%;
    background: variables.$bg-panel;
    border-radius: variables.$border-radius;
    @include shadow.section-box-shadow();
}

@mixin thy-select-options-container {
    max-height: 300px;
    overflow-y: auto;
    padding: 12px 0;
}

@mixin thy-select-options-size($size) {
    .thy-option-item {
        .thy-avatar {
            display: inline-flex;
            @include avatarMixin.avatarSize(calc(map.get($avatarHeight, $size) / 1px));
        }
    }
}

$has-value-margin-base: -0.03175rem;
$has-value-margin-md: -0.2815rem;
$thy-label-spacing: 0.3125rem;

@mixin thy-select-multiple-control {
    .multiple-value-wrapper {
        margin: {
            top: $has-value-margin-base;
            bottom: $has-value-margin-base - $thy-label-spacing;
            right: 15px;
        }
    }
}
