/* Manifest Inputs */

@layer base, components, utilities;

:root {

    /* Copy button icons */
    --icon-field-copy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/g%3E%3C/svg%3E");
    --icon-field-copied: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2'%3E%3Cpath d='m12 15 2 2 4-4'/%3E%3Crect width='14' height='14' x='8' y='8' rx='2' ry='2'/%3E%3Cpath d='M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2'/%3E%3C/g%3E%3C/svg%3E")
}

@layer components {

    :where(input:not([type=range], [type=color]), textarea, .textarea, label:has([type=search], [type=file], > button[command="--copy"]), .label:has([type=search], [type=file], > button[command="--copy"])):not(.unstyle) {
        width: 100%;
        max-width: 100%;
        color: var(--color-field-inverse, oklch(43.9% 0 0));
        background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
        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, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
        }

        &:active {
            background-color: var(--color-field-surface-hover, color-mix(in oklch, oklch(20.5% 0 0) 15%, transparent))
        }

        &:focus-visible {
            background-color: var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent))
        }

        &::placeholder {
            color: color-mix(in oklch, var(--color-field-inverse, oklch(43.9% 0 0)) 65%, transparent)
        }

        &::selection {
            background-color: color-mix(in oklch, var(--color-field-surface, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent)) 80%, var(--color-field-inverse, oklch(43.9% 0 0)))
        }

        &[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]):not(.unstyle)) {
        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]):not(.unstyle) {
        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
        }

        /* No spacing for file input + icon */
        &:has(input[type=file] + [x-icon]) {
            padding-inline-end: 0
        }
    }

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

    /* Additional styles for label with search input */
    :where(label, .label):has([type=search]):not(.unstyle) {
        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(55.6% 0 0))
        }
    }

    /* Copied confirmation icon (tooltip content) */
    :where(.field-copied-icon) {
        display: inline-block;
        vertical-align: middle;
        width: 1em;
        height: 1em;
        background-color: currentColor;
        mask-image: var(--icon-field-copied);
        mask-size: 1em;
        mask-repeat: no-repeat;
        mask-position: center;

        /* Fill the line box so the mask centers optically */
        @supports (height: 1lh) {
            height: 1lh;
            vertical-align: top
        }
    }

    /* Copy button icon */
    :where(button[command="--copy"]):not(.unstyle) {

        &::after {
            content: '';
            display: block;
            width: 0.8125rem;
            height: 0.8125rem;
            background-color: var(--color-content-neutral, oklch(43.9% 0 0));
            mask-image: var(--icon-field-copy);
            mask-size: contain;
            mask-repeat: no-repeat;
            mask-position: center
        }

        &:hover::after,
        &:active::after,
        &:focus-visible::after {
            background-color: var(--color-field-inverse, oklch(43.9% 0 0))
        }

        &.copied::after {
            mask-image: var(--icon-field-copied)
        }
    }

    /* Label wrapper for inputs with a copy button */
    :where(label, .label):has(> button[command="--copy"]):not(.unstyle) {
        display: flex;
        flex-flow: row;
        align-items: center;
        justify-content: start;
        padding-inline-end: 0.375rem;

        /* Input element overrides */
        & :where(input) {
            background: transparent;

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

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

        /* Copy button, compact and hidden until reveal */
        & :where(button[command="--copy"]) {
            flex-shrink: 0;
            min-width: 0;
            width: calc(var(--spacing-field-height, 2.25rem) - 0.75rem);
            height: calc(var(--spacing-field-height, 2.25rem) - 0.75rem);
            padding: 0;
            background-color: transparent;
            opacity: 0;

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

        /* Reveal on hover, focus, or after copying */
        &:hover :where(button[command="--copy"]),
        &:focus-within :where(button[command="--copy"]),
        & :where(button[command="--copy"].copied) {
            opacity: 1
        }
    }

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

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