input--rounded.scss

.input-group--rounded {
    height: 50px;
    position: relative;

    input {
        margin: 0;	
        z-index: 0;
        height: 50px;
        display: flex;
        padding: 0 1rem;
        border-radius: 10px;
        border: 1px solid palette(gray, light3);
        
        &.ng-valid,
        &.ng-empty,
        &.ng-not-empty { border: 1px solid palette(gray, light3); }

        &:focus,
        &:active { border: 1px solid #757678; }
    }

    label {
        opacity: 1;
        z-index: 1;
        width: auto;
        font-size: 14px;
        overflow: hidden;
        margin-right: 15px;
        padding-left: 10px;
        pointer-events: none;
        line-break: anywhere;
        display: inline-block;
        height: calc(100% - 30px);
        color: palette(gray, light1);
        transform: translateY(-37px) translateX(15px);
        transition: opacity .3s ease, transform .3s ease, padding .2s 300ms ease;
    }

    input.ng-empty + label,
    input.ng-valid + label {
        font-size: 14px;
        transform: translateY(-37px) translateX(15px);
    }

    input:focus + label,
    input:active + label,
    input.ng-invalid + label,
    input.ng-not-empty + label {
        font-size: 12px;
        padding: 0 10px;
        background-color: white;
        transform: translateY(-60px) translateX(10px);
    }

    i { top: 15px; right: 10px; }
}