@layer base {
    :where(button, .button):not(.undecorate) {
        height: 2em;
        /* min-height: fit-content; */
        /* min-width: min-content; */
    }

    input:not(:where([type="radio"], [type="checkbox"])) {
        display: block;
        /* font-size: var(--font-size-xx-small); */
        border-radius: var(--border-radius);
        border: var(--panel-border);
        padding-inline: 1ch;
        padding-block: .5em;
        background: var(--color-input-bg);
        box-shadow: var(--input-shadow);
        width: 100%;
    }
    input[type="checkbox"]:not(.undecorate) {
        appearance: none;
        cursor: pointer;
        width: 2em;
        height: 2em;
        border: var(--panel-border);
        border-width: 2px;
        border-radius: .5em;
        /* background: white; */

        &:hover {
            background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' fill='oklch(0.37 0.06 268.12)' viewBox='-32 0 512 512'><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/></svg>"), white;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }
        &:checked {
            background: url("data:image/svg+xml;utf-8,<svg xmlns='http://www.w3.org/2000/svg' fill='oklch(0.37 0.06 268.12)' viewBox='-32 0 512 512'><!--!Font Awesome Free 6.7.2 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/></svg>"), white;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }
    }

    textarea, .textarea {
        display: block;
        /* font-size: var(--font-size-xx-small); */
        border-radius: var(--border-radius);
        border: var(--panel-border);
        padding-inline: 1ch;
        padding-block: 1ch;
        background: var(--color-input-bg);
        box-shadow: var(--input-shadow);
        cursor: text;
        width: 100%;
        field-sizing: content;

    }
    .textarea\/big {
        min-height: 10em;
    }
    .textarea\/no-resize {
        min-height: 10em;
        resize: none;
    }

    button, .button {
        cursor: pointer;
        color: inherit;
        line-height: normal;

        &:not(.undecorate) {
            /* font-size: var(--font-size-xx-small); */
            font-weight: var(--font-weight-bolder);
            background: var(--color-button-bg);
            color: var(--color-button-fg);
            padding-inline: 2ch;
            border-radius: var(--border-radius);
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
            user-select: none;
            text-decoration: none;

            /* box-shadow: */
            /*     inset -3px -3px 4px oklch(from var(--color-button-bg) calc(l + 0.09) c h), */
            /*     inset 8px 8px 8px oklch(from var(--color-button-bg) calc(l - 0.02) c h); */

            &:hover {
                background: oklch(from var(--color-button-bg) calc(l + 0.07) c h);;;
                color: var(--color-button-fg-hover);
            }

            &.green {
                background: oklch(69.6% 0.17 162.48);
            }
        }
    }

    button.button-subtle, .button.button-subtle {
        background: var(--color-button-subtle-bg);
        background: var(--color-button-subtle-bg-hover);
        color: var(--color-fg);
    }

}

@layer components {
    .cool-button {
        width: max-content;
        margin-inline: auto;
        background: linear-gradient(120deg, #512fcd, #822fd5);
        /* border-bottom: 4px solid #955cce; */
        /* border-right: 4px solid #955cce; */
        font-size: var(--font-size-medium);
        --inset-shadow: inset -3px -3px 4px hsl(350deg 88.24% 86.67% / 40%),
                        inset 4px 4px 4px hsl(331deg 84.62% 48.43% / 10.2%);
        box-shadow: var(--inset-shadow);
        &:not(.cool-button\/less-cool) {
            box-shadow:
                0 62px 17px hsl(289deg 90.36% 48.82% / 0%),
                0 40px 16px hsl(289deg 90.36% 48.82% / 3.14%),
                0 22px 13px hsl(289deg 90.36% 48.82% / 9.02%),
                0 10px 10px hsl(289deg 90.36% 48.82% / 14.9%),
                0 2px 5px hsl(289deg 90.36% 48.82% / 16.86%),
                20px 20px 24px hsl(279deg 79.83% 76.67% / 40%),
                var(--inset-shadow);
        }

        &:hover {
            transform: scale(1.03, 1.03);
            filter: brightness(1.1);
        }
        transition: transform ease .1s;
    }

    x-select {
      display: inline-block;
      position: relative;
      font: inherit;
      color: var(--color-fg);
    }

    x-select [data-trigger] {
      box-sizing: border-box;
      cursor: pointer;
      padding-block: 0;
      height: 100%;
    }

    /* Base dropdown */
    x-select [data-list] {
      list-style: none;
      margin-top: var(--space-x-small);
      overflow: auto;
      z-index: 10;
      width: max-content;
    }

    /* Anchor positioning (modern browsers) */
    @supports (anchor-name: --a) {
      x-select [data-trigger] {
        anchor-name: --trigger;
      }

      x-select [data-list] {
        position: absolute;
        position-anchor: --trigger;
        top: anchor(bottom);
        left: anchor(left);
        min-width: anchor-size(width);
      }
    }

    /* Fallback */
    @supports not (anchor-name: --a) {
      x-select [data-list] {
        position: absolute;
        top: 100%;
        left: 0;
        min-width: 100%;
      }
    }

    x-select [data-value] {
        padding: .5ch;
        padding-inline: 1ch;
        border-radius: var(--border-radius);
        cursor: pointer;

        &:hover {
            background: oklch(95% 0 0);
        }
    }

    x-select [data-value]:hover {
      background: #eee;
    }
}