@layer components {
  /* There are several button types: weak, strong, action, super, success and failure. For the sake of simplicity, "weak" is the default. */
  /* For each button type (except "action" and "super"), there are two size variations: base and sm. base is the default. */
  /* For each button type and each size, there are different states. Each state is implemented with pseudo classes. */
  /* Buttons may have icons on their left, right, be icon only or have no icon at all. These icons are placed both in the DOM via markup and with classes. */
  .button {
    /* Basics */
    @apply rounded-[20px] border font-medium inline-grid min-h-40 min-w-40 text-left relative overflow-hidden w-auto items-center gap-[7px] justify-start max-w-fit;
    @apply text-base px-[0.75em] pt-[0.55em] pb-[0.45em];
    @apply hyphens-auto;
    @apply focus-visible:outline focus-visible:outline-blue-900 focus-visible:outline-[3px] grid-flow-col;

    /* Color Variables */
    --button-text: theme(colors.blue-900);
    --button-bg: theme(colors.gray-20);
    --button-border: theme(colors.blue-900);

    color: var(--button-text);
    background: var(--button-bg);
    border-color: var(--button-border);

    &.is-strong {
      --button-bg: theme(colors.blue-900);
      --button-text: white;
      /* Strong buttons never have a border, so we can force it to be the same as the background. */
      --button-border: var(--button-bg) !important;

      &:focus-visible,
      &:active,
      .group\/button:focus-visible &,
      .group\/button:active &,
      &.is-focus,
      &.is-active {
        --button-bg: theme(colors.purple-600);
        --button-text: white;
      }

      @apply contrast-more:font-bold contrast-more:border-3;
    }

    &:disabled,
    &.is-disabled {
      @apply pointer-events-none;
      --button-text: theme(colors.gray-800);
      --button-bg: theme(colors.gray-300);
      --button-border: theme(colors.gray-300);
    }

    &:hover,
    &.is-hover,
    .group\/button:hover & {
      --button-text: white;
      --button-bg: theme(colors.blue-600);
      --button-border: theme(colors.blue-900);
    }

    &:focus-visible,
    &:active,
    .group\/button:focus-visible &,
    .group\/button:active &,
    &.is-focus,
    &.is-active {
      --button-text: theme(colors.purple-900);
      --button-bg: theme(colors.purple-200);
      --button-border: theme(colors.purple-900);
    }

    svg {
      @apply shrink-0; /* So any flexbox shenanigans don't resize the icon. */
      @apply w-20 h-20;
    }

    &.is-sm {
      @apply text-sm min-w-30 min-h-30 leading-none px-10 rounded-[15px] gap-5;

      svg {
        @apply w-[16px] h-[16px] -my-5;
      }

      &.is-icon-only {
        @apply !w-30 !h-30;
      }
    }

    &.is-icon-only {
      @apply w-40 h-40 p-0 items-center justify-center;
    }
  }

  .button.is-success {
    --button-text: theme(colors.green-600);
    --button-bg: white;
    --button-border: theme(colors.green-600);
  }

  .button.is-failure {
    --button-text: theme(colors.red-700);
    --button-bg: white;
    --button-border: theme(colors.red-700);
  }

  .button.is-inverted {
    --button-text: theme(colors.blue-900);
    --button-bg: white;
    --button-border: theme(colors.blue-900);

    &:hover,
    &.is-hover,
    .group\/button:hover & {
      --button-text: white;
      --button-bg: theme(colors.blue-500);
      --button-border: theme(colors.blue-900);
    }

    &:focus-visible,
    &:active,
    .group\/button:focus-visible &,
    .group\/button:active &,
    &.is-focus,
    &.is-active {
      --button-text: white;
      --button-bg: theme(colors.purple-600);
      --button-border: theme(colors.purple-600);
    }
  }

  .button.is-feedback {
    --button-text: theme(colors.green-700);
    --button-bg: theme(colors.green-100);
    --button-border: theme(colors.green-700);

    &:before {
      @apply content-check;
    }
  }

  .button.is-loading {
    color: transparent;
    &:before {
      @apply absolute text-center left-0 w-full h-full flex items-center justify-center text-[1.5em] content-empty;
      background-color: var(--button-text);
      /* Use the loading spinner as a mask. */
      mask: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgdmlld0JveD0iMCAwIDI0IDI0Ij48c3R5bGU+QGtleWZyYW1lcyBzcGlubmVyX3hlN1F7MTAwJXtyOjNweH05My43NSV7cjozcHh9NDYuODc1JXtyOi4ycHh9fS5zcGlubmVyX2IyVDd7YW5pbWF0aW9uOnNwaW5uZXJfeGU3USAuOHMgbGluZWFyIGluZmluaXRlfTwvc3R5bGU+PGNpcmNsZSBjeD0iNCIgY3k9IjEyIiByPSIzIiBmaWxsPSJjdXJyZW50Q29sb3IiIGNsYXNzPSJzcGlubmVyX2IyVDciLz48Y2lyY2xlIGN4PSIxMiIgY3k9IjEyIiByPSIzIiBmaWxsPSJjdXJyZW50Q29sb3IiIGNsYXNzPSJzcGlubmVyX2IyVDciIHN0eWxlPSJhbmltYXRpb24tZGVsYXk6LS42NXMiLz48Y2lyY2xlIGN4PSIyMCIgY3k9IjEyIiByPSIzIiBmaWxsPSJjdXJyZW50Q29sb3IiIGNsYXNzPSJzcGlubmVyX2IyVDciIHN0eWxlPSJhbmltYXRpb24tZGVsYXk6LS41cyIvPjwvc3ZnPg==') no-repeat 50% 50%;
    }
  }

  .button.is-dropdown {
    &:after {
      @apply translate-y-[-0.175em] text-[1.25em] leading-[0.5em] content-caret-south;
    }

    &.is-active {
      &:after {
        @apply translate-y-[0.2em] content-caret-north;
      }
    }
  }

  /* Icon modifiers. */

  .button.is-prev:before {
    @apply font-bold !order-first !content-arrow-west;
  }

  .button.is-prev:hover:before,
  .group\/button:hover .button.is-prev:before {
    @apply !animate-jump-x-reverse;
  }

  .button.is-next:before {
    @apply font-bold !order-last !content-arrow-east;
  }

  .button.is-next:hover:before,
  .group\/button:hover .button.is-next:before {
    @apply !animate-jump-x;
  }

  .button.is-close {
    &:before {
      @apply font-bold !order-first !content-cross;
    }

    &:hover:before {
      @apply animate-rotate animation-rotation-90 animation-duration-150;
    }
  }

  .button.is-add {
    &:before {
      @apply !order-first text-[1.3em] !content-plus;
    }

    &:hover:before {
      @apply animate-rotate animation-rotation-90 animation-duration-150;
    }
  }

  .button.is-reload {
    &:before {
      @apply !order-first leading-none !content-reload;
      transform-origin: 50% 47%;
    }

    &:hover:before {
      @apply animate-rotate;
    }
  }

  .button.is-check {
    &:before {
      @apply font-bold !order-first !content-check;
    }

    &:hover:before {
      @apply animate-jump-scale;
    }
  }

  .button.is-action {
    @apply font-bold text-sm;
    svg {
      @apply text-base;
    }
  }
}