@use '~@/style/globals';
@use 'sass:color';

.MultiSwitch {
    display: inline-flex;
    align-items: center;

    &__option {
        flex: 0 0 auto;
        margin: 0;
        border-radius: 0;
        background-color: rgba(globals.$bg-color-button-default, 1);
        color: globals.$text-base-color;

        &:first-child {
            border-radius: globals.$input-border-radius 0 0 globals.$input-border-radius;
        }

        &:last-child {
            border-radius: 0 globals.$input-border-radius globals.$input-border-radius 0;
        }

        &--active,
        &--active:hover,
        &--active:focus,
        &--active:active {
            background-color: rgba(globals.$bg-color-button-default, 0.6);
            color: color.adjust(globals.$color-active-button, $lightness: 20%);
            cursor: auto;
        }
    }
}
