@import '../../styles/abstracts/index';

//
// Buttons
//
// Check buttono's documentation for more configs
// https://github.com/hsnaydd/buttono#documentation
//

.c-button {
  @import '../../../node_modules/buttono/buttono';

  $buttono-padding: px-to-rem(8px) px-to-rem(24px);
  $buttono-opacity-disabled: null;
  $buttono-border-radius: px-to-rem(4px);
  $buttono-font-size: $g-font-size-medium;
  $buttono-line-height: 26 / 18;
  $buttono-transition-duration: $g-transition-duration;
  $buttono-color: color-palette('primary', 50);
  $buttono-color-alt: color-palette('primary', 800);
  $buttono-outline-offset-focus: px-to-rem(2px);
  $buttono-outline-color-focus: color-palette('primary', 50);

  @include buttono-block($display: inline-flex);

  min-height: px-to-rem(56px);
  align-items: center;
  justify-content: center;
  font-weight: 600;

  &:focus:not([data-focus-visible-added]) {
    outline: none;
  }

  //
  // Elements
  // -------------------------

  //
  // Modifiers
  // -------------------------

  &--primary {
    @include buttono-style-modifier(
      $background-color: $color-brand,
      $background-color-hover: $color-brand-dark-1,
      $opacity-disabled: 0.5
    );
  }

  &--secondary {
    @include buttono-style-modifier(
      $background-color: color-palette('primary', 600),
      $background-color-hover: color-palette('primary', 700),
      $background-color-disabled: color-palette('primary', 200)
    );
  }

  &--tertiary {
    @include buttono-style-modifier(
      $background-color: color-palette('primary', 900),
      $background-color-hover: color-palette('primary', 800),
      $background-color-disabled: color-palette('primary', 200)
    );
  }

  &--medium {
    min-height: px-to-rem(72px);
  }
}
