//
// Copyright 2021 Google LLC
// SPDX-License-Identifier: Apache-2.0
//
// [Modified by Sandlada & Kai Orion]
//
// Copyright 2025 Sandlada & Kai Orion
// SPDX-License-Identifier: MIT
//

@mixin styles() {
    @layer styles {
        & .label {
            box-sizing: border-box;
            color: var(--_label-text-color);
            overflow: hidden;
            max-width: 100%;
            text-overflow: ellipsis;
            white-space: nowrap;
            z-index: 1;
            font-family: var(--_label-text-font);
            font-size: var(--_label-text-size);
            line-height: var(--_label-text-line-height);
            font-weight: var(--_label-text-weight);
            width: min-content;
        }

        & .label-wrapper {
            inset: 0;
            // The resting label at 100% height can block pointer events to the content
            // if it's very long and spans the full width of the field. Additionally,
            // selecting the label's text doesn't present a good UX, since the user
            // selection should be re-focused to another element (such as the input)
            // upon focusing. Finally, since the actual label elements are swapped, it
            // is not easy to maintain the user's label text selection.
            pointer-events: none;
            position: absolute;
        }

        & .label.resting {
            position: absolute;
            top: var(--_top-space);
        }

        & .label.floating {
            font-size: var(--_label-text-populated-size);
            line-height: var(--_label-text-populated-line-height);
            transform-origin: top left;
        }

        & .label.hidden {
            opacity: 0;
        }

        &.no-label .label {
            display: none;
        }

        // Labels need start/end padding when there isn't start/end content so they
        // don't sit on the edge of the field. We use a wrapper element around the
        // labels so as not to affect the dimensions used in the label keyframes.
        & .label-wrapper {
            inset: 0;
            position: absolute;
            // Don't let setting text-align on the field change the label's alignment.
            // It should only impact content text.
            text-align: initial;
        }

        &:hover .label {
            color: var(--_hover-label-text-color);
        }

        &.focused .label {
            color: var(--_focus-label-text-color);
        }

        &.disabled .label {
            color: var(--_disabled-label-text-color);
        }

        &.disabled .label:not(.hidden) {
            opacity: var(--_disabled-label-text-opacity);
        }

        &.error .label {
            color: var(--_error-label-text-color);
        }

        &.error:hover .label {
            color: var(--_error-hover-label-text-color);
        }

        &.error.focused .label {
            color: var(--_error-focus-label-text-color);
        }
    }

    @layer hcm {
        @media (forced-colors: active) {
            &.disabled .label:not(.hidden) {
                color: GrayText;
                opacity: 1;
            }
        }
    }
}