.#{$prefix}textfield {
    .#{$prefix}input-wrap-el {
        flex: 1 1 auto;
        display: flex;
        overflow: hidden;
    }

    .#{$prefix}underline-el {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;

        &:before,
        &:after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 100%;
        }
    }

    &.#{$prefix}animate-underline {
        .#{$prefix}underline-el:before {
            transform: scaleX(0);
        }

        &.#{$prefix}focused .#{$prefix}underline-el:before {
            transform: scaleX(1);
        }
    }

    .#{$prefix}input-el {
        background-color: transparent;
        color: inherit;
        outline: none;
        border: 0;
        margin: 0;
        // Overrides the browsers default size for the input element, allowing it to
        // be shrunk by the owning layout.  The default size of the field body is
        // determined by $textfield-body-width
        width: 0;
        flex: 1 1 auto;

        // IE11 does not respect line-height on input elements. To workaround the issue
        // we use content-box model and set min-height in addition to line-height
        box-sizing: content-box;

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

    &.#{$prefix}text-align-left .#{$prefix}input-el {
         text-align: left;
    }

    &.#{$prefix}text-align-center .#{$prefix}input-el {
        text-align: center;
    }

    &.#{$prefix}text-align-right .#{$prefix}input-el {
        text-align: right;
    }

    .#{$prefix}before-input-el,
    .#{$prefix}after-input-el {
        display: flex;
    }

    // The default flex value in IE is not enforcing container to take width from children
    // Need to explicitly set flex value to none
    .#{$prefix}ie11 & {
        .#{$prefix}before-input-el, .#{$prefix}after-input-el {
            flex: none;
        }
    }

    .#{$prefix}chrome &, .#{$prefix}chromemobile & {
        .#{$prefix}input-el {
            &:-webkit-autofill {
                animation-name: onAutoFillStart;
            }
        }
    }

    &.#{$prefix}label-align-placeholder .#{$prefix}label-el {
        position: relative;
        z-index: 2;
        pointer-events: none;
    }

    &.#{$prefix}label-align-placeholder .#{$prefix}input-el {
        &::-webkit-input-placeholder {
            opacity: 1;
            transition: opacity .4s;
        }

        &::-moz-placeholder {
            opacity: 1;
            transition: opacity .4s;
        }

        &:-ms-input-placeholder {
            opacity: 1;
            transition: opacity .4s;
        }
    }

    &.#{$prefix}label-align-placeholder.#{$prefix}label-inside .#{$prefix}input-el {
        &::-webkit-input-placeholder {
            opacity: 0;
        }

        &::-moz-placeholder {
            opacity: 0;
        }

        &:-ms-input-placeholder {
            opacity: 0;
        }
    }
}

@keyframes onAutoFillStart {
    from {/**/}
    to {/**/}
}