//
// 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/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 {
  // button set styles
  .#{$prefix}--btn-set {
    display: flex;
  }

  .#{$prefix}--btn-set > .#{$prefix}--btn {
    max-width: rem(196px); // 196px 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;

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

  // Reset intrisic 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,
      1px
    );

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

    &:focus {
      color: $text-04;
      background-color: $interactive-03;
    }

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

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

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

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

  .#{$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;

      .#{$prefix}--btn__icon path {
        fill: $hover-primary-text;
      }
    }

    &: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 path {
        fill: $disabled;
      }
    }

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

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

  .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger {
    @include tooltip--trigger('icon', 'bottom');
    outline: $button-outline-width solid transparent;
    outline-offset: -4px;
  }

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

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

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

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

  .#{$prefix}--btn--icon-only,
  .#{$prefix}--btn--sm.#{$prefix}--btn--icon-only,
  .#{$prefix}--btn--field.#{$prefix}--btn--icon-only {
    padding-right: rem(13px);

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

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

  .#{$prefix}--btn--danger {
    @include button-theme(
      // $support-01, TODO: replace with updated token
        #dc222b,
      // $support-01, TODO: replace with updated token
        #dc222b,
      $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;
  }

  .#{$prefix}--btn--field {
    height: 40px;
    min-height: 40px;
    padding: $button-padding-field;
  }

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

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