@layer components {
  .button {
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    gap: var(--button-gap, var(--length-2));
    color: var(--button-color, var(--color-primary-0));
    width: var(--button-width, fit-content);
    font-size: var(--font-size-md);
    border-radius: var(--button-border-radius, var(--border-radius-2));
    background-color: var(--button-background, var(--color-primary-7));
    padding: var(--button-padding, var(--length-2) var(--length-4));
    box-shadow: var(--button-box-shadow, var(--shadow-3));
    cursor: pointer;
    transition: 100ms ease-out;
    transition-property:
      background-color, border, box-shadow, color, filter, opacity, scale;

    @media (any-hover: hover) {
      &:hover {
        scale: 0.98;
        background: var(--button-hover, var(--color-primary-5));
      }
    }

    &:active {
      scale: 0.9;
    }

    /* Variants
  /* ------------------------------------------------------------------------ */

    &.button--plain {
      --button-background: transparent;
      --button-hover: none;
      --button-color: none;
      --button-icon-size: 100%;
      --button-padding: 0;
      --button-box-shadow: none;
      --button-gap: 0;
    }

    &.button--plain-rounded {
      --button-border-radius: var(--border-radius-3);
      --button-background: transparent;
      --button-hover: none;
      --button-color: none;
      --button-icon-size: 100%;
      --button-padding: 0;
      --button-box-shadow: none;
      --button-gap: 0;
    }

    &.button--link {
      --button-border-radius: none;
      --button-background: transparent;
      --button-hover: none;
      --button-color: var(--color-secondary-5);
      --button-icon-size: 100%;
      --button-padding: 0;
      --button-box-shadow: none;

      &:hover {
        --button-color: var(--color-secondary-4);
      }

      text-decoration: underline;
    }

    &.button--inline {
      /* inline-block to remove trailing whitespace when using e.g. links */
      display: inline-block;

      /* so it doesn't mis-align with the rest of the paragraph */
      vertical-align: bottom;
    }

    &.button--success {
      --button-background: var(--color-green-6);
      --button-hover: var(--color-green-4);
    }

    &.button--error {
      --button-background: var(--color-red-6);
      --button-hover: var(--color-red-4);
    }

    &.button--error-link {
      --button-color: var(--color-red-6);

      &:hover {
        --button-color: var(--color-red-4);
      }
    }

    &.button--full-width {
      --button-width: 100%;
    }

    &.button--light {
      --button-color: var(--color-primary-7);
      --button-background: var(--color-primary-1);
      --button-hover: var(--color-primary-2);
      --button-box-shadow: var(--shadow-2);
    }
  }

  .button__icon {
    width: var(--icon-size, var(--length-8));
    height: var(--icon-size, var(--length-8));

    &.button__icon--small {
      width: var(--icon-size, var(--length-6));
      height: var(--icon-size, var(--length-6));
    }
  }
}