@import 'commons';

:root {
    // states
    --m-input-style--hover-color: #{ $m-color-grey-black };
    --m-input-style--focus-color: #{ $m-color-interactive };
    --m-input-style--error-color: #{ $m-color-error };
    --m-input-style--valid-color: #{ $m-color-success };
    --m-input-style--waiting-color: #{ $m-color-active };
    --m-input-style--disabled-color: #{ $m-color-disabled };
    --m-input-style--label-up-color: #{ $m-color-grey-darkest };
    --m-input-style--label-up-border-color: #{ $m-color-grey };
    // core
    --m-input-style--box-shadow: none;
    --m-input-style--input-color: #{ $m-color-text};
    --m-input-style--label-color: #{ $m-color-grey-dark };
    --m-input-style--border-color: #{ $m-color-grey };
    --m-input-style--buttons-color: #{ $m-color-grey };
    --m-input-style--background-color: #{ $m-color-white };
    --m-input-style--placeholder-color: #{ $m-input-style--color-disabled };
}

@mixin input-style-cursor($cursor: default) {

    &,
    .m-input-style__label,
    .m-input-style__input,
    .m-input-style__input input,
    .m-input-style__input textarea {
        cursor: $cursor;

        @content;
    }
}

.m-input-style {
    @include input-style-cursor(text);

    position: relative;
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    outline: none;
    line-height: $m-input-style--base-height;

    ::placeholder {
        color: var(--m-input-style--placeholder-color);
    }

    &__main {
        width: 100%;
        display: inherit;
        box-shadow: var(--m-input-style--box-shadow);
        border-radius: $m-input-style--border-radius;
        border: 1px solid var(--m-input-style--border-color);
        background-color: var(--m-input-style--background-color);
        outline: 1px solid rgba(255, 255, 255, 0);
        transition: border-color $m-transition-duration-lg linear, box-shadow $m-transition-duration linear;
    }

    &__append {
        display: inherit;
        overflow: hidden;
        position: relative;
    }

    &__body {
        flex: 1;
        display: inherit;
        flex-direction: column;
        padding: 10px $m-input-style--padding;
        transition: margin-top $m-transition-duration ease;
        min-height: 44px;
    }

    &__label {
        z-index: 1;
        position: relative;
        transform-origin: 0 0;
        @include m-font-size();
        transform: translate3d(0, 0, 0);
        color: var(--m-input-style--label-color);
        font-weight: $m-font-weight-semi-bold;

        .m-icon {
            font-size: 85%;
            margin-right: $m-space-xs;
        }
    }

    &__text {
        left: 0;
        position: relative;
        display: inline-block;
        background: linear-gradient(360deg, var(--m-input-style--background-color) calc(50% + 2px), rgba(250, 250, 250, 0) 100%) calc(52% + 2px);
        transition: background $m-transition-duration ease, padding $m-transition-duration ease, left $m-transition-duration ease;
    }

    &__input {
        position: relative;
        display: flex;
        align-items: center;
        flex: auto;
        width: 100%;
        font-weight: $m-font-weight-light;
        min-height: $m-input-style--base-height;
        margin: -$m-input-style--base-height 0 0;

        .m-icon-button.m-icon-button,
        .m-icon.m-icon {
            position: relative;
            z-index: 0;
            font-size: 1em;
            color: var(--m-input-style--buttons-color);
        }

        .m-icon-button.m-icon-button {
            min-width: auto;
            min-height: auto;
        }

        .m-icon.m-icon {
            transition: color 0.3s ease;
        }
    }

    &__input,
    input,
    textarea {
        outline: none;
        text-overflow: ellipsis;
        font-family: inherit;
        text-align: left;
        background: none;
        border: none;
        appearance: none;
        color: var(--m-input-style--input-color);
    }

    input,
    textarea {
        overflow: hidden;
        width: 100%;
        padding: 0;
        margin: 0;
        font-size: inherit;
        font-weight: $m-font-weight-light;
        line-height: inherit;
        vertical-align: middle;

        &::-ms-clear,
        &::-ms-reveal {
            display: none;
        }

        &:-webkit-autofill {
            background: rgba(255, 255, 255, 0);
            -webkit-box-shadow: 0 0 0 1000px $m-color-white inset !important;
        }
    }

    textarea {
        resize: none;
    }

    &__required-marker {
        color: $m-color-accent;
        font-size: inherit;
        font-weight: $m-font-weight-bold;
        vertical-align: baseline;
    }

    &__content {
        display: flex;
        flex: auto;
        max-width: 100%;
        position: relative;
    }

    &__suffix {
        display: inherit;
        align-items: center;
    }

    &__transparent-text {
        opacity: 0;
        width: 0;
        user-select: none;
    }

    &__spinner {
        margin-left: $m-space-xs;
    }

    &__validation {
        transition: margin-top $m-transition-duration ease;
    }

    // modifiers
    &:hover:not(.m--is-disabled):not(.m--is-waiting):not(.m--has-error):not(.m--is-valid):not(.m--is-focus) {
        --m-input-style--label-color: var(--m-input-style--hover-color);
        --m-input-style--border-color: var(--m-input-style--hover-color);
    }

    &.m--is-focus:not(.m--has-error):not(.m--is-valid) {
        --m-input-style--label-color: var(--m-input-style--focus-color);
        --m-input-style--border-color: var(--m-input-style--focus-color);
        --m-input-style--buttons-color: var(--m-input-style--focus-color);
    }

    &.m--is-focus:not(.m--is-disabled) {
        .m-input-style__main {
            box-shadow: 0 0 2px var(--m-input-style--border-color);
            outline: 1px solid var(--m-input-style--border-color);
        }
    }

    &.m--has-cursor-pointer {
        @include input-style-cursor(pointer);
    }

    &.m--has-label:not(.m--is-label-up) {
        .m-input-style__content {
            opacity: 0;
        }
    }

    &.m--is-label-up {
        --m-input-style--label-color: var(--m-input-style--label-up-color);
        --m-input-style--border-color: var(--m-input-style--label-up-border-color);

        .m-input-style__label {
            transform: translate3d(0, calc(-50% - 10px), 0) scale(0.8);
        }

        .m-input-style__text {
            left: - $m-space-2xs; // Magic number: align label with text zone
            padding-left: $m-space-2xs;
        }
    }

    &.m--has-error {
        --m-input-style--label-color: var(--m-input-style--error-color);
        --m-input-style--border-color: var(--m-input-style--error-color);
        --m-input-style--buttons-color: var(--m-input-style--error-color);
    }

    &.m--is-valid {
        --m-input-style--label-color: var(--m-input-style--valid-color);
        --m-input-style--border-color: var(--m-input-style--valid-color);
        --m-input-style--buttons-color: var(--m-input-style--valid-color);
    }

    &.m--is-disabled,
    &.m--is-waiting,
    &.m--is-readonly {
        --m-input-style--label-color: var(--m-input-style--disabled-color);
        --m-input-style--border-color: var(--m-input-style--disabled-color);
        --m-input-style--buttons-color: var(--m-input-style--disabled-color);
        --m-input-style--input-color: var(--m-input-style--disabled-color);

        .m-input-style__main {
            border-style: dashed;
        }
    }

    &.m--is-disabled {
        @include input-style-cursor() {
            user-select: none;
        }
    }

    &.m--is-waiting {
        @include input-style-cursor(wait);
    }

    &.m--is-readonly {
        @include input-style-cursor();
    }

    &.m--is-anim-ready {
        .m-input-style__label {
            transition-property: color, transform, top;
            transition-duration: $m-transition-duration-lg;
            transition-timing-function: ease;
        }

        .m-input-style__content {
            transition: opacity 0.3s ease;
        }
    }

    &.m--is-tag-h1,
    &.m--is-tag-h2,
    &.m--is-tag-h3,
    &.m--is-tag-h4,
    &.m--is-tag-h5,
    &.m--is-tag-h6 {

        input,
        textarea,
        ::placeholder,
        .m-input-style__label,
        .m-input-style__transparent-text {
            font-size: inherit;
            font-weight: $m-font-weight-semi-bold;
        }
    }

    &.m--is-tag-p {

        input,
        textarea,
        ::placeholder,
        .m-input-style__label,
        .m-input-style__transparent-text {
            font-weight: $m-font-weight-light;
        }
    }

    &.m--is-tag- {
        &h1 {
            @include m-font-size('h1');
        }

        &h2 {
            @include m-font-size('h2');
        }

        &h3 {
            @include m-font-size('h3');
        }

        &h4 {
            @include m-font-size('h4');
        }

        &h5 {
            @include m-font-size('h5');
        }

        &h6 {
            @include m-font-size('h6');
        }
    }

    &.m--has-validation-message {
        .m-input-style__validation {
            margin-top: $m-space-2xs;
        }
    }
}