@use '../globals';
@use '../utils';

$button-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2), 0 1px 2px 0 rgba(0, 0, 0, 0.1);

//@mixin btn-spacing($button-gap: globals.rem-calc(16px)) {
//  wds-confirmation-button + wds-confirmation-button,
//  wds-confirmation-button + wds-button,
//  wds-confirmation-button + button,
//  wds-button + wds-button,
//  wds-button + button,
//  wds-button + wds-confirmation-button,
//  button + button,
//  button + wds-button,
//  button + wds-confirmation-button {
//    margin-left: $button-gap !important;
//  }
//}

@mixin btn-base($border-radius: globals.rem-calc(8px),
                $box-shadow: $button-shadow,
                $border: solid globals.rem-calc(2px) transparent,
                $border-top: solid globals.rem-calc(2px) transparent,
                $border-right: solid globals.rem-calc(2px) transparent,
                $border-bottom: solid globals.rem-calc(2px) transparent,
                $border-left: solid globals.rem-calc(2px) transparent,
                $border-top-width: globals.rem-calc(2px),
                $border-right-width: globals.rem-calc(2px),
                $border-bottom-width: globals.rem-calc(2px),
                $border-left-width: globals.rem-calc(2px),
                $font-size: globals.rem-calc(14px),
                $font-weight: 700,
                $icon-padding: globals.rem-calc(5px),
                $icon-size: globals.rem-calc(24px),
                $letter-spacing: normal,
                $padding: 0 globals.rem-calc(16px) globals.rem-calc(2px) globals.rem-calc(16px)) {

  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-family: inherit;
  font-size: $font-size!important;
  font-weight: $font-weight;
  background: none;
  letter-spacing: $letter-spacing;
  min-width: 0;
  line-height: globals.rem-calc(30px);
  padding: $padding;
  text-align: center;
  text-decoration: none;
  margin: 0;
  align-items: center;
  justify-content: center;
  border: $border;
  border-radius: $border-radius;
  border-left: $border-left;
  border-right: $border-right;
  border-top: $border-top;
  border-bottom: $border-bottom;
  border-top-width: $border-top-width;
  border-right-width: $border-right-width;
  border-bottom-width: $border-bottom-width;
  border-left-width: $border-left-width;
  white-space: nowrap;
  min-height: 24px;
  box-shadow: $box-shadow;

  .mat-icon {
    @include wds-btn-icon-color(globals.$gray);
    width: $icon-size;
    height: $icon-size;
    padding-right: $icon-padding;
  }

  &:disabled, &[aria-disabled="true"] {
    @include wds-btn-icon-color(globals.$gray);
    &:focus-visible {
      @include utils.focus-state(4px);
    }

    color: globals.$gray;
    cursor: default;
    background-color: globals.$gray-light;
    border-top-color: globals.$gray-med;
    border-bottom-color: transparent;

    &:hover {
      color: globals.$gray;
      border-top-color: globals.$gray-med;
      background-color: globals.$gray-light;
      border-bottom-color: transparent;
    }

    .mat-spinner {
      circle {
        stroke: globals.$gray;
      }
    }
  }




  &.mat-button {
    .mat-button-wrapper {
      display: flex;
      align-items: center;
    }
  }

  .mat-spinner {
    width: globals.rem-calc(24px)!important;
    height: globals.rem-calc(24px)!important;
    margin-right: globals.rem-calc(8px)!important;

    svg {
      width: globals.rem-calc(24px)!important;
      height: globals.rem-calc(24px)!important;
    }
  }
}

@mixin wds-btn-icon-color($icon-color: globals.$gray) {
  .mat-icon {
    color: $icon-color;
  }
}

