@layer components {
  .btn {
    --gap: 0.4375rem;
    --inline-size: 9.875rem;
    --min-inline-size: 2.5rem;
    --min-block-size: 2.5rem;
    --padding-block: 0.625rem;
    --padding-inline: 1.375rem;
    --background-color: transparent;
    --background-color-on-hover: transparent;
    --background-color-on-focus: var(--background-color-on-hover);
    --border-inline-size: 0.0625rem;
    --border-style: solid;
    --border-color: transparent;
    --border-color-on-hover: transparent;
    --border-color-on-focus: var(--border-color-on-hover);
    --border-radius: 0.5rem;
    --outline-inline-size: 0;
    --outline-style: solid;
    --outline-offset: 0;
    --outline-color: color-mix(in oklab, var(--background-color-on-focus), transparent 75%);
    --color: var(--clr-info-600);
    --color-on-hover: var(--color);
    --color-on-focus: var(--color-on-hover);
    --font-size: 0.875rem;
    --font-weight: 500;
    --line-height: 1.5;
    --transition-duration: 0.3s;
    --transition-timing-function: ease;
    --text-decoration: none;
    --text-transform: none;
    --opacity: 1;

    --icon-font-size: inherit;
    --icon-line-height: inherit;

    --spinner-size: calc(var(--min-block-size) / 2.625);
    --spinner-border-color: var(--clr-neutral-700);
    --spinner-speed: 0.6s;

    position: relative;
    display: inline-flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    gap: var(--gap);
    inline-size: min(100%, var(--inline-size));
    min-inline-size: var(--min-inline-size);
    min-block-size: var(--min-block-size);
    padding: var(--padding-block) var(--padding-inline);
    background-color: var(--background-color);
    border: var(--border-inline-size)  var(--border-color) var(--border-style);
    border-radius: var(--border-radius);
    outline: var(--outline-inline-size) var(--outline-style) var(--outline-color);
    outline-offset: var(--outline-offset);
    color: var(--color);
    font-size: var(--font-size);
    font-variation-settings: 'wght' var(--font-weight);
    line-height: var(--line-height);
    letter-spacing: 0.01rem;
    text-decoration: none;
    text-align: center;
    text-transform: var(--text-transform);
    white-space: nowrap;
    opacity: var(--opacity);

    &,
    & > * {
      transition: all var(--transition-duration) var(--transition-timing-function);
    }

    & > i {
      font-size: var(--icon-font-size);
      line-height: var(--icon-line-height);
      transition: none;
    }

    &:hover {
      background-color: var(--background-color-on-hover);
      border-color: var(--border-color-on-hover);
      color: var(--color-on-hover);
    }

    &:is(:focus, :focus-within) {
      background-color: var(--background-color-on-focus);
      border-color: var(--border-color-on-focus);
      color: var(--color-on-focus);
    }

    &:is(:focus, :focus-within, :hover) {
      --outline-inline-size: 0.25rem;

      text-decoration: none;
    }

    /* Appearance */

    &.-brand {
      --background-color: var(--clr-brand-200);
      --background-color-on-hover: var(--clr-brand-300);
      --border-color: var(--clr-brand-200);
      --border-color-on-hover: var(--clr-brand-300);
      --color: var(--clr-accent-900);

      --spinner-border-color: var(--clr-brand-700);
    }

    &.-accent-300 {
      --background-color: var(--clr-brand-200);
      --background-color-on-hover: var(--clr-brand-300);
      --border-color: var(--clr-brand-200);
      --border-color-on-hover: var(--clr-brand-300);
      --color: var(--clr-brand-800);
      --color-on-hover: var(--clr-brand-900);

      --spinner-border-color: var(--clr-brand-400);

      &.inverse {
        --background-color-on-hover: var(--clr-brand-100);
        --border-color-on-hover: var(--clr-brand-100);
      }
    }

    &.-accent-700 {
      --background-color: var(--clr-brand-700);
      --background-color-on-hover: var(--clr-brand-800);
      --border-color: var(--clr-brand-700);
      --border-color-on-hover: var(--clr-brand-800);
      --color: var(--clr-brand-100);
      --color-on-hover: var(--clr-brand-200);

      --spinner-border-color: var(--clr-brand-400);
    }

    &.-accent-800 {
      --background-color: var(--clr-brand-800);
      --background-color-on-hover: var(--clr-brand-900);
      --border-color: var(--clr-brand-800);
      --border-color-on-hover: var(--clr-brand-900);
      --color: var(--clr-brand-100);
      --color-on-hover: var(--clr-brand-200);

      --spinner-border-color: var(--clr-accent-200);
    }

    &.-accent-900 {
      --background-color: var(--clr-brand-900);
      --background-color-on-hover: var(--clr-brand-950);
      --border-color: var(--clr-brand-900);
      --border-color-on-hover: var(--clr-brand-950);
      --color: var(--clr-brand-100);
      --color-on-hover: var(--clr-brand-200);

      --spinner-border-color: var(--clr-brand-400);
    }

    &.-neutral {
      --background-color: var(--clr-neutral-50);
      --background-color-on-hover: var(--clr-neutral-200);
      --border-color: var(--clr-neutral-50);
      --border-color-on-hover: var(--clr-neutral-200);
      --color: var(--clr-neutral-600);

      --spinner-border-color: var(--clr-neutral-700);
    }

    &.-neutral-100 {
      --background-color: var(--clr-neutral-100);
      --background-color-on-hover: var(--clr-neutral-200);
      --border-color: var(--clr-neutral-100);
      --border-color-on-hover: var(--clr-neutral-200);
      --color: var(--clr-brand-700);

      --spinner-border-color: var(--clr-brand-800);
    }

    &.-neutral-300 {
      --background-color: var(--clr-neutral-300);
      --background-color-on-hover: var(--clr-neutral-400);
      --border-color: var(--clr-neutral-300);
      --border-color-on-hover: var(--clr-neutral-400);
      --color: var(--clr-neutral-700);

      --spinner-border-color: var(--clr-neutral-700);
    }

    &.-success {
      --background-color: var(--clr-success-200);
      --background-color-on-hover: var(--clr-success-700);
      --border-color: var(--clr-success-200);
      --border-color-on-hover: var(--clr-success-700);
      --color: var(--clr-success-700);
      --color-on-hover: var(--clr-success-50);

      --spinner-border-color: var(--clr-success-50);
    }

    &.-success-outline {
      --background-color: color-mix(in oklab, var(--clr-success-500), transparent 90%);
      --background-color-on-hover: color-mix(in oklab, var(--clr-success-500), transparent 85%);
      --border-color: color-mix(in oklab, var(--clr-success-500), transparent 60%);
      --border-color-on-hover: color-mix(in oklab, var(--clr-success-500), transparent 50%);
      --color: var(--clr-success-400);
      --color-on-hover: var(--clr-success-400);

      --spinner-border-color: var(--clr-success-500);
    }

    &.-danger {
      --background-color: var(--clr-danger-100);
      --background-color-on-hover: var(--clr-danger-200);
      --border-color: var(--clr-danger-100);
      --border-color-on-hover: var(--clr-danger-200);
      --color: var(--clr-danger-600);
      --color-on-hover: var(--clr-danger-700);
      --spinner-border-color: var(--clr-danger-800);
    }

    &.-warning {
      --background-color: var(--clr-warning-100);
      --background-color-on-hover: var(--clr-warning-200);
      --border-color: var(--clr-warning-100);
      --border-color-on-hover: var(--clr-warning-200);
      --color: var(--clr-warning-700);
      --color-on-hover: var(--clr-warning-900);

      --spinner-border-color: var(--clr-warning-900);
    }

    &.-warning-outline {
      --background-color: color-mix(in oklab, var(--clr-warning-500), transparent 90%);
      --background-color-on-hover: color-mix(in oklab, var(--clr-warning-500), transparent 85%);
      --border-color: color-mix(in oklab, var(--clr-warning-500), transparent 60%);
      --border-color-on-hover: color-mix(in oklab, var(--clr-warning-500), transparent 50%);
      --color: var(--clr-warning-500);
      --color-on-hover: var(--clr-warning-500);

      --spinner-border-color: var(--clr-warning-600);
    }

    &.-info {
      --background-color: var(--clr-info-100);
      --background-color-on-hover: var(--clr-info-200);
      --border-color: var(--clr-info-100);
      --border-color-on-hover: var(--clr-info-200);
      --color: var(--clr-info-500);
      --color-on-hover: var(--clr-info-600);

      --spinner-border-color: var(--clr-info-800);
    }

    &.-large {
      --gap: 1rem;
      --inline-size: 15rem;
      --min-inline-size: 15rem;
      --min-block-size: 3.625rem;
      --padding-block: 0.875rem;
      --padding-inline: 1rem;
      --border-radius: 0.625rem;
      --icon-font-size: 110%;
    }

    &.-small {
      --inline-size: 6.5rem;
      --min-inline-size: 6.5rem;
      --min-block-size: 2.5rem;
      --padding-block: 0.375rem;
      --padding-inline: 0.875rem;
      --border-radius: 0.4375rem;
      --font-size: 0.875rem;
      --line-height: 1.375;
      --icon-font-size: 120%;

      & > i {
        line-height: 0.78 !important;
      }
    }

    &.-extra-small {
      --inline-size: 5.5rem;
      --min-inline-size: 5.5rem;
      --min-block-size: 2.25rem;
      --padding-block: 0.25rem;
      --padding-inline: 0.875rem;
      --border-radius: 0.375rem;
      --font-size: 0.8125rem;
      --line-height: 1.5;
      --icon-font-size: 115%;

      & > i {
        line-height: 0.78 !important;
      }
    }

    &.-min-content {
      inline-size: min-content;
    }

    &.-fluid {
      inline-size: 100%;
    }

    &.-max-content {
      min-inline-size: max-content;
      inline-size: max-content;
    }

    &.-uniform {
      inline-size: auto;
      min-inline-size: auto;
      /*padding: 0;*/
      aspect-ratio: 1 / 1;
    }

    &.-outline {
      --color: var(--border-color);
      --background-color: transparent;
    }

    &.-large-icon > i {
      font-size: 1.5rem;
      line-height: 0.5 !important;

      ::before {
        line-height: 0.5 !important;
      }
    }

    /* Behavior */

    &:disabled,
    .-disabled {
      --opacity: 0.62;

      pointer-events: none;
    }

    &.-loading {
      color: transparent !important;
      pointer-events: none;

      & > * {
        opacity: 0;
      }

      &::after {
        content: "";
        position: absolute;
        top: calc(50% - (var(--spinner-size) / 2));
        left: calc(50% - (var(--spinner-size) / 2));
        z-index: 1;
        inline-size: var(--spinner-size);
        block-size: var(--spinner-size);
        border: 0.125rem solid transparent;
        border-left-color: var(--spinner-border-color);
        border-top-color: var(--spinner-border-color);
        border-radius: 50%;
        animation: spin var(--spinner-speed) infinite linear;
      }
    }
  }
}