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

.one-ui-input {
    $root: &;
    position: relative;

    height: 48px;
    transition: color 0.5s;
    cursor: initial;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
  
    @include inputWrapper();
    @include setMargin();
    @include setFlex();

    input {
        @include font("s-12", regular, "l-1.2");
        color: color(dark);
        letter-spacing: 0;
        box-shadow: none;
        outline: none;
        background: transparent;
        border: none;
        height: 100%;
        width: 100%;
        padding-left: 0 !important;

        &::placeholder {
            font-weight: 300;
            color: color(grey, 8);
        }
    }

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

    &__clear {
        cursor: pointer;
        margin-left: -16px;
        border-radius: 3px;

        &:hover {
            background: color(grey, 2, .8);
        }

        &--hidden {
            display: none;
        }
    }

    > .one-ui-icon {
        margin-right: 8px;
    }


    &--fullWidth {
        width: 100%;
    }

    &--transparent {
        @include transparentWrapper($root);
    }

    &--disabled {
        color: color(grey, 5) !important;
        cursor: not-allowed;
        opacity: 0.5
    }

    &--textCentered {
        input {
            text-align: center;
        }
    }

    &--size {
        $sizeNames: xsm sm md lg xl;
        $sizes: 24 32 40 48 56;
        $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)};

                #{$root}__before,
                #{$root}__after {
                    min-width: $size;
                    min-height: $size;
                }

                #{$root}__clear {
                    width: $size - 8px;
                    height: $size - 8px;
                    max-width: 32px;
                    max-height: 32px;
                    margin-right: -#{nth($clearMargins,$i)}px;
                }
            }
        }
        @each $size in $sizes {
            @include inputSize($root, $size);
        }
    }

    // remove autofill bg & highlight
    @-webkit-keyframes auto-fill-cancel {
        to {
            color: inherit;
            background: inherit;
        }
    }

    input:-webkit-autofill {
        -webkit-animation-name: auto-fill-cancel;
        -webkit-animation-fill-mode: both;
        background-color: transparent;
        font-size: inherit !important;
        font-weight: inherit !important;
    }

    input:-webkit-autofill,
    input:-webkit-autofill:hover,
    input:-webkit-autofill:focus {
        -webkit-box-shadow: 0 0 0px 1000px transparent inset !important;
        transition: background-color 5000s ease-in-out 0s;
        background-color: transparent;
        font-size: inherit !important;
        font-weight: inherit !important;

    }

    // remove number type field arrows
    input[type="number"]::-webkit-inner-spin-button,
    input[type="number"]::-webkit-outer-spin-button {
        -webkit-appearance: none;
        margin: 0;
        @include font("s-14", regular, "l-1.2");
    }
}