/* Floating label — GcInput labelVariant=float
 * Высота = .gc-input / size (sm|md|lg). Floated: лейбл на верхней границе.
 * Notch (фон лейбла на бордере) наследует --gc-input-float-notch-bg с панели/модалки;
 * на холсте страницы — --gc-app-content-bg / --surface-page, не --gc-input-bg. */

.gc-input-field {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    overflow: visible;
}

.gc-input-field--float {
    --gc-input-float-pad-x: var(--gc-input-padding-x, var(--space-4));
    --gc-input-float-label-size: var(--gc-input-font-size, var(--font-size-14));
}

.gc-input-field--float.gc-input-field--sm {
    --gc-input-float-pad-x: var(--gc-input-padding-x-sm, var(--space-2));
    --gc-input-float-label-size: var(--gc-input-font-size-sm, var(--font-size-13));
}

.gc-input-field--float.gc-input-field--lg {
    --gc-input-float-pad-x: var(--gc-input-padding-x-lg, var(--space-4));
    --gc-input-float-label-size: var(--gc-input-font-size-lg, var(--font-size-15));
}

/* Не трогаем height/padding .gc-input — паритет с UI Kit + .gc-input-sm/lg */

.gc-input-field--float > .gc-input-float-label {
    position: absolute;
    left: var(--gc-input-float-pad-x);
    right: auto;
    top: 50%;
    z-index: 2;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    max-width: calc(100% - (2 * var(--gc-input-float-pad-x)));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--gc-input-float-label-size);
    font-weight: 500;
    line-height: 1.2;
    color: var(--text-secondary);
    transform: translateY(-50%);
    transform-origin: left center;
    transition:
        top var(--transition-base) var(--ease-out),
        transform var(--transition-base) var(--ease-out),
        font-size var(--transition-base) var(--ease-out),
        color var(--transition-fast) var(--ease-out),
        padding var(--transition-base) var(--ease-out),
        background-color var(--transition-fast) var(--ease-out);
    pointer-events: none;
}

.gc-input-field--float.is-floated > .gc-input-float-label,
.gc-input-field--float:focus-within > .gc-input-float-label,
.gc-input-field--float:has(.gc-input:not(:placeholder-shown)) > .gc-input-float-label {
    top: 0;
    transform: translateY(-50%);
    font-size: var(--font-size-12);
    padding-inline: var(--space-1);
    left: calc(var(--gc-input-float-pad-x) - var(--space-1));
    /* Вырез на бордере = холст ПОД полем (page / panel / modal), не заливка инпута.
     * Предки задают --gc-input-float-notch-bg; иначе --gc-app-content-bg / Surface/Page. */
    background-color: var(--gc-input-float-notch-bg, var(--gc-app-content-bg, var(--surface-page)));
}

/* Prefix (`/@`): лейбл в покое справа от префикса, на бордере — как у обычного float */
.gc-input-field--float.gc-input-field--has-prefix > .gc-input-float-label {
    left: var(--gc-input-icon-inset);
}

.gc-input-field--float.gc-input-field--has-prefix.is-floated > .gc-input-float-label,
.gc-input-field--float.gc-input-field--has-prefix:focus-within > .gc-input-float-label,
.gc-input-field--float.gc-input-field--has-prefix:has(.gc-input:not(:placeholder-shown)) > .gc-input-float-label {
    left: calc(var(--gc-input-float-pad-x) - var(--space-1));
}

.gc-input-field--float.is-focused > .gc-input-float-label,
.gc-input-field--float:focus-within > .gc-input-float-label {
    color: var(--accent-link);
}

.gc-input-field--float.is-invalid > .gc-input-float-label {
    color: var(--danger-color);
}

.gc-input-field--float.is-disabled > .gc-input-float-label {
    color: var(--text-tertiary);
}

.gc-input-field--float .gc-input::placeholder {
    color: transparent;
}

.gc-input-field--float.is-floated .gc-input::placeholder,
.gc-input-field--float:focus-within .gc-input::placeholder {
    color: var(--gc-input-placeholder, var(--text-tertiary));
}

/* Textarea: лейбл у верхнего padding, не по центру высоты поля (GcTextarea) */
.gc-input-field--float.gc-input-field--textarea > .gc-input-float-label {
    top: var(--space-2);
    transform: none;
}

.gc-input-field--float.gc-input-field--textarea.is-floated > .gc-input-float-label,
.gc-input-field--float.gc-input-field--textarea:focus-within > .gc-input-float-label,
.gc-input-field--float.gc-input-field--textarea:has(.gc-input:not(:placeholder-shown)) > .gc-input-float-label {
    top: 0;
    transform: translateY(-50%);
}