/**
 * Material-style floating labels. Applied by assets/js/floating-labels.js to fields
 * inside any `.has-floating-labels` container.
 *
 * Size per form by overriding on the container, e.g. `.my-form { --fl-font-size: 0.875em; }`.
 */

/* registered so `em` resolves against the container, not each nested element */
@property --fl-font-size {
    syntax: "<length>";
    inherits: true;
    initial-value: 16px;
}

/* :where() keeps specificity at 0 so any form-level override wins */
:where(.has-floating-labels) {
    --fl-font-size: 1em;
    --fl-line-height: calc(var(--fl-font-size) * 1.25);
    --fl-pad-x: calc(var(--fl-font-size) * 0.75);
    --fl-pad-top: calc(var(--fl-font-size) * 1.4);
    --fl-pad-bottom: calc(var(--fl-font-size) * 0.4);
    --fl-border-width: 1px;
    --fl-label-scale: 0.75;
    --fl-label-color: var(--wp--preset--color--main);
    --fl-label-active-color: var(--wp--preset--color--primary);
}

.has-floating-labels [data-fl-field] {
    /* control's distance from the field top, set by JS */
    --fl-offset: 0px;
    position: relative;
}

.has-floating-labels [data-fl-collapse] {
    display: contents;
}

/* !important: third-party form CSS (Virtuous, etc.) is often more specific and loads later */
.has-floating-labels [data-fl-field]:not([data-fl-field="react-select"]) [data-fl-control] {
    box-sizing: border-box;
    font-size: var(--fl-font-size) !important;
    line-height: var(--fl-line-height) !important;
    padding: var(--fl-pad-top) var(--fl-pad-x) var(--fl-pad-bottom) !important;
    height: auto !important;
}

.has-floating-labels [data-fl-field] [data-fl-label] {
    position: absolute;
    z-index: 1;
    left: calc(var(--fl-pad-x) + var(--fl-border-width));
    /* vertically centered within the control's content box */
    top: calc(var(--fl-offset) + var(--fl-border-width) + (var(--fl-pad-top) + var(--fl-pad-bottom)) / 2);
    max-width: calc(100% - var(--fl-pad-x) * 2);
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    font-size: var(--fl-font-size) !important;
    font-weight: 400 !important;
    line-height: var(--fl-line-height) !important;
    color: var(--fl-label-color);
    text-overflow: ellipsis;
    white-space: nowrap;
    pointer-events: none;
    transform-origin: left top;
    transition:
        top 150ms ease,
        transform 150ms ease,
        color 150ms ease;
}

.has-floating-labels [data-fl-field="textarea"] [data-fl-label] {
    top: calc(var(--fl-offset) + var(--fl-border-width) + var(--fl-pad-top));
}

/* react-select: pad its box to match text inputs */
.has-floating-labels [data-fl-field="react-select"] .Select-control {
    height: auto !important;
    font-size: var(--fl-font-size) !important;
}

.has-floating-labels [data-fl-field="react-select"] .Select-input {
    height: auto !important;
    padding: var(--fl-pad-top) var(--fl-pad-x) var(--fl-pad-bottom) !important;
    line-height: var(--fl-line-height) !important;
}

.has-floating-labels [data-fl-field="react-select"] .Select-input > input {
    height: var(--fl-line-height) !important;
    padding: 0 !important;
    line-height: var(--fl-line-height) !important;
}

.has-floating-labels [data-fl-field="react-select"] .Select-placeholder,
.has-floating-labels [data-fl-field="react-select"] .Select-value {
    padding-top: var(--fl-pad-top) !important;
    padding-bottom: var(--fl-pad-bottom) !important;
    padding-left: var(--fl-pad-x) !important;
    line-height: var(--fl-line-height) !important;
}

/* placeholder hint only appears once the label has floated out of the way */
.has-floating-labels [data-fl-field="react-select"]:not(:focus-within) .Select-placeholder {
    visibility: hidden;
}

/* floated state: focused, filled, or has a static value/placeholder */
.has-floating-labels [data-fl-field]:focus-within [data-fl-label],
.has-floating-labels
    [data-fl-field]:not([data-fl-field="react-select"]):has([data-fl-control]:not(:placeholder-shown))
    [data-fl-label],
.has-floating-labels [data-fl-field="react-select"]:has(.Select.has-value) [data-fl-label],
.has-floating-labels [data-fl-field][data-fl-static] [data-fl-label] {
    top: calc(var(--fl-offset) + var(--fl-border-width) + var(--fl-pad-bottom));
    transform: scale(var(--fl-label-scale));
    max-width: calc((100% - var(--fl-pad-x) * 2) / var(--fl-label-scale));
}

/* kept separate: an unsupported pseudo-class would invalidate the whole rule above */
.has-floating-labels [data-fl-field]:has(:-webkit-autofill) [data-fl-label] {
    top: calc(var(--fl-offset) + var(--fl-border-width) + var(--fl-pad-bottom));
    transform: scale(var(--fl-label-scale));
}

.has-floating-labels [data-fl-field]:focus-within [data-fl-label] {
    color: var(--fl-label-active-color) !important;
}

@media (prefers-reduced-motion: reduce) {
    .has-floating-labels [data-fl-field] [data-fl-label] {
        transition: none;
    }
}