:root {
    --app-floating-label-color: var(--primary, #0f7a6c);
    --app-floating-icon-color: var(--app-floating-label-color);
    --app-floating-border-color: #cbd8e1;
    --app-floating-text-color: #244359;
    --app-floating-focus-ring: color-mix(in srgb, var(--app-floating-label-color) 16%, transparent);
}

.app-floating-field {
    position: relative;
}

.app-floating-field > input,
.app-floating-field > textarea,
.app-floating-field > select {
    width: 100%;
    border: 1px solid var(--app-floating-border-color);
    border-radius: var(--input-radius, 10px);
    outline: 0;
    background: #fff;
    color: var(--app-floating-text-color);
    font-family: var(--font-body, inherit);
    font-size: 13px;
    font-weight: 700;
    transition: border-color .15s ease, box-shadow .15s ease;
}

.app-floating-field > input,
.app-floating-field > select {
    height: 57px;
    padding: 21px 13px 6px;
}

.app-floating-field > select {
    padding-right: 38px;
}

.app-floating-field > textarea {
    padding: 23px 13px 8px;
    resize: vertical;
}

.app-floating-field > label {
    position: absolute;
    top: 50%;
    left: 13px;
    margin: 0;
    color: var(--app-floating-label-color);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
    transition: top .15s ease, color .15s ease, font-size .15s ease, letter-spacing .15s ease, transform .15s ease;
}

.app-floating-field > input:focus,
.app-floating-field > textarea:focus,
.app-floating-field > select:focus {
    border-color: var(--app-floating-label-color);
    box-shadow: 0 0 0 3px var(--app-floating-focus-ring);
}

.app-floating-field.is-filled > label,
.app-floating-field--always-float > label,
.app-floating-field:not(.app-floating-field--select):focus-within > label {
    top: 9px;
    color: var(--app-floating-label-color);
    font-size: 9px;
    letter-spacing: .06em;
    text-transform: uppercase;
    transform: none;
}

.app-floating-field--textarea > label {
    top: 18px;
}

.app-floating-field--textarea.is-filled > label,
.app-floating-field--textarea:focus-within > label {
    top: 9px;
}

.app-floating-field--icon > .app-floating-field__icon {
    position: absolute;
    top: 50%;
    left: 13px;
    z-index: 1;
    display: flex;
    width: 18px;
    height: 18px;
    align-items: center;
    justify-content: center;
    color: var(--app-floating-icon-color);
    pointer-events: none;
    transform: translateY(-50%);
}

.app-floating-field--icon > .app-floating-field__icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.app-floating-field--icon > input,
.app-floating-field--icon > textarea,
.app-floating-field--icon > select {
    padding-left: 42px;
}

.app-floating-field--icon > label {
    left: 42px;
}

.app-floating-field--textarea > .app-floating-field__icon {
    top: 17px;
    transform: none;
}