@mixin wds-btn-primary($base-padding: 0 globals.rem-calc(16px) globals.rem-calc(2px) globals.rem-calc(16px),
                       $base-font-size: globals.rem-calc(14px),
                       $base-font-weight: 700,
                       $base-border-top: solid globals.rem-calc(2px) transparent,
                       $base-border-right: solid globals.rem-calc(2px) transparent,
                       $base-border-bottom: solid globals.rem-calc(2px) transparent,
                       $base-border-left: solid globals.rem-calc(2px) transparent,
                       $base-border-radius: globals.rem-calc(8px),
                       $base-border-top-width: globals.rem-calc(2px),
                       $base-border-right-width: globals.rem-calc(0px),
                       $base-border-bottom-width: globals.rem-calc(2px),
                       $base-border-left-width: globals.rem-calc(0px),
                       $base-icon-size: globals.rem-calc(24px),
                       $base-icon-padding: globals.rem-calc(5px),
                       $base-letter-spacing: normal,
                       $background-color: globals.$red-med,
                       $border-bottom-color: globals.$red-dark,
                       $base-box-shadow: $button-shadow,
                       $color: white,
                       $hover-background-color: globals.$red-hover,
                       $hover-border-bottom-color: globals.$red-med,
                       $focus-background-color: globals.$red-hover,
                       $focus-border-bottom-color: globals.$red-hover,
                       $focus-color: globals.$red-hover,
                       $active-background-color: globals.$red-dark) {

  @include btn-base($padding: $base-padding,
  $border-top: $base-border-top,
  $border-right: $base-border-right,
  $border-bottom: $base-border-bottom,
  $border-left: $base-border-left,
  $border-left-width: $base-border-left-width,
  $border-right-width: $base-border-right-width,
  $border-radius: $base-border-radius,
  $box-shadow: $base-box-shadow,
  $icon-size: $base-icon-size,
  $icon-padding: $base-icon-padding,
  $font-size: $base-font-size,
  $font-weight: $base-font-weight,
  $letter-spacing: $base-letter-spacing);
  background-color: $background-color;
  border-bottom-color: $border-bottom-color;
  color: $color;

  @include wds-btn-icon-color($icon-color: globals.$white);

  &:disabled {
    @include btn-base($border-right-width: 0, $border-left-width: 0);
  }

  &:not([aria-disabled="true"]) {

    &:not([disabled]) {
      &:focus-visible {
        @include utils.focus-state;
      }

      &:focus {
        background-color: $focus-background-color;
      }

      &:hover {
        background-color: $hover-background-color;
        border-bottom-color: $hover-border-bottom-color;
      }

      &:active {
        background-color: $active-background-color;
        border-bottom-color: transparent;
        box-shadow: none;
      }

      &:visited {
        color: $color;
      }
    }
  }

  .mat-spinner {
    circle {
      stroke: white;
    }
  }
}

@mixin wds-btn-secondary($base-padding: 0 globals.rem-calc(16px) globals.rem-calc(2px) globals.rem-calc(16px),
                         $base-font-size: globals.rem-calc(14px),
                         $base-font-weight: 700,
                         $base-letter-spacing: normal,
                         $background-color: globals.$gray,
                         $base-border-top: solid globals.rem-calc(2px) transparent,
                         $base-border-right: solid globals.rem-calc(2px) transparent,
                         $base-border-bottom: solid globals.rem-calc(2px) transparent,
                         $base-border-left: solid globals.rem-calc(2px) transparent,
                         $base-border-top-width: globals.rem-calc(2px),
                         $base-border-right-width: globals.rem-calc(0px),
                         $base-border-bottom-width: globals.rem-calc(2px),
                         $base-border-left-width: globals.rem-calc(0px),
                         $base-border-radius: globals.rem-calc(8px),
                         $border-bottom-color: globals.$gray,
                         $base-icon-size: globals.rem-calc(24px),
                         $base-icon-padding: globals.rem-calc(5px),
                         $base-box-shadow: $button-shadow,
                         $color: white,
                         $hover-color: white,
                         $hover-background-color: globals.$gray,
                         $hover-border-bottom-color: globals.$gray,
                         $focus-background-color: globals.$gray,
                         $focus-border-bottom-color: globals.$gray,
                         $focus-color: white,
                         $active-background-color: globals.$gray-light,
                         $active-border-bottom-color: globals.$gray-med,
                         $icon-color: globals.$white) {

  @include btn-base($padding: $base-padding,
  $font-size: $base-font-size,
  $border-radius: $base-border-radius,
  $box-shadow: $base-box-shadow,
  $border-left-width: $base-border-left-width,
  $border-right-width: $base-border-right-width,
  $icon-size: $base-icon-size,
  $icon-padding: $base-icon-padding,
  $font-weight: $base-font-weight,
  $letter-spacing: $base-letter-spacing);
  background-color: $background-color;
  border-bottom-color: $border-bottom-color;
  color: $color;

  @include wds-btn-icon-color($icon-color: $icon-color);

  &:focus-visible {
    @include utils.focus-state;
  }

  &:disabled {
    @include btn-base($border-right-width: 0, $border-left-width: 0);
  }

  &:focus {
    background-color: $focus-background-color;
    border-bottom-color: $focus-border-bottom-color;
    color: $focus-color;
  }

  &:hover {
    background-color: $hover-background-color;
    border-bottom-color: $hover-border-bottom-color;
    color: $hover-color;
  }

  &:active {
    background-color: globals.$gray-light;
    border-top-color: globals.$gray-med;
    border-bottom-color: transparent;
    box-shadow: none;
  }

  &:visited {
    color: $color;
  }
}

