//
// Copyright IBM Corp. 2016, 2018
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//

@import '../../globals/scss/vars';
@import '../../globals/scss/typography';
@import '../../globals/scss/helper-mixins';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import 'mixins';
@import '../../globals/scss/css--reset';

@mixin button {
  // <button> elements cannot be used as flex containers
  button.#{$prefix}--btn {
    display: inline-block;
  }

  // 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;
    top: -1px;

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

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

  .#{$prefix}--btn--primary {
    @include button-theme($brand-01, transparent, $inverse-01, $hover-primary, $ui-01);
  }

  .#{$prefix}--btn--secondary {
    @include button-theme(transparent, $brand-01, $brand-01, $hover-secondary, $brand-01);

    &:hover,
    &:focus {
      color: $inverse-01;
    }

    &:active {
      color: $brand-01;
    }

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

    &:hover:disabled,
    &:focus:disabled {
      color: $brand-01;
    }
  }

  .#{$prefix}--btn--tertiary {
    @include button-theme(transparent, $ui-05, $ui-05, $ui-05, $ui-05);

    &:hover,
    &:focus {
      color: $inverse-01;
    }

    &:active {
      color: $ui-05;
    }

    &:hover:disabled,
    &:focus:disabled {
      color: $ui-05;
    }

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

  .#{$prefix}--btn--ghost {
    @include button-theme(transparent, transparent, $brand-01, $brand-01, $brand-01);

    &:hover,
    &:focus {
      color: $inverse-01;

      .#{$prefix}--btn__icon {
        fill: $inverse-01;
      }
    }

    &:active {
      color: $ui-05;
    }

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

    &:hover:disabled,
    &:focus:disabled {
      color: $brand-01;

      .#{$prefix}--btn__icon {
        fill: $brand-01;
      }
    }
  }

  .#{$prefix}--btn--danger {
    @include button-theme(transparent, $support-01, $support-01, $support-01, $support-01);

    &:hover {
      color: $inverse-01;
      border: $button-border-width solid transparent;
    }

    &:focus {
      color: $inverse-01;
    }

    &:active {
      color: $support-01;
    }

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

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

  .#{$prefix}--btn--danger--primary {
    @include button-theme($support-01, transparent, $inverse-01, darken($support-01, 10%), $ui-01);

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

  .#{$prefix}--btn--sm {
    @include letter-spacing;
    height: 2rem;
    padding: $button-padding-sm;
  }

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

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

@mixin button--x {
  // button set styles
  .#{$prefix}--btn-set {
    display: flex;
  }

  .#{$prefix}--btn-set > .#{$prefix}--btn {
    max-width: rem(196px); // taken from design kit
    width: 100%;
  }

  .#{$prefix}--btn--secondary.#{$prefix}--btn--disabled + .#{$prefix}--btn--primary.#{$prefix}--btn--disabled,
  .#{$prefix}--btn--tertiary.#{$prefix}--btn--disabled + .#{$prefix}--btn--danger.#{$prefix}--btn--disabled {
    border-left: rem(1px) solid $disabled-03;
  }

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

    &.#{$prefix}--btn--disabled > .#{$prefix}--btn__icon,
    &:disabled > .#{$prefix}--btn__icon {
      fill: $ui-04;
    }
  }

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

  .#{$prefix}--btn--primary {
    @include button-theme--x($interactive-01, transparent, $text-04, $hover-primary, $text-04, $active-primary);

    &:hover {
      color: $text-04;
    }
  }

  .#{$prefix}--btn--secondary {
    @include button-theme--x($interactive-02, transparent, $text-04, $hover-secondary, $text-04, $active-secondary);

    &:hover,
    &:focus {
      color: $inverse-01;
    }
  }

  .#{$prefix}--btn--tertiary {
    @include button-theme--x(transparent, $interactive-03, $interactive-03, $hover-tertiary, $interactive-03, $active-tertiary);

    &:hover {
      color: $inverse-01;
    }

    &:disabled,
    &:hover:disabled,
    &:focus:disabled,
    &.#{$prefix}--btn--disabled,
    &.#{$prefix}--btn--disabled:hover,
    &.#{$prefix}--btn--disabled:focus {
      background: transparent;
      color: $disabled;

      & > .#{$prefix}--btn__icon {
        fill: $disabled;
      }
    }

    &:hover > .#{$prefix}--btn__icon {
      fill: $inverse-01;
    }
  }

  .#{$prefix}--btn--ghost {
    @include button-theme--x(transparent, transparent, $interactive-04, $hover-ui, $interactive-04, $active-ui);
    min-width: auto;
    padding: rem(14px) rem(16px);

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

    &:hover,
    &:active {
      color: $ibm-color__blue-70;

      .#{$prefix}--btn__icon {
        fill: $ibm-color__blue-70;
      }
    }

    &:active {
      background-color: $active-ui;
    }

    &:disabled,
    &:hover:disabled,
    &:focus:disabled,
    &.#{$prefix}--btn--disabled,
    &.#{$prefix}--btn--disabled:hover,
    &.#{$prefix}--btn--disabled:focus {
      color: $disabled;
      background: transparent;
      border-color: transparent;

      .#{$prefix}--btn__icon {
        fill: $disabled;
      }
    }

    &.#{$prefix}--btn--sm {
      padding: 0.375rem 1rem;
    }
  }

  .#{$prefix}--btn--danger {
    @include button-theme--x($support-01, $support-01, $text-04, $hover-danger, $icon-03, $active-danger);

    &:hover {
      color: $text-04;
      border: $button-border-width solid transparent;
    }
  }

  .#{$prefix}--btn--sm {
    min-height: rem(32px);
    padding: $button-padding-sm;
  }

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

@include exports('button') {
  @if feature-flag-enabled('components-x') {
    @include button--x;
  } @else {
    @include button;
  }
}