@layer components.root {
  :where(.button) {
    --_bg-color: transparent;
    --_border-color: transparent;
    --_border-radius: var(--button-border-radius);
    --_font-size: initial;
    --_min-height: 2.375rem;
    --_text-color: var(--primary);

    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    align-items: center;
    background: var(--_bg-color) var(--ripple, none);
    border-radius: var(--_border-radius);
    border: var(--border-size-1) solid var(--_border-color);
    color: var(--_text-color);
    display: inline-flex;
    font-size: var(--_font-size);
    font-weight: 700;
    gap: var(--size-2);
    justify-content: center;
    min-block-size: var(--_min-height);
    padding-block: 0.5ex;
    padding-inline: 1.5ex;
    text-align: center;
    text-decoration: none;

    user-select: none;

    &:where([disabled]) {
      cursor: not-allowed;
      opacity: 0.64;
    }

    @media (prefers-reduced-motion: no-preference) {
      transition: background-color 0.2s var(--ease-out-3),
        box-shadow 0.2s var(--ease-out-3), border-color 0.2s var(--ease-out-3),
        color 0.2s var(--ease-out-3), outline-offset 0.05s var(--ease-1);

      /* Ripple effect */
      background-position: center;

      &:where(:not([disabled])) {
        &:where(:not(:active):hover) {
          --ripple: radial-gradient(circle, transparent 1%, var(--_bg-color) 1%)
            center/15000%;

          transition: background var(--button-ripple-duration);
        }

        &:where(:hover:active) {
          background-size: var(--button-ripple-size);
          transition: background 0s;
        }
      }
    }

    /* Element states */
    &:where(:not([disabled])) {
      &:where(:not(:active):hover) {
        --_bg-color: light-dark(
          oklch(from var(--primary) l 0.01 h / 20%),
          oklch(from var(--primary) l 0.01 h / 40%)
        );
      }

      &:where(:hover:active) {
        --_bg-color: light-dark(
          oklch(from var(--primary) l 0.06 h / 30%),
          oklch(from var(--primary) l 0.06 h / 40%)
        );
      }
    }

    /* Disabled */
    &:where([disabled]) {
      --_text-color: color-mix(
        in oklch,
        var(--text-color-2) 50%,
        var(--surface-default)
      );
    }

    /* Icon */
    &:where(:has(svg), &.icon-only) {
      gap: 1ex;

      svg {
        max-block-size: 0.7lh;
        color: currentColor;
      }
    }

    /* Sizes */
    &.small {
      --_min-height: 1.875rem;
      padding-block: 0;
      padding-inline: 1ex;
    }

    &.large {
      --_min-height: 2.875rem;
      padding-inline: 4ex;
    }

    /* Variants */
    &.outlined {
      --_bg-color: var(--surface-default);
      --_border-color: var(--color-8);
      --_text-color: var(--color-8);

      &:where(:not([disabled])) {
        &:where(:not(:active):hover) {
          --_bg-color: var(--color-10);
          --_border-color: var(--color-10);
          --_text-color: var(--color-1);
        }

        &:where(:active) {
          --_bg-color: var(--color-9);
          --_border-color: var(--color-9);
          --_text-color: var(--color-1);
        }
      }

      &:where([disabled]) {
        --_bg-color: var(--surface-default);
        --_border-color: color-mix(
          in oklch,
          var(--text-color-2) 20%,
          var(--surface-default)
        );
        --_text-color: color-mix(
          in oklch,
          var(--text-color-2) 40%,
          var(--surface-default)
        );
      }
    }
    &.tonal {
      --_bg-color: var(--color-6);
      --_text-color: var(--color-16);

      &:where(:not([disabled])) {
        &:where(:not(:active):hover) {
          --_bg-color: var(--color-9);
          --_border-color: var(--color-9);
        }

        &:where(:active) {
          --_bg-color: var(--color-7);
          --_border-color: var(--color-7);
        }
      }

      &:where([disabled]) {
        --_bg-color: color-mix(
          in oklch,
          var(--text-color-2) 8%,
          var(--surface-default)
        );
        --_text-color: color-mix(
          in oklch,
          var(--text-color-2) 70%,
          var(--surface-default)
        );
      }
    }
    &.filled {
      --_bg-color: var(--color-8);
      --_text-color: var(--color-1);

      &:where(:not([disabled])) {
        &:where(:not(:active):hover) {
          --_bg-color: var(--color-10);
          --_border-color: var(--color-10);
        }

        &:where(:active) {
          --_bg-color: var(--color-9);
          --_border-color: var(--color-9);
        }
      }

      &:where([disabled]) {
        --_bg-color: color-mix(
          in oklch,
          var(--text-color-2) 20%,
          var(--surface-default)
        );
        --_text-color: color-mix(
          in oklch,
          var(--text-color-2) 70%,
          var(--surface-default)
        );
      }
    }
    &.elevated {
      --_bg-color: light-dark(
        color-mix(in oklch, var(--gray-2) 97%, var(--color-16)),
        color-mix(in oklch, var(--gray-13) 97%, var(--color-1))
      );
      --_ripple-color: light-dark(
        color-mix(in oklch, var(--gray-2) 80%, var(--color-8)),
        color-mix(in oklch, var(--gray-13) 80%, var(--color-8))
      );
      --_text-color: var(--color-8);

      box-shadow: 0px 3px 1px -2px oklch(0 0 0 / 20%),
        0px 2px 2px 0px oklch(0 0 0 / 14%), 0px 1px 5px 0px oklch(0 0 0 / 12%);

      &:where(:not([disabled])) {
        &:where(:not(:active):hover) {
          --ripple: radial-gradient(
              circle,
              transparent 1%,
              var(--_ripple-color) 1%
            )
            center/15000%;

          --_bg-color: light-dark(
            color-mix(in oklch, var(--gray-2) 93%, var(--color-8)),
            color-mix(in oklch, var(--gray-13) 93%, var(--color-8))
          );
        }

        &:where(:hover:active) {
          --_bg-color: light-dark(
            color-mix(in oklch, var(--gray-2) 91%, var(--color-8)),
            color-mix(in oklch, var(--gray-13) 91%, var(--color-8))
          );
        }
      }

      &:where([disabled]) {
        --_bg-color: color-mix(
          in oklch,
          var(--text-color-2) 8%,
          var(--surface-elevated)
        );
        --_text-color: color-mix(
          in oklch,
          var(--text-color-2) 70%,
          var(--surface-elevated)
        );
      }
    }
  }

  /* file input */
  :where(input[type="file"]) {
    align-self: flex-start;
    border-radius: var(--radius-2);
    border: var(--border-size-1) solid var(--surface-filled);
    box-shadow: var(--inner-shadow-4);
    color: var(--text-color-2-contrast);
    cursor: initial;
    max-inline-size: 100%;
    padding: 0;
  }

  :where(input[type="file"])::-webkit-file-upload-button,
  :where(input[type="file"])::file-selector-button {
    cursor: pointer;
    margin-inline-end: var(--size-relative-6);
  }
}