//@import "../../styles/typography";
//@import "../../styles/form";
//@import "../../styles/color";
@import "../../styles/typography";
@import "../../styles/color";
@import "../../styles/sizes";
@import "../../styles/flex";
@import "../../styles/form";

.one-ui-time-picker {
    $root: &;
    display: flex;
    align-items: center;
    border: 1px solid;


    @include inputWrapper();
    @include setMargin();
    @include setFlex();

    &__wrapper {
        width: 100%;
    }

    &__after {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    &__input {
        @include font("s-14", regular, "l-1.2");

        height: 48px;

        text-align: center;
        border: none;
        background: none;
        outline: none;

        &::-webkit-outer-spin-button,
        &::-webkit-inner-spin-button {
            -webkit-appearance: none;
            margin: 0;
        }
    }

    &--size {
        $sizeNames: xsm sm md lg xl;
        $sizes: 24px 32px 40px 48px 56px;
        $paddings: 0 8px, 0 12px, 0 12px, 0 16px, 0 16px, 0 16px;
        $clearMargins: 6 8 10 10 6;

        @mixin inputSize($root, $size) {
            $i: index($sizes, $size);
            &-#{nth($sizeNames, $i)} {
                height: #{$size}px;
                min-height: #{$size}px;
                min-width: #{$size}px;
                padding: #{nth($paddings, $i)};
            }
        }
        @each $size in $sizes {
            @include inputSize($root, $size);
        }
    }
}