// Copyright (c) 2016-2019 VMware, Inc. All Rights Reserved.
// This software is released under MIT license.
// The full license information can be found in LICENSE in the root directory of this project.

@function getActiveWidthBoxShadowTop($type: default) {
  @if type == primary {
    @return 1px;
  }

  @if type == outline-success {
    @return 1px;
  }

  @if type == outline-danger {
    @return 1px;
  }

  @if type == link {
    @return 0;
  }

  @if type == inverse {
    @return 1px;
  }

  @return 2px;
}

@function getSassButtonColor($type: default, $property: null) {
  @if $property == null {
    @return null;
  }

  @if $type == default {
    @return lookupFromDefaultButtonColors($property);
  }

  @if $type == default-outline {
    @return lookupFromDefaultOutlineButtonColors($property);
  }

  @if $type == primary {
    @return lookupFromPrimaryButtonColors($property);
  }

  @if $type == success {
    @return lookupFromSuccessButtonColors($property);
  }

  @if $type == success-outline {
    @return lookupFromSuccessOutlineButtonColors($property);
  }

  @if $type == danger {
    @return lookupFromDangerButtonColors($property);
  }

  @if $type == danger-outline {
    @return lookupFromDangerOutlineButtonColors($property);
  }

  @if $type == link {
    @return lookupFromLinkButtonColors($property);
  }

  @if $type == inverse {
    @return lookupFromInverseButtonColors($property);
  }

  @if $type == icon {
    @return lookupFromIconButtonColors($property);
  }

  @return null;
}

@mixin populateButtonProperties($button-type: default) {
  border-color: getSassButtonColor($button-type, border-color);
  background-color: getSassButtonColor($button-type, bg-color);
  color: getSassButtonColor($button-type, color);
  transition-property: color, background-color, border-color, box-shadow;
  transition-duration: 0.15s, 0.15s, 0.15s, 0.15s;
  transition-timing-function: ease-in-out, ease-in-out, ease-in-out, ease-in-out;
  outline: none;
  //To override the visited state of anchor links styled as buttons
  &:visited {
    color: getSassButtonColor($button-type, color);
  }

  &:hover {
    background-color: getSassButtonColor($button-type, hover-bg-color);
    color: getSassButtonColor($button-type, hover-color);
  }
  &:focus {
    @if $button-type == link {
      box-shadow: none;
    } @else {
      box-shadow: 0
        0
        0
        0.1rem
        rgba(getSassButtonColor($button-type, border-color),0.5);
    }
  }
  &:active {
    @if $button-type == default {
      color: white;
    }
    @if $button-type == link {
      box-shadow: none;
    } @else {
      // box-shadow: 0
      //   getActiveWidthBoxShadowTop($button-type)
      //   0
      //   0
      //   getSassButtonColor($button-type, box-shadow-color)
      //   inset;
      background-color: getSassButtonColor($button-type, box-shadow-color);
      // color: getSassButtonColor($button-type, bg-color);
    }
  }

  &.disabled,
  &:disabled {
    color: getSassButtonColor($button-type, disabled-color);
    cursor: not-allowed;
    opacity: 0.4;
    background-color: getSassButtonColor($button-type, disabled-bg-color);
    border-color: getSassButtonColor($button-type, disabled-border-color);
    box-shadow: none;
  }
}

@mixin btn-checked-styles($button-type: default, $type: checkbox) {
  // add semantic prop: group-checked-font-color
  input[type='#{$type}']:checked + label {
    background-color: getSassButtonColor($button-type, checked-bg-color);
    color: getSassButtonColor($button-type, checked-color);
  }
}