@mixin wds-btn-ghost($base-padding: 0 globals.rem-calc(14px) globals.rem-calc(2px) globals.rem-calc(14px),
                     $base-font-size: globals.rem-calc(14px),
                     $base-font-weight: 700,
                     $base-icon-size: globals.rem-calc(24px),
                     $base-icon-padding: globals.rem-calc(5px),
                     $base-letter-spacing: normal,
                     $background-color: globals.$white,
                     $border: solid globals.rem-calc(2px) globals.$red-med,
                     $base-border-top: solid globals.rem-calc(2px) globals.$red-med,
                     $base-border-right: solid globals.rem-calc(2px) globals.$red-med,
                     $base-border-bottom: solid globals.rem-calc(2px) globals.$red-med,
                     $base-border-left: solid globals.rem-calc(2px) globals.$red-med,
                     $base-box-shadow: none,
                     $base-border-radius: globals.rem-calc(8px),
                     $color: globals.$red-med,
                     $hover-background-color: white,
                     $hover-border: solid globals.rem-calc(2px) globals.$red-hover,
                     $hover-color: globals.$red-hover,
                     $focus-background-color: globals.$gray,
                     $focus-border: solid globals.rem-calc(2px) globals.$red-hover,
                     $focus-color: globals.$red-hover,
                     $active-background-color: globals.$white,
                     $active-border: solid globals.rem-calc(2px) globals.$red-dark,
                     $active-color: globals.$red-dark,
                     $icon-color: globals.$red-med) {

  @include btn-base($padding: $base-padding,
  $font-size: $base-font-size,
  $border-radius: $base-border-radius,
  $box-shadow: $base-box-shadow,
  $icon-size: $base-icon-size,
  $icon-padding: $base-icon-padding,
  $font-weight: $base-font-weight,
  $letter-spacing: $base-letter-spacing);
  background-color: $background-color;
  border: $border;
  color: $color;

  @include wds-btn-icon-color($icon-color: $icon-color);


  &:focus-visible {
    @include utils.focus-state(4px);
  }

  &:disabled {
    border-bottom-color: globals.$gray-med;
    @include btn-base($padding: 0 globals.rem-calc(14px) globals.rem-calc(2px) globals.rem-calc(14px),
    $border-right-width: 0,
    $border-left-width: 0);
  }


  &:not([aria-disabled="true"]) {

    &:not([disabled]) {

      &:focus {
        border: $focus-border;
        color: $focus-color;
      }

      &:hover {
        background-color: $hover-background-color;
        border: $hover-border;
        color: $hover-color;
      }

      &:active {
        background-color: $active-background-color;
        border: $active-border;
        color: $active-color;
        box-shadow: none;
      }

      &:visited {
        color: $color;
      }
    }
  }

  &[aria-disabled="true"] {
    border-left-color: transparent;
    border-right-color: transparent;
    border-bottom-color: transparent;
  }
}

