/* Floating label — GcInput labelVariant=float
 * Лейбл внутри поля → sm 40; md/lg = control md (48).
 * Пусто: лейбл по центру. Focus/value: лейбл внутри сверху, без выреза на бордере. */

.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-float-label-top: var(--space-1-5);
    --gc-input-float-value-pad-top: calc(var(--space-4) + var(--space-1));
    --gc-input-float-value-pad-bottom: var(--space-2);
}

.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-float-label-top: var(--space-1);
    --gc-input-float-value-pad-top: var(--space-4);
    --gc-input-float-value-pad-bottom: var(--space-1);
}

.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));
    --gc-input-float-label-top: var(--space-1-5);
    --gc-input-float-value-pad-top: calc(var(--space-4) + var(--space-1));
    --gc-input-float-value-pad-bottom: var(--space-2);
}

/* md/lg float: жёстко 48 — даже если кто-то ужмёт --gc-input-min-height под btn */
.gc-input-field--float > .gc-input:not(textarea),
.gc-input-field--float > .gc-input-prefix-wrapper > .gc-input {
    height: var(--gc-input-min-height-lg, var(--space-12));
    min-height: var(--gc-input-min-height-lg, var(--space-12));
}

.gc-input-field--float.gc-input-field--sm > .gc-input:not(textarea),
.gc-input-field--float.gc-input-field--sm > .gc-input-prefix-wrapper > .gc-input {
    height: var(--space-product-40);
    min-height: var(--space-product-40);
}

.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);
    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: var(--gc-input-float-label-top);
    transform: none;
    font-size: var(--font-size-12);
    line-height: 1;
    font-weight: 400;
    background: transparent;
}

.gc-input-field--float.is-floated > .gc-input,
.gc-input-field--float.is-floated > .gc-input-prefix-wrapper > .gc-input,
.gc-input-field--float:focus-within > .gc-input,
.gc-input-field--float:focus-within > .gc-input-prefix-wrapper > .gc-input,
.gc-input-field--float:has(.gc-input:not(:placeholder-shown)) > .gc-input,
.gc-input-field--float:has(.gc-input:not(:placeholder-shown)) > .gc-input-prefix-wrapper > .gc-input {
    padding-top: var(--gc-input-float-value-pad-top);
    padding-bottom: var(--gc-input-float-value-pad-bottom);
    line-height: 1.2;
}

/* Prefix (`/@`): лейбл в покое справа от префикса; внутри сверху — к левому паддингу */
.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: var(--gc-input-float-pad-x);
}

/* Prefix на ряду со значением, не по центру 48px (иначе наезд на лейбл) */
.gc-input-field--float.is-floated > .gc-input-prefix-wrapper > .input-group-prefix,
.gc-input-field--float:focus-within > .gc-input-prefix-wrapper > .input-group-prefix,
.gc-input-field--float:has(.gc-input:not(:placeholder-shown)) > .gc-input-prefix-wrapper > .input-group-prefix {
    top: auto;
    bottom: var(--gc-input-float-value-pad-bottom);
    transform: none;
    line-height: 1.2;
    font-size: var(--gc-input-float-label-size);
}

.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));
}

/* Date/time: нативная иконка на ряду со значением, не по центру 48px-поля */
.gc-input-field--float.is-floated input[type="date"].gc-input,
.gc-input-field--float.is-floated input[type="time"].gc-input,
.gc-input-field--float.is-floated input[type="datetime-local"].gc-input,
.gc-input-field--float:focus-within input[type="date"].gc-input,
.gc-input-field--float:focus-within input[type="time"].gc-input,
.gc-input-field--float:focus-within input[type="datetime-local"].gc-input {
    position: relative;
    padding-inline-end: var(--gc-input-icon-inset);
}

.gc-input-field--float.is-floated input[type="date"].gc-input::-webkit-calendar-picker-indicator,
.gc-input-field--float.is-floated input[type="time"].gc-input::-webkit-calendar-picker-indicator,
.gc-input-field--float.is-floated input[type="datetime-local"].gc-input::-webkit-calendar-picker-indicator,
.gc-input-field--float:focus-within input[type="date"].gc-input::-webkit-calendar-picker-indicator,
.gc-input-field--float:focus-within input[type="time"].gc-input::-webkit-calendar-picker-indicator,
.gc-input-field--float:focus-within input[type="datetime-local"].gc-input::-webkit-calendar-picker-indicator {
    position: absolute;
    right: var(--space-3);
    top: auto;
    bottom: var(--gc-input-float-value-pad-bottom);
    width: var(--font-size-16);
    height: var(--font-size-16);
    margin: 0;
    padding: 0;
    cursor: pointer;
}

/* Textarea: лейбл всегда внутри, у верхнего padding — не на бордере */
.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: var(--space-1);
    transform: none;
}

.gc-input-field--float.gc-input-field--textarea.is-floated > .gc-input,
.gc-input-field--float.gc-input-field--textarea:focus-within > .gc-input,
.gc-input-field--float.gc-input-field--textarea:has(.gc-input:not(:placeholder-shown)) > .gc-input {
    padding-top: var(--space-6);
    padding-bottom: var(--space-2);
}