@mixin btn-nowrap() {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

@mixin btn-min-max-widths() {
  min-width: 3rem;
  max-width: 15rem;
}

@mixin btn-text-properties() {
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  vertical-align: middle;

  &:hover {
    text-decoration: none;
  }
}

@mixin btn-default-border-styles() {
  border-radius: $clr-btn-border-radius;
  border: $clr-btn-border-width solid;
}

@mixin btn-appearance() {
  cursor: pointer;
  display: inline-block;

  // Overrides a Fix for IOS in BS4 _normalize.scss (~ln 330)
  // `!important` is to override specificity in this instance
  // But we wanted to preserve the normalize fix in non-Clarity buttons for iOS
  -webkit-appearance: none !important;
}

@mixin generateButton() {
  @include btn-appearance();
  @include btn-default-border-styles();
  @include btn-min-max-widths();
  @include btn-nowrap();
  @include btn-text-properties();
}

@include exports('buttons.clarity') {
  .btn {
    @include generateButton();
    @include populateButtonProperties(default);
    line-height: $clr-btn-appearance-form-line-height;
    letter-spacing: $clr-btn-appearance-form-letter-spacing;
    font-size: $clr-btn-appearance-form-font-size;
    font-weight: $clr-btn-appearance-form-font-weight;
    height: $clr-btn-appearance-form-height;
    padding: $clr-btn-appearance-form-padding;
  }

  //Clarity Buttons
  .btn-group > .btn,
  .btn {
    clr-icon {
      transform: translate3d(0rem, -2 * $clr-rem-1px, 0);
    }
  }

  //.btn-outline-<state> is the new BS4 naming convention. We are using both for now
  // TODO: Refactor these classnames when the standard clarity naming convention is set.
  // This is a breaking change and will need an upgrade path so users know how to easily migrate to the new
  // version.
  .btn.btn-secondary,
  .btn.btn-info,
  .btn.btn-outline,
  .btn.btn-primary-outline,
  .btn.btn-secondary-outline,
  .btn.btn-outline-primary,
  .btn.btn-outline-secondary,
  .btn.btn-info-outline,
  .btn-secondary .btn,
  .btn-info .btn,
  .btn-outline .btn,
  .btn-primary-outline .btn,
  .btn-secondary-outline .btn,
  .btn-outline-primary .btn,
  .btn-outline-secondary .btn,
  .btn-info-outline .btn,
  .btn-outline-info .btn {
    @include populateButtonProperties(default);
  }

  .btn.btn-primary,
  .btn-primary .btn {
    @include populateButtonProperties(primary);
  }

  .btn.btn-success,
  .btn-success .btn {
    @include populateButtonProperties(success);
  }

  .btn.btn-danger,
  .btn.btn-warning,
  .btn-danger .btn,
  .btn-warning .btn {
    @include populateButtonProperties(danger);
  }

  .btn.btn-outline,
  .btn.btn-outline .btn,
  .btn.btn-info-outline,
  .btn-info-outline .btn,
  .btn.btn-outline-info,
  .btn-outline .btn {
    @include populateButtonProperties(default-outline);
  }

  .btn.btn-success-outline,
  .btn.btn-outline-success,
  .btn-success-outline .btn,
  .btn-outline-success .btn {
    @include populateButtonProperties(success-outline);
  }

  .btn.btn-danger-outline,
  .btn.btn-outline-danger,
  .btn.btn-warning-outline,
  .btn.btn-outline-warning,
  .btn-danger-outline .btn,
  .btn-outline-danger .btn,
  .btn-warning-outline .btn,
  .btn-outline-warning .btn {
    @include populateButtonProperties(danger-outline);
  }

  .btn.btn-link,
  .btn-link .btn {
    @include populateButtonProperties(link);
  }

  .btn.btn-inverse,
  .btn-inverse .btn {
    @include populateButtonProperties(inverse);
  }

  .btn.btn-sm,
  .btn-sm .btn {
    line-height: $clr-btn-appearance-standard-line-height;
    letter-spacing: $clr-btn-appearance-standard-letter-spacing;
    font-size: $clr-btn-appearance-standard-font-size;
    font-weight: $clr-btn-appearance-standard-font-weight;
    height: $clr-btn-appearance-standard-height;
    padding: $clr-btn-appearance-standard-padding;
  }

  .btn-block {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .btn {
    margin: $clr-btn-vertical-margin $clr-btn-horizontal-margin $clr-btn-vertical-margin 0;

    &.btn-link {
      margin: $clr-btn-vertical-margin 0;
    }

    &.btn-link.btn-inverse {
      border-color: transparent;
    }
  }

  //Small Icon Button
  .btn-sm:not(.btn-link) {
    clr-icon {
      width: 0.5rem;
      height: 0.5rem;
      transform: translate3d(0rem, -1 * $clr-rem-1px, 0);
    }
  }

  .btn-icon {
    min-width: 0;

    &.disabled,
    &:disabled {
      color: getSassButtonColor(icon, disabled-color);
    }
  }

  //Overflow
  .btn-group {
    &.btn-primary .dropdown-toggle,
    &.btn-success .dropdown-toggle,
    &.btn-warning .dropdown-toggle,
    &.btn-danger .dropdown-toggle {
      @include populateButtonProperties(primary);
    }

    &.btn-link .dropdown-toggle {
      @include populateButtonProperties(link);
    }

    &.btn-sm .btn-group-overflow > .dropdown-toggle {
      line-height: $clr-btn-appearance-standard-line-height;
      letter-spacing: $clr-btn-appearance-standard-letter-spacing;
      font-size: $clr-btn-appearance-standard-font-size;
      font-weight: $clr-btn-appearance-standard-font-weight;
      height: $clr-btn-appearance-standard-height;
      padding: $clr-btn-appearance-standard-padding;
    }
  }

  //Checkboxes styled as Buttons
  //Radio Buttons styled as Buttons
  .checkbox.btn,
  .checkbox-inline.btn,
  .radio.btn,
  .radio-inline.btn {
    padding: 0;

    label {
      display: block;
      line-height: inherit;
      padding: 0 0.5rem;
      cursor: pointer;
    }
  }

  .checkbox.btn,
  .checkbox-inline.btn {
    input[type='checkbox'] + label::before,
    input[type='checkbox'] + label::after {
      content: none;
    }
  }

  .radio.btn,
  .radio-inline.btn {
    input[type='radio'] + label::before,
    input[type='radio'] + label::after {
      content: none;
    }
  }

  .checkbox.btn,
  .checkbox-inline.btn {
    @include btn-checked-styles();

    label {
      width: 100%;
    }

    //.btn-outline-<state> is the new BS4 naming convention
    //TODO: we support both the previous one and the new one but we will deprecate the old ones from the example in 0.5.0
    &.btn-secondary,
    &.btn-info,
    &.btn-outline,
    &.btn-primary-outline,
    &.btn-secondary-outline,
    &.btn-outline-primary,
    &.btn-outline-secondary,
    &.btn-info-outline,
    &.btn-outline-info {
      @include btn-checked-styles();
    }

    &.btn-primary {
      @include btn-checked-styles(primary);
    }

    &.btn-success {
      @include btn-checked-styles(success);
    }

    &.btn-danger,
    &.btn-warning {
      @include btn-checked-styles(danger);
    }

    &.btn-success-outline,
    &.btn-outline-success {
      @include btn-checked-styles(outline-success);
    }

    &.btn-danger-outline,
    &.btn-outline-danger,
    &.btn-warning-outline,
    &.btn-outline-warning {
      @include btn-checked-styles(outline-danger);
    }

    &.btn-link {
      @include btn-checked-styles(link);
    }

    &.btn-inverse {
      @include btn-checked-styles(inverse);
    }
  }

  .radio.btn,
  .radio.btn {
    @include btn-checked-styles(default, radio);

    label {
      width: 100%;
    }

    //.btn-outline-<state> is the new BS4 naming convention. We are using both for now
    // TODO: Refactor these classnames when the standard clarity naming convention is set.
    // This is a breaking change and will need an upgrade path so users know how to easily migrate to the new
    // version.
    &.btn-secondary,
    &.btn-info,
    &.btn-outline,
    &.btn-primary-outline,
    &.btn-secondary-outline,
    &.btn-outline-primary,
    &.btn-outline-secondary,
    &.btn-info-outline,
    &.btn-outline-info {
      @include btn-checked-styles(default, radio);
    }

    &.btn-primary {
      @include btn-checked-styles(primary, radio);
    }

    &.btn-success {
      @include btn-checked-styles(success, radio);
    }

    &.btn-danger,
    &.btn-warning {
      @include btn-checked-styles(danger, radio);
    }

    &.btn-success-outline,
    &.btn-outline-success {
      @include btn-checked-styles(success-outline, radio);
    }

    &.btn-danger-outline,
    &.btn-outline-danger,
    &.btn-warning-outline,
    &.btn-outline-warning {
      @include btn-checked-styles(danger-outline, radio);
    }

    &.btn-link {
      @include btn-checked-styles(link, radio);
    }

    &.btn-inverse {
      @include btn-checked-styles(inverse, radio);
    }
  }
}