//
// 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/css--helpers';
@import '../../globals/scss/tooltip';
@import '../../globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
@import 'mixins';
@import '../../globals/scss/css--reset';

/// Button styles
/// @access private
/// @group button
@mixin button {
  .#{$prefix}--btn {
    @include button-base;
  }

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

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

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

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

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

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

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

    &:focus {
      background-color: $interactive-03;
      color: $inverse-01;
    }

    &:active {
      border-color: transparent;
      background-color: $active-tertiary;
      color: $inverse-01;
    }

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

  .#{$prefix}--btn--ghost {
    @include button-theme(
      transparent,
      transparent,
      $link-01,
      $hover-ui,
      currentColor,
      $active-ui
    );

    padding: $button-padding-ghost;

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

    &:hover,
    &:active {
      color: $hover-primary-text;
    }

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

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

    &.#{$prefix}--btn--sm {
      padding: $button-padding-ghost-sm;
    }

    // V11: remove field
    &.#{$prefix}--btn--field,
    &.#{$prefix}--btn--md {
      padding: $button-padding-ghost-field;
    }
  }

  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
    @include tooltip--trigger('icon', 'bottom');

    svg,
    &:hover svg,
    &:focus svg {
      fill: currentColor;
    }

    &.#{$prefix}--btn--disabled.#{$prefix}--tooltip--a11y::before,
    &.#{$prefix}--btn--disabled.#{$prefix}--tooltip--a11y::after,
    &.#{$prefix}--btn--disabled .#{$prefix}--assistive-text {
      overflow: hidden;
      margin: -1px;
      clip: rect(0, 0, 0, 0);
      opacity: 0;
    }
  }

  // Allow pointer events on tooltip when tooltip is visible
  .#{$prefix}--btn.#{$prefix}--btn--icon-only:not(.#{$prefix}--tooltip--hidden)
    .#{$prefix}--assistive-text {
    pointer-events: all;
  }

  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
    border-color: $focus;
  }

  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:active:not([disabled]) {
    border-color: transparent;
  }

  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus
    svg {
    outline-color: transparent;
  }

  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger[disabled]:hover,
  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger[disabled]:focus,
  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger[disabled]:active {
    cursor: not-allowed;
    fill: $disabled-03;
  }

  .#{$prefix}--tooltip__trigger.#{$prefix}--btn--icon-only--top {
    @include tooltip--trigger('icon', 'top');
    @include tooltip--placement('icon', 'top', 'center');

    &.#{$prefix}--tooltip--align-start {
      @include tooltip--placement('icon', 'top', 'start');
    }

    &.#{$prefix}--tooltip--align-center {
      @include tooltip--placement('icon', 'top', 'center');
    }

    &.#{$prefix}--tooltip--align-end {
      @include tooltip--placement('icon', 'top', 'end');
    }
  }

  .#{$prefix}--tooltip__trigger.#{$prefix}--btn--icon-only--right {
    @include tooltip--trigger('icon', 'right');
    @include tooltip--placement('icon', 'right', 'center');

    &.#{$prefix}--tooltip--align-start {
      @include tooltip--placement('icon', 'right', 'start');
    }

    &.#{$prefix}--tooltip--align-center {
      @include tooltip--placement('icon', 'right', 'center');
    }

    &.#{$prefix}--tooltip--align-end {
      @include tooltip--placement('icon', 'right', 'end');
    }
  }

  .#{$prefix}--tooltip__trigger.#{$prefix}--btn--icon-only--bottom {
    @include tooltip--trigger('icon', 'bottom');
    @include tooltip--placement('icon', 'bottom', 'center');

    &.#{$prefix}--tooltip--align-start {
      @include tooltip--placement('icon', 'bottom', 'start');
    }

    &.#{$prefix}--tooltip--align-center {
      @include tooltip--placement('icon', 'bottom', 'center');
    }

    &.#{$prefix}--tooltip--align-end {
      @include tooltip--placement('icon', 'bottom', 'end');
    }
  }

  .#{$prefix}--tooltip__trigger.#{$prefix}--btn--icon-only--left {
    @include tooltip--trigger('icon', 'left');
    @include tooltip--placement('icon', 'left', 'center');

    &.#{$prefix}--tooltip--align-start {
      @include tooltip--placement('icon', 'left', 'start');
    }

    &.#{$prefix}--tooltip--align-center {
      @include tooltip--placement('icon', 'left', 'center');
    }

    &.#{$prefix}--tooltip--align-end {
      @include tooltip--placement('icon', 'left', 'end');
    }
  }

  .#{$prefix}--btn--icon-only {
    padding-right: rem(15px);
    padding-left: rem(15px);

    .#{$prefix}--btn__icon {
      position: static;
    }

    &.#{$prefix}--btn--ghost .#{$prefix}--btn__icon,
    &.#{$prefix}--btn--danger--ghost .#{$prefix}--btn__icon {
      margin: 0;
    }
  }

  .#{$prefix}--btn--icon-only.#{$prefix}--btn--selected {
    background: $selected-ui;
  }

  .#{$prefix}--btn path[data-icon-path='inner-path'] {
    fill: none;
  }

  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only
    .#{$prefix}--btn__icon
    path:not([data-icon-path]):not([fill='none']),
  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon {
    fill: $icon-01;
  }

  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled]
    .#{$prefix}--btn__icon
    path:not([data-icon-path]):not([fill='none']),
  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled]
    .#{$prefix}--btn__icon,
  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--btn--ghost[disabled]:hover
    .#{$prefix}--btn__icon {
    fill: $disabled-03;
  }

  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only[disabled] {
    cursor: not-allowed;
  }

  // V11: remove field
  .#{$prefix}--btn--field.#{$prefix}--btn--icon-only,
  .#{$prefix}--btn--md.#{$prefix}--btn--icon-only {
    padding-right: rem(11px);
    padding-left: rem(11px);
  }

  .#{$prefix}--btn--sm.#{$prefix}--btn--icon-only {
    padding-right: rem(7px);
    padding-left: rem(7px);
  }

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

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

    // TODO: deprecate single dash tertiary
    &-tertiary,
    &--tertiary {
      @include button-theme(
        transparent,
        $danger-02,
        $danger-02,
        $hover-danger,
        currentColor,
        $active-danger
      );

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

      &:focus {
        background-color: $danger-01;
        color: $text-04;
      }

      &:active {
        border-color: $active-danger;
        color: $text-04;
      }

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

    // TODO: deprecate single dash ghost
    &-ghost,
    &--ghost {
      @include button-theme(
        transparent,
        transparent,
        $danger-02,
        $hover-danger,
        currentColor,
        $active-danger
      );

      padding: $button-padding-ghost;

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

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

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

      &.#{$prefix}--btn--sm {
        padding: $button-padding-ghost-sm;
      }

      // V11: Remove field
      &.#{$prefix}--btn--field,
      &.#{$prefix}--btn--md {
        padding: $button-padding-ghost-field;
      }
    }
  }

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

  // V11: change xl to 2xl
  .#{$prefix}--btn--xl:not(.#{$prefix}--btn--icon-only) {
    @include button-padding-large;

    min-height: rem(80px);
  }

  // V11: change lg to xl
  .#{$prefix}--btn--lg:not(.#{$prefix}--btn--icon-only) {
    @include button-padding-large;

    min-height: rem(64px);
  }

  // V11: Remove field
  .#{$prefix}--btn--field,
  .#{$prefix}--btn--md {
    min-height: rem(40px);
    padding: $button-padding-field;
  }

  //expressive styles
  .#{$prefix}--btn--expressive {
    @include carbon--type-style('body-short-02');

    min-height: 3rem;
  }

  .#{$prefix}--btn--icon-only.#{$prefix}--btn--expressive {
    padding: 12px 13px;
    //default size 48px
  }

  .#{$prefix}--btn.#{$prefix}--btn--expressive .#{$prefix}--btn__icon {
    width: rem(20px);
    height: rem(20px);
  }

  .#{$prefix}--btn-set .#{$prefix}--btn.#{$prefix}--btn--expressive {
    max-width: rem(320px);
  }

  // Skeleton State
  .#{$prefix}--btn.#{$prefix}--skeleton {
    @include skeleton;

    width: rem(150px);
  }

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

  .#{$prefix}--btn-set--stacked {
    flex-direction: column;
  }

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

    &:not(:focus) {
      box-shadow: rem(-1px) 0 0 0 $button-separator;
    }

    &:first-of-type:not(:focus) {
      box-shadow: inherit;
    }
  }

  .#{$prefix}--btn-set .#{$prefix}--btn:focus + .#{$prefix}--btn {
    box-shadow: inherit;
  }

  .#{$prefix}--btn-set--stacked .#{$prefix}--btn:not(:focus) {
    box-shadow: 0 rem(-1px) 0 0 $button-separator;
  }

  .#{$prefix}--btn-set--stacked .#{$prefix}--btn:first-of-type:not(:focus) {
    box-shadow: inherit;
  }

  .#{$prefix}--btn-set .#{$prefix}--btn.#{$prefix}--btn--disabled {
    box-shadow: rem(-1px) 0 0 0 $disabled-03;

    &:first-of-type {
      box-shadow: none;
    }
  }

  .#{$prefix}--btn-set--stacked .#{$prefix}--btn.#{$prefix}--btn--disabled {
    box-shadow: 0 rem(-1px) 0 0 $disabled-03;

    &:first-of-type {
      box-shadow: none;
    }
  }

  // Windows HCM fix
  .#{$prefix}--btn:focus {
    @include high-contrast-mode('focus');
  }

  // Windows HCM fix
  // stylelint-disable-next-line no-duplicate-selectors
  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only
    .#{$prefix}--btn__icon
    path:not([data-icon-path]):not([fill='none']),
  .#{$prefix}--btn--ghost.#{$prefix}--btn--icon-only .#{$prefix}--btn__icon {
    @include high-contrast-mode('icon-fill');
  }
}

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