@import url(../font.css);

.login-container__form--field-container {
    position: relative;
    margin: 1vw 0;
    padding: 1vw 0 0;
    width: 30vw;
}

.login-container__form--field-container--input {
    width: 100%;
    border: none;
    border-bottom: .2vw solid rgba(255, 255, 255, .5);
    outline: 0;
    font-family: 'Iceberg';
    font-size: 1.6vw;
    color: rgb(255, 255, 255);
    padding: .4vw 0;
    background: transparent;
    transition: border-color .2s;
}

.login-container__form--field-container--input::placeholder {
    font-family: 'Iceberg';
    color: transparent;
    user-select: none;
}

.login-container__form--field-container--input:placeholder-shown~.login-container__form--field-container--label {
    font-size: 1.6vw;
    cursor: text;
    top: 1.35vw;
    user-select: none;
}

.login-container__form--field-container--label {
    position: absolute;
    top: 0;
    display: block;
    color: rgba(255, 255, 255, .5);
    font-family: 'Iceberg';
    font-size: 1vw;
    transition: .2s;
    user-select: none;
    pointer-events: none;
}

.login-container__form--field-container--input:focus {
    padding-bottom: .25vw;
    border-width: .28vw;
    border-image: linear-gradient(to right, rgb(0, 119, 255), rgb(62, 140, 229));
    border-image-slice: 1;
}

.login-container__form--field-container--input:focus~.login-container__form--field-container--label {
    position: absolute;
    top: 0;
    display: block;
    transition: .2s;
    font-size: 1vw;
    color: rgb(62, 140, 229);
    font-weight: 700;
    user-select: none;
}

.login-container__form--field-container--input:required,
.login-container__form--field-container--input:invalid {
    box-shadow: none;
}