@use '../../all_variables' as *;

@mixin buttons(
  $subsite-light-theme,
  $subsite-primary,
  $subsite-primary-text,
  $subsite-secondary,
  $subsite-secondary-text,
  $subsite-tertiary,
  $subsite-tertiary-text
) {
  //button primary
  $subsite-button-primary: $subsite-primary;
  $subsite-button-primary-text: $subsite-primary-text;

  //button secondary
  $subsite-button-secondary: $subsite-secondary;
  $subsite-button-secondary-text: $subsite-secondary-text;

  //button tertiary
  $subsite-button-tertiary: $subsite-tertiary;
  $subsite-button-tertiary-text: $subsite-tertiary-text;

  a.btn.btn-primary,
  .btn.btn-primary {
    @if $subsite-light-theme {
      @include button-variant(
        $background: darken($subsite-button-primary, 10%),
        $border: $subsite-button-primary-text,
        $hover-background: darken($subsite-button-primary, 5%),
        $hover-border: darken($subsite-button-primary-text, 10%),
        $active-background: darken($subsite-button-primary, 7.5%),
        $active-border: darken($subsite-button-primary-text, 12.5%)
      );
    } @else {
      @include button-variant(
        $background: $subsite-button-primary,
        $border: $subsite-button-primary-text,
        $hover-background: darken($subsite-button-primary, 5%),
        $hover-border: darken($subsite-button-primary-text, 10%),
        $active-background: darken($subsite-button-primary, 7.5%),
        $active-border: darken($subsite-button-primary-text, 12.5%)
      );
    }
    color: $subsite-button-primary-text !important;

    .icon {
      color: $subsite-button-primary-text;
      fill: $subsite-button-primary-text;
    }

    &:hover {
      @if $subsite-light-theme {
        color: $subsite-button-primary-text !important;
      } @else {
        color: darken($subsite-button-primary-text, 10%) !important;
      }

      .icon {
        color: darken($subsite-button-primary-text, 10%);
        fill: darken($subsite-button-primary-text, 10%);
      }
    }

    &.disabled,
    &:disabled {
      color: darken($subsite-button-primary-text, 10%);
    }
  }

  a.btn.btn-secondary,
  .btn.btn-secondary {
    @include button-variant(
      $background: $subsite-button-secondary,
      $border: $subsite-button-secondary-text,
      $hover-background: lighten($subsite-button-secondary, 7.5%),
      $hover-border: darken($subsite-button-secondary-text, 10%),
      $active-background: lighten($subsite-button-secondary, 10%),
      $active-border: darken($subsite-button-secondary-text, 12.5%)
    );
    color: $subsite-button-secondary-text;

    .icon {
      color: $subsite-button-secondary-text;
      fill: $subsite-button-secondary-text;
    }

    &:hover {
      color: darken($subsite-button-secondary-text, 10%);

      .icon {
        color: darken($subsite-button-secondary-text, 10%);
        fill: darken($subsite-button-secondary-text, 10%);
      }
    }

    &.disabled,
    &:disabled {
      color: darken($subsite-button-secondary-text, 10%);
    }
  }

  a.btn.btn-outline-primary,
  .btn.btn-outline-primary {
    @if $subsite-light-theme {
      @include button-outline-variant(darken($subsite-button-primary, 40));
    } @else {
      @include button-outline-variant($subsite-button-primary);
    }
  }

  a.btn.btn-outline-secondary,
  .btn.btn-outline-secondary {
    @include button-outline-variant($subsite-button-secondary);
  }

  a.btn.btn-outline-tertiary,
  .btn.btn-outline-tertiary {
    @include button-outline-variant($subsite-button-tertiary);
  }
}