@ebay/skin/dist/floating-label/floating-label.css

Skin - CSS modules that represent the brand eBay

.floating-label {
    position: relative;
}

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

div.floating-label {
    display: block;
}

label.floating-label__label {
    background-color: initial;
    color: var(--floating-label-color, var(--color-foreground-secondary));
    display: inline-block;
    left: 16px;
    overflow: hidden;
    pointer-events: none;
    position: absolute;
    text-overflow: ellipsis;
    top: 0;
    transform: scale(0.75) translateY(2px);
    transform-origin: left;
    white-space: nowrap;
    width: calc(100% - 40px);
    z-index: 1;
}

.floating-label--opaque label.floating-label__label {
    background-color: var(
        --floating-label-background-color,
        var(--color-background-secondary)
    );
    padding-top: 3px;
    top: -3px;
    width: calc(100% - 40px);
}

label.floating-label__label--focus {
    color: var(--floating-label-focus-color, var(--color-foreground-primary));
}

.floating-label--opaque label.floating-label__label--focus {
    background-color: var(
        --floating-label-focus-background-color,
        var(--color-background-primary)
    );
}

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

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

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

label.floating-label__label--animate {
    transition:
        transform 0.3s ease,
        bottom 0.3s ease;
}

label.floating-label__label--disabled {
    color: var(
        --floating-label-disabled-color,
        var(--color-foreground-disabled)
    );
}

.floating-label--opaque label.floating-label__label--disabled {
    background-color: var(
        --floating-label-disabled-background-color,
        var(--color-background-secondary)
    );
}

label.floating-label__label--invalid {
    color: var(
        --floating-label-invalid-color,
        var(--color-foreground-attention)
    );
}

.floating-label .combobox__control > input,
.floating-label .textbox__control {
    padding-bottom: 2px;
    padding-top: 18px;
}

.floating-label--large .combobox__control > input,
.floating-label--large .textbox__control {
    padding-bottom: 5px;
    padding-top: 23px;
}
.floating-label .select select {
    line-height: 52px !important;
}

.floating-label .select--large select {
    line-height: 60px !important;
}
[dir="rtl"] label.floating-label__label {
    left: auto;
    right: 16px;
    transform-origin: right;
}
label.floating-label__label.floating-label__label--inline:has(
        + .textbox > :-webkit-autofill
    ) {
    transform: scale(0.75) translateY(2px);
}
label.floating-label__label.floating-label__label--inline:has(
        + .textbox > :autofill
    ) {
    transform: scale(0.75) translateY(2px);
}

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

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