//@use '../../../globals';
//@use '../../../global-mixins';
//
//$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,
//                $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-width: 0;
//  border-right-width: 0;
//  white-space: nowrap;
//  min-height: 24px;
//
//  .mat-icon {
//    @include wds-btn-icon-color(globals.$black);
//    width: $icon-size;
//    height: $icon-size;
//    padding-right: $icon-padding;
//  }
//
//  &:disabled {
//    @include wds-btn-icon-color(globals.$gray);
//
//    color: globals.$gray;
//    cursor: default;
//    background-color: globals.$gray-light;
//    border-top-color: globals.$gray-med;
//    border-bottom-color: transparent!important;
//
//    &:hover {
//      color: globals.$gray;
//      border-top-color: globals.$gray-med;
//      background-color: globals.$gray-light;
//      border-bottom-color: transparent;
//    }
//  }
//
//  &:not([disabled]):not(.mat-stroked-button, .mat-raised-button, .mat-button-base, .wds-btn-text-only, .wds-icon-only-btn) {
//    box-shadow: $box-shadow;
//  }
//}
//
//@mixin wds-btn-icon-color($icon-color: globals.$black) {
//  &:host-context(.wds-icon-only-btn) {
//    .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-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: globals.$red-med,
//                       $border-bottom-color: globals.$red-dark,
//                       $border-left: none,
//                       $border-right: none,
//                       $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-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);
//
//  &:focus-visible {
//    @include global-mixins.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;
//  }
//}
//
//@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-x-dark,
//                         $base-border-radius: globals.rem-calc(8px),
//                         $border-bottom-color: globals.$black,
//                         $base-icon-size: globals.rem-calc(24px),
//                         $base-icon-padding: globals.rem-calc(5px),
//                         $border-left: none,
//                         $border-right: none,
//                         $color: white,
//                         $hover-color: white,
//                         $hover-background-color: globals.$gray,
//                         $hover-border-bottom-color: globals.$gray-x-dark,
//                         $focus-background-color: globals.$gray,
//                         $focus-border-bottom-color: globals.$gray-x-dark,
//                         $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,
//  $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 global-mixins.focus-state;
//  }
//
//  &:disabled {
//    border-bottom-color: globals.$gray-med;
//  }
//
//  &: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;
//  }
//
//}
//
//@mixin wds-btn-ghost($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-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,
//                     $border-left: none,
//                     $border-right: 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,
//  $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 global-mixins.focus-state(4px);
//  }
//
//  &:disabled {
//    border-bottom-color: globals.$gray-med;
//    border-left-width: 0;
//    border-right-width: 0;
//  }
//
//  &:not([disabled]) {
//    &:focus {
//      border: $focus-border;
//      color: $focus-color;
//    }
//
//    &:hover {
//      background-color: $hover-background-color;
//      border: $hover-border;
//      color: $hover-color;
//    }
//
//    &:active {
//      background-color: globals.$white;
//      border: $active-border;
//      color: $active-color;
//      box-shadow: none;
//    }
//  }
//
//}
//
//@mixin wds-btn-white($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-icon-size: globals.rem-calc(24px),
//                     $base-icon-padding: globals.rem-calc(5px),
//                     $base-letter-spacing: normal,
//                     $background-color: globals.$white,
//                     $border: none,
//                     $border-left: none,
//                     $border-right: none,
//                     $base-border-radius: globals.rem-calc(8px),
//                     $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.$black) {
//
//  @include btn-base($padding: $base-padding,
//  $border-radius: $base-border-radius,
//  $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);
//
//  @include wds-btn-icon-color($icon-color: $icon-color);
//
//  &:focus-visible {
//    @include global-mixins.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: 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);
//  }
//
//}
//
//@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,
//                         $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.$black) {
//
//  @include btn-base($padding: $base-padding,
//  $border-radius: $base-border-radius,
//  $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 global-mixins.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;
//  }
//}
//
//@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(2px) transparent,
//                         $base-border-radius: globals.rem-calc(8px),
//                         $base-icon-size: globals.rem-calc(24px),
//                         $button-size: globals.rem-calc(36px),
//                         $border-left: none,
//                         $border-right: none,
//                         $border-bottom-color: transparent,
//                         $box-shadow: $button-shadow,
//                         $hover-background-color: globals.$gray-x-light,
//                         $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.$black) {
//  @include btn-base($padding: $base-padding,
//  $border-radius: $base-border-radius,
//  $icon-size: $base-icon-size,
//  $box-shadow: $box-shadow);
//  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;
//  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 global-mixins.focus-state(4px);
//  }
//
//  &:active {
//    box-shadow: none;
//    border: $active-border-bottom-color
//  }
//
//  &:disabled {
//    background-color: transparent;
//    border-bottom-color: transparent;
//    border: $disabled-border;
//
//    &:hover {
//      border-top-color: transparent;
//    }
//
//    &:active {
//      border-top-color: transparent;
//    }
//
//    .mat-icon {
//      padding: 5px;
//      border-radius: 34px;
//      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,
//                                  $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,
//  $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-x-dark,
//                                    $border-radius: globals.rem-calc(8px),
//                                    $border: solid globals.rem-calc(2px) transparent,
//                                    $border-left: none,
//                                    $border-right: none,
//                                    $border-bottom-color: globals.$black,
//                                    $hover-background-color: globals.$gray,
//                                    $hover-border-bottom-color: globals.$gray-x-dark,
//                                    $focus-background-color: globals.$gray-x-light,
//                                    $focus-border-bottom-color: globals.$gray-x-dark,
//                                    $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,
//  $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),
//                                $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,
//  $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),
//                                $hover-background-color: globals.$gray-x-light,
//                                $focus-background-color: globals.$gray,
//                                $active-background-color: globals.$white,
//                                $icon-color: globals.$black) {
//  @include wds-icon-only-btn($base-padding: $base-padding,
//  $background-color: $background-color,
//  $border-radius: $border-radius,
//  $button-size: $base-button-size,
//  $hover-background-color: $hover-background-color,
//  $focus-background-color: $focus-background-color,
//  $active-background-color: $active-background-color,
//  $icon-color: $icon-color);
//}