:root {
    --form-input-padding-x: .75rem;
    --form-input-padding-y: .75rem;
    --form-placeholder-color: var(--dark-background-subtext-font-color);
    --form-autofill-color: #ffffff;
}

.form-label-group {
    position: relative;
    margin-bottom: 1rem;
}
  
.form-label-group > input,
.form-label-group > textarea,
.form-label-group > label {
    padding: var(--form-input-padding-y) var(--form-input-padding-x);
    height: auto;
    transition: all .1s ease-in-out;
}

/* Shows the label when previewing autofill */
.form-label-group > input:is(:-webkit-autofill, :autofill) ~ label {
    z-index: 0;
}

/* Changes the autofill background color */
.form-label-group > input:is(:-webkit-autofill, :autofill) {
    -webkit-box-shadow: 0 0 0 30px var(--form-autofill-color) inset;  
    box-shadow: 0 0 0 30px var(--form-autofill-color) inset;  
}

.form-label-group > label {
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    margin-bottom: 0;
    line-height: 1.5;
    color: var(--form-placeholder-color);
}
  
.form-label-group input:not(:placeholder-shown),
.form-label-group textarea:not(:placeholder-shown) {
    padding-top: calc(var(--form-input-padding-y) + var(--form-input-padding-y) * (2 / 3));
    padding-bottom: calc(var(--form-input-padding-y) / 3);
}
  
.form-label-group input:not(:placeholder-shown) ~ label,
.form-label-group textarea:not(:placeholder-shown) ~ label {
    padding-top: calc(var(--form-input-padding-y) / 3);
    padding-bottom: calc(var(--form-input-padding-y) / 3);
    font-size: 12px;
    color: var(--form-placeholder-color);
    z-index: 0;
}