/* Indux Buttons */

@layer components {

    :where(button:not(.link), [role=button], [type=button], [type=reset], [type=submit], select) {
        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(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);
        outline-color: var(--color-line, oklch(48.3% 0.006422 17.4 / 0.15));
        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, 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))
        }
    }

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

        &::picker-icon {
            content: "⌄";
            height: calc(var(--spacing-field-height, 2.25rem) * 0.5);
            transform: scaleY(0.7);
            font-size: 20px;
            line-height: 0.4
        }
    }
}