@mixin wds-btn-white($base-padding: 0 globals.rem-calc(14px) globals.rem-calc(2px) globals.rem-calc(14px),
                     $base-font-size: globals.rem-calc(14px),
                     $base-font-weight: 700,
                     $base-icon-size: globals.rem-calc(24px),
                     $base-icon-padding: globals.rem-calc(5px),
                     $base-letter-spacing: normal,
                     $background-color: globals.$white,
                     $border: solid globals.rem-calc(2px) transparent,
                     $base-border-top: solid globals.rem-calc(2px) globals.$red-med,
                     $base-border-right: solid globals.rem-calc(2px) globals.$red-med,
                     $base-border-bottom: solid globals.rem-calc(2px) globals.$red-med,
                     $base-border-left: solid globals.rem-calc(2px) globals.$red-med,
                     $base-border-radius: globals.rem-calc(8px),
                     $base-box-shadow: none,
                     $color: globals.$red-med,
                     $hover-background-color: globals.$gray-x-light,
                     $hover-border: solid globals.rem-calc(2px) globals.$red-hover,
                     $hover-color: globals.$red-hover,
                     $focus-background-color: globals.$gray-x-light,
                     $focus-border: solid globals.rem-calc(2px) globals.$red-hover,
                     $focus-color: globals.$red-hover,
                     $active-background-color: globals.$white,
                     $active-border: solid globals.rem-calc(2px) globals.$red-dark,
                     $active-color: globals.$red-dark,
                     $icon-color: globals.$gray) {

  @include btn-base($padding: $base-padding,
  $border-radius: $base-border-radius,
  $box-shadow: $base-box-shadow,
  $icon-size: $base-icon-size,
  $icon-padding: $base-icon-padding,
  $font-size: $base-font-size,
  $font-weight: $base-font-weight,
  $letter-spacing: $base-letter-spacing);

  background-color: $background-color;
  color: $color;
  box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2),
  0 0 2px 0 rgba(0, 0, 0, 0.1),
  0 1px 2px 0 rgba(0, 0, 0, 0.1);
  border: $border;


  @include wds-btn-icon-color($icon-color: $icon-color);

  &:focus-visible {
    @include utils.focus-state(4px);
  }
  &:disabled {
    @include btn-base($border-right-width: 0, $border-left-width: 0);
  }

  &:focus {
    background-color: $focus-background-color;
    color: $focus-color;
  }

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

  &:active {
    background-color: $active-background-color;
    color: $active-color;
    box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.2),
    0 0 2px 0 rgba(0, 0, 0, 0.1),
    0 1px 2px 0 rgba(0, 0, 0, 0.1);
  }

  &:visited {
    color: $color;
  }
}

