toggle-corp/react-store

@import '../../../stylesheets/utils';
@import '../../../stylesheets/input-base';
@import '../../../stylesheets/input-border';

:root {
    --width-time-input: 120px;
    --width-input-spinner: 16px;
}

.time-input {
    min-width: var(--width-time-input);

    .input {
        @extend %input-border;
        display: flex;
        align-items: center;

        .units {
            display: flex;
            flex-grow: 1;

            .unit {
                @extend %input-base;
                width: calc(2ch + var(--width-input-spinner));
                font-family: var(--font-family-monospace);
            }

            .separator {
                display: flex;
                align-items: center;
                flex-shrink: 0;
                padding-right: var(--spacing-small);
                font-family: var(--font-family-monospace);
            }
        }

        .action-buttons {
            @include transition-medium;
            display: inline;
            flex-shrink: 0;
            opacity: 0;
        }

        &:hover {
            .action-buttons {
                opacity: 1;
            }
        }
    }

    &:not(.disabled) {
        &.focused {
            .input {
                border-bottom-color: var(--color-accent);
            }
        }

        &.invalid {
            .input {
                border-bottom-color: var(--color-warning);
            }
        }

        &.error {
            .input {
                border-bottom-color: var(--color-danger);
            }
        }
    }


    &.disabled {
        .input {
            .units {
                .unit {
                    color: var(--color-text-disabled);
                }
            }
        }
    }

    &.readOnly,
    &.disabled {
        .input {
            border-bottom-color: var(--color-separator);
        }

        &:hover {
            .action-buttons {
                opacity: 0;
                pointer-events: none;
            }
        }

        .label {
            color: var(--color-text-disabled);
        }
    }
}