@use "../../styles/variables";

@mixin switcher-size($size) {
    button {
        width: $size;
        height: $size;
    }
    span {
        line-height: $size;
    }
}

.thy-arrow-switcher {
    display: inline-block;
    .switcher-wrapper {
        display: flex;
        align-items: center;
        button {
            background: variables.$arrow-switcher-btn-bac;
            border-radius: variables.$input-border-radius-xs;
            transition: none;
            display: flex;
            align-items: center;
            .thy-icon {
                flex: 1;
                font-size: variables.$font-size-base;
            }
        }
        button:disabled {
            background: variables.$arrow-switcher-btn-disabled-bac;
            pointer-events: none;
            .thy-icon {
                color: variables.$arrow-switcher-btn-disabled-color;
            }
        }
        button:hover {
            background: variables.$arrow-switcher-btn-hover-bac;
            .thy-icon {
                color: variables.$arrow-switcher-btn-hover-color;
            }
        }
        span {
            min-width: 58px;
            text-align: center;
            padding: 0 10px;
            color: variables.$gray-500;
        }
    }
    @include switcher-size(variables.$arrow-switcher-btn-size);

    &.thy-arrow-switcher-small {
        @include switcher-size(variables.$arrow-switcher-sm-btn-size);
    }
}
