@import "variables";

vn-textfield {
    margin: 20px 0!important;
    display: inline-block;

    & > .container {
        width: 100%;
        position: relative;
        padding-bottom: 2px;
        display: flex;

        & > .textField {
            width: 100%;
            display: flex;
            align-items: center;
            position: relative;
            padding-top: 4px;
        }
    }

    .leftIcons, .rightIcons, .suffix {
        display: flex;
        color: $color-font-secondary;

        .material-icons {
            font-size: 20px !important
        }
    }

    t-left-icons {
        padding-right: 0.5em
    }

    t-right-icons {
        padding-left: 0.5em
    }

    .infix {
        position: relative;
        display: block;
        flex: auto;
        width: 100%;
        min-width: 0;
    }
    i.clear {
        visibility: hidden;
        cursor: pointer;

        &:hover {
            color: #222;
        }
    }
    &:hover i.clear {
        visibility: visible;
    }
    i.visible {
        visibility: visible;
    }
    label {
        position: absolute;
        bottom: 0;
        left: 0;
        padding: 4px 0!important;
        pointer-events: none;
        color: $color-font-secondary;
        transition-duration: .2s;
        transition-timing-function: cubic-bezier(.4,0,.2,1);
    }
    &.not-empty label{
        bottom: 24px;
        color: $color-main;
        padding: 0;
        font-size: 12px;
    }
    input {
        outline: none;
        border: none;
        font-family: "Helvetica", "Arial", sans-serif;
        display: block;
        font-size: 16px;
        width: 100%;
        background: 0 0;
        color: inherit;
        padding: 4px;
        box-sizing: border-box;
        border-bottom: 0!important;

        &[type=number] {
            -moz-appearance: textfield;
            &::-webkit-outer-spin-button,
            &::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }
        }
        &:invalid {
            box-shadow: none;
        }
    }
    .underline {
        position: absolute;
        bottom: 0;
        height: 1px;
        content: ' ';
        pointer-events: none;
        width: 100%;
        background-color: $color-input-underline;
    }
    .selected.underline {
        background-color: $color-main;
        height: 2px;
        left: 50%;
        width: 0px !important;
        transition-duration: 0.2s;
        transition-timing-function: cubic-bezier(.4,0,.2,1);
    }

    div.selected {
        &.container{
            border-bottom: 0px;
        }
        label {
            bottom: 24px;
            color: $color-main;
            font-size: 12px;
        }
        .selected.underline{
            left: 0;
            width: 100%!important;
        }
    }
    & > div.container > div.textField > div.infix.invalid {
        @extend div.selected;

        & > span.mdl-textfield__error {
            visibility: visible;
        }
        & > label {
            color: #d50000;
        }
    }
    .infix.invalid + .underline {
        background-color: #d50000;
    }
}