@import '~@gravity-ui/uikit/styles/mixins';

.control-item-select {
    $controlClass: &;

    &__error {
        $errorClass: &;
        border-radius: 3px;
        padding: 0 6px;

        &_inside {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            justify-content: space-around;
            gap: 12px;
            padding: 6px;
        }

        &_mobile {
            #{$controlClass}__error-text {
                @include text-body-2;
            }

            #{$controlClass}__buttons {
                margin-top: 12px;

                & > :first-child {
                    margin-right: 12px;
                }
            }

            &#{$errorClass}_inside {
                width: 100%;
                height: auto;
                margin-bottom: 6px;
            }
        }

        &:hover:not(#{&}_inside) {
            background-color: var(--g-color-base-simple-hover);
        }
    }

    &__error-text {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    &__buttons {
        width: 100%;
        display: flex;
        align-items: center;

        & > :first-child {
            margin-right: 7px;
        }
    }

    &__select-loader {
        height: 90px;
    }
}
