/* LABELS */
label.required:after {
    content: " *";
}

.floating-label-field {
    position: relative;
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-width: 0;
    flex: 1;
}

    .floating-label-field > label {
        position: absolute;
        top: 9px;
        left: var(--space-4);
        width: auto;
        transition: 0.2s;
        color: var(--grey-6);
        cursor: auto;
        pointer-events: none;
    }

    .floating-label-field > input::-webkit-input-placeholder { opacity: 0; }

    .floating-label-field > input:focus + label,
    .floating-label-field > input:not(:placeholder-shown) + label {
        margin-top: -16px;
        font-size: 12px;
        background: var(--white);
    }