/* Manifest Buttons */

@layer base, components, utilities;

@layer components {

    :where(button:not(.link), [role=button], [type=button], [type=reset], [type=submit], select):not(code, .unstyle) {
        display: inline-flex;
        flex-flow: row;
        justify-content: center;
        align-items: center;
        gap: 0.375rem;
        width: fit-content;
        min-width: var(--spacing-field-height, 2.25rem);
        max-width: 100%;
        height: var(--spacing-field-height, 2.25rem);
        margin: 0;
        padding: 0 var(--spacing-field-padding, 0.625rem);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        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);
        outline-color: var(--color-line, color-mix(in oklch, oklch(20.5% 0 0) 10%, transparent));
        cursor: pointer;
        transition: var(--transition, all .05s ease-in-out);
        appearance: button;

        & span,
        & [x-icon] {
            color: inherit
        }

        & span {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }

        /* Remove padding around a solo icon */
        &:has(>svg:only-child) {
            padding: 0;
            font-size: 1rem
        }

        /* Center icons */
        & svg {
            margin-left: auto;
            margin-right: auto
        }

        &: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))
        }
    }

    /* Selects */
    :where(select):not(.unstyle) {
        appearance: base-select;

        &::picker-icon {
            content: "";
            width: 1rem;
            height: 1rem;
            background-color: currentColor;
            mask-repeat: no-repeat;
            mask-size: 100% 100%;
            mask-image: var(--icon-chevron-down, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E"))
        }
    }

    /* Without base-select the reset's `appearance: button` leaves the select
       natively rendered, and WebKit then ignores the author's border-radius and
       imposes its own — so selects stop matching every other field. `appearance:
       none` hands styling back; it also drops the native arrow, and ::picker-icon
       only paints under base-select, so redraw the chevron as a background. It
       can't be masked to currentColor there (an SVG loaded as an image can't see
       it), hence the baked mid-grey, legible on the field surface in both modes. */
    @supports not (appearance: base-select) {
        :where(select):not(.unstyle) {
            appearance: none;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23808080' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right var(--spacing-field-padding, 0.625rem) center;
            background-size: 1rem;
            padding-inline-end: calc(var(--spacing-field-padding, 0.625rem) * 2 + 1rem)
        }
    }
}