@use "vars" as *;
@use "mixins" as *;
@use "../../config" as *;
@use "../../spacing" as *;
@use "../../theme" as *;
@use "../../type" as *;
@use "../../utilities/convert" as *;
@use "../../utilities/focus-outline" as *;
@use "../../utilities/high-contrast-mode" as *;
@use "../../utilities/skeleton" as *;
@use "../../utilities/rtl" as *;
@use "../../utilities/visually-hidden" as *;
@use 'sass:color';
//@use 'tokens' as *;

@mixin button {

  // <button> elements cannot be used as flex containers
  button.#{$prefix}--btn {
    //background: $color-corporate-09 !important;
    // TODO: use inline-flex for all buttons
    // display: inline-block;
    /*vertical-align: middle;
    display: inline-flex;
    line-height: initial;*/
  }

  // Reset intrisic padding in Firefox (see #731)
  button.#{$prefix}--btn::-moz-focus-inner {
    padding: 0;
    border: 0;
  }

  // Vertically center icon inside <button>
  button.#{$prefix}--btn .#{$prefix}--btn__icon {
    //position: relative;
    //vertical-align: middle;
    // height: 1em;
    // width: 1em;

    // Targets IE10+ browsers: Reset <svg> position for vertical centering
    @media all and (-ms-high-contrast: none),
    (-ms-high-contrast: active) {
      top: 0;
    }
  }

  button.#{$prefix}--btn--icon-reverse,
  a.#{$prefix}--btn--icon-reverse {
    .#{$prefix}--btn__icon {
      margin-left: 0;
      margin-right: $spacing-03;

      @include rtl {
        margin-left: $spacing-03;
        margin-right: 0;
      }
    }
  }

  /*a.#{$prefix}--btn--icon-reverse {
    display: inline-flex;
    flex-direction: row-reverse;

    .#{$prefix}--btn__icon {
      float: left;
      margin-left: 0;
      margin-right: $spacing-03;
      @include rtl {
        margin-left: $spacing-03;
        margin-right: 0;
      }
    }
  }*/

  a,
  button {
    &.#{$prefix}--btn--icon-only {
      padding: 0 $spacing-04;

      .#{$prefix}--btn__icon {
        margin-left: 0;
        margin-right: 0;
      }
    }
  }

  /* Standard syntax */

  .#{$prefix}--btn {
    @include button-base;
  }

  .#{$prefix}--btn--primary {
    @include button-theme($action-default-fill-primary-default,
      transparent,
      $action-default-text-primary-default,
      $action-default-fill-primary-default,
      $action-default-text-primary-default );

    &:hover {
      background-color: $action-default-fill-primary-hover;
      color: $action-default-text-primary-hover;
    }

    &:active {
      background-color: $action-default-fill-primary-active;
      color: $action-default-text-primary-active;
    }

    &:focus {
      background-color: $action-default-fill-primary-focus;
      color: $action-default-text-primary-focus;
      @include focus-outline("border-focus");
    }

    &:disabled,
    &:hover:disabled,
    &:focus:disabled {
      color: $action-default-text-primary-disable;
      background-color: $action-default-fill-primary-disable;
      opacity: unset;
    }
  }

  .#{$prefix}--btn--primary-solid {
    @include button-theme($action-solid-fill-primary-default,
      transparent,
      $action-solid-text-primary-default,
      $action-solid-fill-primary-default,
      $action-solid-text-primary-default );

    &:hover {
      background-color: $action-solid-fill-primary-hover;
      color: $action-solid-text-primary-hover;
    }

    &:active {
      background-color: $action-solid-fill-primary-active;
      color: $action-solid-text-primary-active;
    }

    &:focus {
      @include focus-outline("border-focus");
    }

    &:disabled,
    &:hover:disabled,
    &:focus:disabled {
      color: $action-solid-text-primary-disable; //TODO button disabled color
      background-color: $action-solid-fill-primary-disable;
      opacity: unset;
    }
  }

  .#{$prefix}--btn--secondary {
    @include button-theme(transparent,
      $action-default-text-secondary-default,
      $action-default-text-secondary-default,
      transparent,
      $action-default-text-secondary-default );
    border-width: 1px;

    &:hover {
      background-color: $action-default-fill-secondary-hover;
      color: $action-default-text-secondary-hover;
    }

    &:active {
      background-color: $action-default-fill-secondary-active;
      color: $action-default-text-secondary-active;
    }

    &:focus {
      @include focus-outline("border-focus");
    }

    &:disabled,
    &:hover:disabled,
    &:focus:disabled {
      color: $action-default-text-secondary-disable;
      border-width: 1px;
      border-color: $action-default-text-secondary-disable;
      opacity: unset;
    }
  }

  .#{$prefix}--btn--secondary-solid {
    @include button-theme(transparent,
      $action-default-fill-secondary-default,
      $action-default-fill-secondary-default,
      transparent,
      $action-default-fill-secondary-default );
    border-width: 1px;

    &:hover {
      background-color: $action-solid-fill-secondary-hover;
      color: $action-solid-text-secondary-hover;
    }

    &:active {
      background-color: $action-solid-fill-secondary-active;
      color: $action-solid-text-secondary-active;
    }

    &:focus {
      @include focus-outline("border-focus");
    }

    &:hover>.#{$prefix}--btn__icon,
    &:focus>.#{$prefix}--btn__icon {
      fill: $icon-inverse;
    }

    &:disabled,
    &:hover:disabled,
    &:focus:disabled {
      color: $action-solid-text-secondary-disable;
      border-color: $action-solid-text-secondary-disable;
      opacity: unset;
    }
  }

  .#{$prefix}--btn--ghost {
    @include button-theme(transparent,
      transparent,
      $action-default-text-ghost-default,
      transparent,
      $action-default-text-ghost-default );

    &:hover {
      background-color: $action-default-fill-ghost-hover;
      color: $action-default-text-ghost-hover;
    }

    &:active {
      background-color: $action-default-fill-ghost-active;
      color: $action-default-text-ghost-active;
    }

    &:focus {
      @include focus-outline("border-focus");
    }

    &:disabled,
    &:hover:disabled,
    &:focus:disabled {
      color: $action-default-text-ghost-disable;
      border-color: transparent;
      opacity: unset;
    }

    .#{$prefix}--btn__icon {
      margin-left: $spacing-03;

      @include rtl {
        margin-left: initial;
        margin-right: $spacing-03;
      }
    }
  }

  .#{$prefix}--btn--ghost-solid {
    @include button-theme(transparent,
      transparent,
      $action-solid-text-ghost-default,
      $action-solid-fill-ghost-default,
      $action-solid-text-ghost-default );

    &:hover {
      background-color: $action-solid-fill-ghost-hover;
      color: $action-solid-text-ghost-hover;
    }

    &:active {
      background-color: $action-solid-fill-ghost-active;
      color: $action-solid-text-ghost-active;
    }

    &:focus {
      @include focus-outline("border-focus");

      .#{$prefix}--btn__icon {
        fill: $action-solid-fill-ghost-focus;
      }
    }

    .#{$prefix}--btn__icon {
      margin-left: $spacing-03;

      @include rtl {
        margin-left: initial;
        margin-right: $spacing-03;
      }
    }

    &:disabled,
    &:hover:disabled,
    &:focus:disabled {
      color: $action-solid-text-ghost-disable;
      opacity: unset;

      .#{$prefix}--btn__icon {
        fill: $action-solid-text-ghost-disable;
      }
    }
  }

  @keyframes slidein {
    from {
      box-shadow: 0 0 0 0px rgba(var(--ui-05), 0.7);
    }

    to {
      box-shadow: 0 0 0 7px rgba(var(--ui-05), 0);
    }
  }

  .#{$prefix}--btn--animating {
    animation-duration: 0.5s;
    animation-name: slidein;
  }

  .#{$prefix}--btn--danger {
    @include button-theme($action-default-fill-danger-default,
      transparent,
      $action-default-text-danger-default,
      $action-default-fill-danger-default,
      $action-default-text-danger-default );

    &:hover {
      background-color: $action-default-fill-danger-hover;
    }

    &:active {
      background-color: $action-default-fill-danger-active;
    }

    &:focus {
      @include focus-outline("border-focus-small");
    }

    &:disabled,
    &:hover:disabled,
    &:focus:disabled {
      background-color: $action-default-fill-danger-disable;
      color: $action-default-text-danger-disable;
      opacity: unset;
    }

    // &:hover > .#{$prefix}--btn__icon,
    // &:focus > .#{$prefix}--btn__icon {
    //   fill: $icon-on-color;
    // }
  }

  .#{$prefix}--btn--danger--primary {
    @include button-theme($support-error-main,
      transparent,
      $text-inverse-default,
      $button-danger-hover,
      $icon-on-color );

    &:hover:disabled,
    &:focus:disabled {
      color: $text-inverse-default;
      border: $button-border-width solid $support-error-main;
    }
  }

  .#{$prefix}--btn--sm {
    padding: $button-padding-sm;
    @include type-style("body-short");
    letter-spacing: 0;
    font-weight: 700;
    height: 1.8rem;
  }

  .#{$prefix}--btn--lg {
    height: 3.25rem;
    font-size: calcRem(18px); //TODO
  }

  .#{$prefix}--btn--all-caps {
    letter-spacing: 0.05rem;
    text-transform: uppercase;
  }

  .#{$prefix}--btn--secondary+.#{$prefix}--btn--primary,
  .#{$prefix}--btn--tertiary+.#{$prefix}--btn--danger--primary {
    margin-left: $spacing-03;

    @include rtl {
      margin-left: 0;
      margin-right: $spacing-03;
    }
  }

  // Skeleton State
  .#{$prefix}--btn.#{$prefix}--skeleton {
    width: calcRem(150px);
    @include skeleton;
  }

  // Legacy button state styling

  .#{$prefix}--btn--accent {
    @include button-theme($support-warning,
      transparent,
      $text-body-default,
      $support-warning,
      $text-body-default );

    .#{$prefix}--btn__icon,
    &:hover>.#{$prefix}--btn__icon,
    &:focus>.#{$prefix}--btn__icon {
      fill: $text-body-default;
    }
  }

  .#{$prefix}--btn--navigation {
    @include button-theme(color.adjust(#34a2d9, $saturation: 1%),
      transparent,
      $text-inverse-default,
      color.adjust(#34a2d9, $lightness: 5%, $saturation: 10%),
      $icon-on-color );
  }

  .#{$prefix}--btn--tertiary {
    @include button-theme($button-tertiary,
      transparent,
      $text-body-default,
      $button-tertiary-hover,
      $text-body-default );

    &:hover,
    &:focus {
      color: $text-body-default;
    }

    &:active {
      color: var(--ui-05);
    }

    &:hover:disabled,
    &:focus:disabled {
      color: var(--ui-05);
    }

    &:hover>.#{$prefix}--btn__icon,
    &:focus>.#{$prefix}--btn__icon {
      fill: $text-body-default;
    }
  }

  .#{$prefix}--btn--inverse--primary {
    @include button-theme($field,
      $field,
      $button-primary,
      $background-main,
      $text-body-default );

    &:hover {
      color: $button-primary-hover;
      //border: $button-border-width solid var(--ui-01);
    }

    &:focus {
      background: $fill-field;
      color: $button-primary-hover;
    }

    &:hover:disabled,
    &:focus:disabled {
      color: $support-error-main;
      border: $button-border-width solid $support-error-main;
    }
  }

  .#{$prefix}--btn--inverse {
    @include button-theme(transparent,
      $field,
      $text-inverse-default,
      rgba(#ffffff, 0.1),
      $icon-on-color );

    &:hover {
      color: $text-inverse-default;
      border: $button-border-width solid $fill-field;
    }

    &:focus {
      color: $text-inverse-default;
    }

    &:hover:disabled,
    &:focus:disabled {
      color: $support-error-main;
      border: $button-border-width solid $support-error-main;
    }
  }
}

// @include exports('button') {
//   @include button;
// }