toggle-corp/react-store

@import '../../../stylesheets/utils';

:root {
    --width-scale-input-value: 12px;
    --height-scale-input-value: 20px;
    --width-scale-input-value-active: 16px;
    --height-scale-input-value-active: 30px;
}

.scale-input {
    display: flex;
    align-items: center;
    min-height: var(--height-scale-input-value-active);

    .value {
        transition: var(--duration-transition-medium) all ease-in-out;
        margin: 0 var(--spacing-extra-small);
        outline: 0;
        border: 0;
        border-radius: var(--radius-button-border);
        cursor: pointer;
        width: var(--width-scale-input-value);
        height: var(--height-scale-input-value);

        &:focus {
            // FIXME: this is a hack (scale has mostly dark colors similar to primary color)
            // @include outline-button(var(--color-primary));
        }

        &.active {
            width: var(--width-scale-input-value-active);
            height: var(--height-scale-input-value-active);
        }
    }

    &.disabled,
    &.read-only {
        .value {
            cursor: default;
        }
    }
}