@mixin wds-btn-text-only($base-padding: 0 globals.rem-calc(16px) globals.rem-calc(2px) globals.rem-calc(16px),
                         $base-font-size: globals.rem-calc(14px),
                         $base-font-weight: 700,
                         $base-border-radius: globals.rem-calc(8px),
                         $base-icon-size: globals.rem-calc(24px),
                         $base-icon-padding: globals.rem-calc(5px),
                         $base-letter-spacing: normal,
                         $background-color: transparent,
                         $border: none,
                         $base-box-shadow: none,
                         $color: globals.$red-med,
                         $hover-background-color: transparent,
                         $hover-border: solid globals.rem-calc(2px) transparent,
                         $hover-color: globals.$red-hover,
                         $focus-background-color: globals.$gray-x-light,
                         $focus-border: solid globals.rem-calc(2px) transparent,
                         $focus-color: globals.$red-hover,
                         $active-background-color: transparent,
                         $active-border: solid globals.rem-calc(2px) transparent,
                         $active-color: globals.$red-dark,
                         $icon-color: globals.$gray) {

  @include btn-base($padding: $base-padding,
  $border-radius: $base-border-radius,
  $box-shadow: $base-box-shadow,
  $icon-size: $base-icon-size,
  $icon-padding: $base-icon-padding,
  $font-size: $base-font-size,
  $font-weight: $base-font-weight,
  $letter-spacing: $base-letter-spacing);

  background-color: $background-color;
  color: $color;
  box-shadow: none;

  @include wds-btn-icon-color($icon-color: $icon-color);

  &:disabled {
    background-color: transparent;
    border-top-color: transparent;

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

  &:focus-visible {
    @include utils.focus-state(4px);
  }

  &:focus {
    background-color: $focus-background-color;
    color: $focus-color;
  }

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

  &:active {
    background-color: $active-background-color;
    color: $active-color;
    box-shadow: none;
  }

  &:visited {
    color: $color;
  }
}

@mixin wds-icon-only-btn($base-padding: 0 globals.rem-calc(16px) globals.rem-calc(2px) globals.rem-calc(16px),
                         $background-color: transparent,
                         $border-radius: 8px,
                         $border: solid globals.rem-calc(1px) transparent,
                         $base-border-radius: globals.rem-calc(8px),
                         $base-icon-size: globals.rem-calc(24px),
                         $button-size: globals.rem-calc(24px),
                         $border-left: none,
                         $border-right: none,
                         $border-bottom-color: transparent,
                         $base-box-shadow: none,
                         $hover-background-color: transparent,
                         $hover-border-bottom-color: transparent,
                         $focus-background-color: globals.$gray-x-light,
                         $focus-border-bottom-color: globals.$gray-x-light,
                         $active-background-color: globals.$gray-x-light,
                         $active-border-bottom-color: globals.$gray-x-light,
                         $disabled-border: none,
                         $icon-color: globals.$gray) {
  @include btn-base($padding: $base-padding,
  $box-shadow: $base-box-shadow,
  $border-radius: $base-border-radius,
  $icon-size: $base-icon-size);
  height: $button-size;
  width: $button-size;
  background-color: $background-color;
  border-radius: $border-radius;
  border: $border;
  border-bottom-color: $border-bottom-color;
  border-left: $border-left;
  border-right: $border-right;
  box-shadow: $base-box-shadow;
  color: $icon-color;
  padding: 0;
  font-size: 0;


  &:hover {
    background-color: $hover-background-color;
    border-bottom-color: $hover-border-bottom-color
  }

  .mat-icon {
    padding: 0;
  }

  &:focus-visible {
    @include utils.focus-state(4px);
  }

  &:active {
    box-shadow: none;
    border: $active-border-bottom-color
  }

  &:disabled {
    background-color: transparent !important;
    border-bottom-color: transparent;
    border: $disabled-border;

    &:hover {
      border-top-color: transparent;
    }

    &:active {
      border-top-color: transparent;
    }

    .mat-icon {
      color: globals.$gray;

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

@mixin wds-icon-only-btn--base {
  @include wds-icon-only-btn($box-shadow: none);
}

@mixin wds-icon-only-btn--primary($base-padding: 0 globals.rem-calc(16px) globals.rem-calc(2px) globals.rem-calc(16px),
                                  $base-button-size: globals.rem-calc(36px),
                                  $background-color: globals.$red-med,
                                  $border: solid globals.rem-calc(2px) transparent,
                                  $border-left: none,
                                  $border-right: none,
                                  $border-radius: globals.rem-calc(8px),
                                  $border-bottom-color: globals.$red-dark,
                                  $icon-button-shadow: $button-shadow,
                                  $hover-background-color: globals.$red-hover,
                                  $hover-border-bottom-color: globals.$red-med,
                                  $focus-background-color: globals.$gray-x-light,
                                  $focus-border-bottom-color: globals.$red-hover,
                                  $active-background-color: transparent,
                                  $active-border-bottom-color: globals.$red-med,
                                  $icon-color: globals.$white) {
  @include wds-icon-only-btn($base-padding: $base-padding,
  $background-color: $background-color,
  $border: $border,
  $base-border-radius: $border-radius,
  $button-size: $base-button-size,
  $border-bottom-color: $border-bottom-color,
  $base-box-shadow: $icon-button-shadow,
  $hover-background-color: $hover-background-color,
  $hover-border-bottom-color: $hover-border-bottom-color,
  $focus-background-color: $focus-background-color,
  $focus-border-bottom-color: $focus-border-bottom-color,
  $active-background-color: $active-background-color,
  $active-border-bottom-color: $active-border-bottom-color,
  $icon-color: $icon-color);
}


@mixin wds-icon-only-btn--secondary($base-padding: 0 globals.rem-calc(16px) globals.rem-calc(2px) globals.rem-calc(16px),
                                    $base-button-size: globals.rem-calc(36px),
                                    $background-color: globals.$gray,
                                    $border-radius: globals.rem-calc(8px),
                                    $border: solid globals.rem-calc(2px) transparent,
                                    $border-left: none,
                                    $border-right: none,
                                    $border-bottom-color: globals.$gray,
                                    $icon-button-shadow: $button-shadow,
                                    $hover-background-color: globals.$gray,
                                    $hover-border-bottom-color: globals.$gray,
                                    $focus-background-color: globals.$gray-x-light,
                                    $focus-border-bottom-color: globals.$gray,
                                    $active-background-color: globals.$gray-light,
                                    $active-border-bottom-color: globals.$gray-med,
                                    $icon-color: globals.$white) {
  @include wds-icon-only-btn($base-padding: $base-padding,
  $background-color: $background-color,
  $border-radius: $border-radius,
  $border: $border,
  $border-left: $border-left,
  $border-right: $border-right,
  $button-size: $base-button-size,
  $base-border-radius: $border-radius,
  $border-bottom-color: $border-bottom-color,
  $base-box-shadow: $icon-button-shadow,
  $hover-background-color: $hover-background-color,
  $hover-border-bottom-color: $hover-border-bottom-color,
  $focus-background-color: $focus-background-color,
  $focus-border-bottom-color: $focus-border-bottom-color,
  $active-background-color: $active-background-color,
  $active-border-bottom-color: $active-border-bottom-color,
  $icon-color: $icon-color);
}


@mixin wds-icon-only-btn--ghost($base-padding: 0 globals.rem-calc(16px) globals.rem-calc(2px) globals.rem-calc(16px),
                                $background-color: globals.$white,
                                $border-radius: 8px,
                                $border: solid globals.rem-calc(2px) globals.$red-med,
                                $border-left: solid globals.rem-calc(2px) globals.$red-med,
                                $border-right: solid globals.rem-calc(2px) globals.$red-med,
                                $border-bottom-color: globals.$red-med,
                                $base-button-size: globals.rem-calc(36px),
                                $icon-button-shadow: $button-shadow,
                                $hover-background-color: white,
                                $focus-background-color: globals.$gray,
                                $active-background-color: globals.$white,
                                $icon-color: globals.$red-med) {
  @include wds-icon-only-btn($base-padding: $base-padding,
  $background-color: $background-color,
  $border-radius: $border-radius,
  $button-size: $base-button-size,
  $border: $border,
  $border-left: $border-left,
  $border-right: $border-right,
  $border-bottom-color: $border-bottom-color,
  $base-box-shadow: $icon-button-shadow,
  $hover-background-color: $hover-background-color,
  $focus-background-color: $focus-background-color,
  $active-background-color: $active-background-color,
  $icon-color: $icon-color);

  &:hover {
    border-color: globals.$red-hover,
  }
}

@mixin wds-icon-only-btn--white($base-padding: 0 globals.rem-calc(16px) globals.rem-calc(2px) globals.rem-calc(16px),
                                $background-color: globals.$white,
                                $border-radius: 8px,
                                $base-button-size: globals.rem-calc(36px),
                                $icon-button-shadow: $button-shadow,
                                $hover-background-color: globals.$gray-x-light,
                                $focus-background-color: globals.$gray,
                                $active-background-color: globals.$white,
                                $icon-color: globals.$gray) {
  @include wds-icon-only-btn($base-padding: $base-padding,
  $background-color: $background-color,
  $border-radius: $border-radius,
  $button-size: $base-button-size,
  $base-box-shadow: $icon-button-shadow,
  $hover-background-color: $hover-background-color,
  $focus-background-color: $focus-background-color,
  $active-background-color: $active-background-color,
  $icon-color: $icon-color);
}

.mat-datepicker-toggle {
  .mat-mdc-button-base {
    &:focus-visible {
      @include utils.focus-state;
    }
  }
}