@import "../variables/variables";
@import "../mixins/private/token-mixins";

.floating-label {
    position: relative;
}

span.floating-label {
    display: inline-block;
}

div.floating-label {
    display: block;
}

label.floating-label__label {
    @include color-token(floating-label-color, color-foreground-secondary);

    background-color: transparent;
    display: inline-block;
    left: 16px;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    text-overflow: ellipsis;
    top: 0;
    transform: scale(0.75, 0.75) translate(0, 2px);
    transform-origin: left;
    white-space: nowrap;
    width: calc(100% - 40px);
    z-index: 1;
}

.floating-label--opaque label.floating-label__label {
    @include background-color-token(
        floating-label-background-color,
        color-background-secondary
    );

    padding-top: 3px;
    top: -3px;
    width: calc(100% - 40px);
}

label.floating-label__label--focus {
    @include color-token(floating-label-focus-color, color-foreground-primary);
}

.floating-label--opaque label.floating-label__label--focus {
    @include background-color-token(
        floating-label-focus-background-color,
        color-background-primary
    );
}

.floating-label--large label.floating-label__label {
    transform: scale(0.75, 0.75) translate(0, 3px);
}

label.floating-label__label--inline {
    font-size: var(--font-size-default);
    transform: translate(0, 12px);
}

.floating-label--large label.floating-label__label--inline {
    transform: translate(0, 16px);
}

label.floating-label__label--animate {
    transition:
        transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1),
        bottom 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

label.floating-label__label--disabled {
    @include color-token(
        floating-label-disabled-color,
        color-foreground-disabled
    );
}

.floating-label--opaque label.floating-label__label--disabled {
    @include background-color-token(
        floating-label-disabled-background-color,
        color-background-secondary
    );
}

label.floating-label__label--invalid {
    @include color-token(
        floating-label-invalid-color,
        color-foreground-attention
    );
}

.floating-label .textbox__control,
.floating-label .combobox__control > input {
    /* Move input near the bottom */
    padding-bottom: 2px;
    padding-top: 18px;
}

.floating-label--large .textbox__control,
.floating-label--large .combobox__control > input {
    /* Move input near the bottom */
    padding-bottom: 5px;
    padding-top: 23px;
}

/* We are setting line-height to important because WCAG specs allow setting 1.5 times the line height */
/* If we do not set it to important, the line height will be overridden causing text-overlap */
/* See https://github.com/eBay/skin/issues/2253 */
.floating-label .select select {
    line-height: 52px !important;
}

.floating-label .select--large select {
    line-height: 60px !important;
}

/* RTL */
[dir="rtl"] {
    label.floating-label__label {
        left: initial;
        right: 16px;
        transform-origin: right;
    }
}

/* Autofill */

label.floating-label__label.floating-label__label--inline:has(
        + .textbox > :autofill
    ) {
    transform: scale(0.75, 0.75) translate(0, 2px);
}

.floating-label--large
    label.floating-label__label.floating-label__label--inline:has(
        + .textbox > :autofill
    ) {
    transform: scale(0.75, 0.75) translate(0, 3px);
}
