.button {
  $block: #{&};

  @include remove-button-styles;
  @include remove-link-styles;
  @include flex(row, nowrap, $whitespace-4, center, center);

  block-size: 4rem;
  padding: $whitespace-4 $whitespace-6;
  font-size: $font-size-3;
  color: $color-neutral-10;
  text-transform: uppercase;
  background-color: $color-neutral-1;
  border: 0.1rem solid $color-neutral-10;

  @media (prefers-reduced-motion: no-preference) {
    transition: all 0.15s;
  }

  &:hover {
    @media (hover: hover) {
      color: $color-neutral-1;
      background-color: $color-neutral-10;
    }
  }

  &--type {
    &--icon {
      justify-content: center;
      inline-size: 4rem;
      padding: $whitespace-3;
    }
  }

  &--variant {
    &--primary {
      color: $color-neutral-1;
      background-color: $color-neutral-10;

      &:hover {
        @media (hover: hover) {
          opacity: 0.8;
        }
      }
    }

    &--plain {
      padding-inline: 0;

      /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- pass */
      color: unset;
      /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- pass */
      background-color: unset;
      border: 0;
      opacity: unset;

      &:hover {
        @media (hover: hover) {
          /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- pass */
          color: unset;
          /* stylelint-disable-next-line scale-unlimited/declaration-strict-value -- pass */
          background-color: unset;
          opacity: unset;
        }
      }
    }
  }

  &--size {
    &--small {
      &#{$block}--type--icon {
        inline-size: 1.5rem;
      }

      &#{$block}--variant--plain {
        font-size: $font-size-3;
        text-transform: none;
      }
    }

    &--medium {
      block-size: 5rem;
      padding: $whitespace-4 $whitespace-5;
      font-size: $font-size-2;
      letter-spacing: -0.05rem;
    }

    &--large {
      block-size: 5rem;
      letter-spacing: -0.05rem;
    }
  }

  &--style {
    &--danger {
      font-weight: $font-weight-semi-bold;
      color: $color-status-error;
    }
  }

  &--fill {
    inline-size: 100%;
  }

  &__icon {
    block-size: 100%;
    color: currentColor;
  }
}