.btn {
  @include fontSize($font-size-base);

  border: 0;
  min-width: calc-rem(111px);
  min-height: calc-rem(42px);
  width: max-content;
  padding: calc-rem(8px 24px);
  font-weight: $font-weight-semibold;
  line-height: $base-line-height;

  &:after {
    @extend %pseudos;

    border: 1px solid transparent;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    border-radius: $border-radius-large;
  }

  &:hover {
    transition: filter $trans-duration-style;
  }

  // #Basic
  @include m(basic) {
    background-color: transparent;
    color: var(--color-gray-500);

    &:hover {
      background-color: transparent;
      color: color-mix(in srgb, var(--color-gray-500), black 30%);
    }

    @include m(outline) {
      background-color: transparent;
      border-color: var(--color-gray-500);
      color: var(--color-gray-500);

      &:after {
        border-color: var(--color-gray-500);
      }

      &:hover {
        background-color: var(--color-gray-50);
        color: color-mix(in srgb, var(--color-gray-500), black 30%);
      }
    }

    @include m(link) {
      @extend .btn--basic--outline;

      &:after {
        border-color: transparent;
      }

      &:hover {
        background-color: transparent;
      }
    }
  }

  // #Primary
  @include m(primary) {
    background-color: var(--color-brand-dark);
    color: var(--color-white);

    &:hover {
      background-color: rgba(var(--color-brand-dark-rgb), .88);
    }

    @include m(outline) {
      background-color: transparent;
      border-color: var(--color-brand-dark);
      color: var(--color-brand-dark);

      &:after {
        border-color: var(--color-brand-dark);
      }

      &:hover {
        background-color: var(--color-gray-50);
      }
    }

    @include m(link) {
      @extend .btn--primary--outline;

      &:after {
        border-color: transparent;
      }

      &:hover {
        background-color: var(--color-gray-50);
      }
    }
  }

  /* #Secondary */
  @include m(secondary) {
    background-color: var(--color-brand-light);
    color: var(--color-white);

    &:hover {
      background-color: rgba(var(--color-brand-light-rgb), .88);
    }

    @include m(outline) {
      background-color: transparent;
      border-color: var(--color-brand-light);
      color: var(--color-brand-light);

      &:after {
        border-color: var(--color-brand-light);
      }

      &:hover {
        background-color: var(--color-gray-50);
      }
    }

    @include m(link) {
      @extend .btn--secondary--outline;

      &:after {
        border-color: transparent;
      }
    }
  }

  /* #Warn */
  @include m(warn) {
    background-color: var(--color-error);
    color: var(--color-white);

    &:hover {
      background-color: rgba(var(--color-error-rgb), .88);
    }

    @include m(outline) {
      background-color: transparent;
      border-color: var(--color-error);
      color: var(--color-error);

      &:after {
        border-color: var(--color-error);
      }

      &:hover {
        background-color: var(--color-gray-50);
      }
    }

    @include m(link) {
      @extend .btn--warn--outline;

      &:after {
        border-color: transparent;
      }
    }
  }

  /* #Success */
  @include m(success) {
    background-color: var(--color-success--opacity);
    color: var(--color-success);

    &:hover {
      background-color: rgba(var(--color-success-rgb), .88);
    }

    @include m(outline) {
      background-color: transparent;
      border-color: var(--color-success);
      color: var(--color-success);

      &:after {
        border-color: var(--color-success);
      }

      &:hover {
        background-color: var(--color-gray-50);
      }
    }

    @include m(link) {
      @extend .btn--warn--outline;

      &:after {
        border-color: transparent;
      }
    }
  }

  /* #Group */
  @include e(group) {
    display: flex;
    width: 100%;
    align-items: center;
    column-gap: 1rem;

    @include media-q(small) {
      display: flex;
      flex-direction: column;
      gap: 1.2rem;
    }

    margin-top: 1.2rem;

    // Button group
    @include m(item) {
      @include media-q(small) {
        width: 100%;
        margin-right: 0;
      }

      min-width: calc-rem(100);

      &:last-of-type {
        margin-right: 0;
      }
    }
  }

  /* #Disabled */
  @include e(disabled) {
    background-color: var(--color-gray-300);
    color: var(--color-gray-400);
    cursor: not-allowed;
    pointer-events: none;
    user-select: none;

    @include m(outline) {
      @extend .btn__disabled;

      background-color: transparent;

      &:after {
        border-color: var(--color-gray-300);
      }
    }
  }

  /* prevent hover state from persisting when disabled */
  &:disabled:hover,
  &.loading:hover {
    background-color: var(--color-gray-300);
    color: var(--color-gray-400);
    box-shadow: none;
  }

  /* #Icon */
  @include e(with-icon) {
    @include m(wrapper) {
      display: flex;
      align-items: center;
      justify-content: center;

      i, .mat-icon {
        display: inline-block;
        margin-right: .6rem;
      }
    }
  }

  /* #Large */
  @include m(lg) {
    padding: calc-rem(16 24);
  }
}