/* Indux Inputs */

@layer components {

    :where(input:not([type=range]), textarea, label:has([type=search], [type=file]), .label:has([type=search], [type=file])) {
        width: 100%;
        max-width: 100%;
        color: var(--color-field-inverse, oklch(16.6% 0.026 267));
        background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26));
        border-width: 0;
        border-style: solid;
        border-color: transparent;
        border-radius: var(--radius, 0.5rem);
        transition: var(--transition, all .05s ease-in-out);
        cursor: text;
        appearance: none;

        &:hover {
            background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
        }

        &:active {
            background-color: var(--color-field-surface-hover, oklch(89.24% 0.0024 12.48))
        }

        &:focus-visible {
            background-color: var(--color-field-surface, oklch(91.79% 0.0029 264.26))
        }

        &::placeholder {
            color: color-mix(in oklch, var(--color-field-inverse, oklch(16.6% 0.026 267)) 65%, transparent)
        }

        &::selection {
            background-color: color-mix(in oklch, var(--color-field-surface, oklch(91.79% 0.0029 264.26)) 80%, var(--color-field-inverse, oklch(16.6% 0.026 267)))
        }

        &[type=file] {
            max-width: 0;
            max-height: 0;
            opacity: 0;
            overflow: hidden;
            position: absolute;
            top: 0;
            left: 0;
            z-index: -1;
        }
    }

    /* Input-specific styles */
    :where(input:not([type=range])) {
        height: var(--spacing-field-height, 2.25rem);
        padding-left: var(--spacing-field-padding, 0.625rem);
        padding-right: var(--spacing-field-padding, 0.625rem)
    }

     /* Label wrapper for search and file inputs */
     :where(label, .label):has([type=search],[type=file]) {
        display: flex;
        flex-flow: row;
        align-items: center;
        padding-inline-start: 0;

        /* Input element overrides */
        & :where(input) {
            padding-inline-start: 0;
            padding-inline-end: 0;
            background: transparent;

            &:hover,
            &:focus-visible {
                background: transparent
            }

            &:focus-visible {
                box-shadow: 0 0 0 0 transparent
            }
        }

        /* Spacing for trailing siblings */
        &:has(input + *) {
            padding-inline-end: 0.375rem;
        }
    }

    /* Additional styles for label with file input */
    :where(label, .label):has([type=file]) {
        justify-content: center;
        gap: var(--spacing, 0.5rem);
        height: var(--spacing-field-height, 2.25rem);
        cursor: pointer
    }

    /* Additional styles for label with search input */
        :where(label, .label):has([type=search]) {
        justify-content: start;

         /* Search icon */
         & [x-icon] {
            display: flex;
            justify-content: center;
            align-items: center;
            width: var(--spacing-field-height, 2.25rem);
            height: 100%;
            margin-inline-end: 0;
            color: var(--color-content-subtle, oklch(67.4% 0.0318 251.27))
        }
    }

    /* Hide search input cancel button */
    :where(input[type=search])::-webkit-search-cancel-button {
        appearance: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none
    }

    /* Textarea-specific styles */
    :where(textarea) {
        display: block;
        height: auto;
        padding: var(--spacing-field-padding, 0.625rem) calc(var(--spacing-field-padding, 0.625rem) * 1.3)
    }
}