/*
 * Backpack - Skyscanner's Design System
 *
 * Copyright 2016-2021 Skyscanner Ltd
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *   http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import '../bonds';
@import 'typography';

////
/// @group buttons
////

/// Standard button.
///
/// @example scss
///   .selector {
///     @include bpk-button();
///   }

$bpk-spacing-v2: true;

@mixin bpk-button {
  display: inline-block;
  margin: 0;
  padding: bpk-spacing-md() bpk-spacing-base();
  border: 0;
  border-radius: $bpk-button-border-radius;
  background-image: linear-gradient(
    -180deg,
    $bpk-button-gradient-start-color 0%,
    $bpk-button-gradient-end-color 100%
  );
  background-image: linear-gradient(
    -180deg,
    var(
        --bpk-button-primary-gradient-start-color,
        $bpk-button-gradient-start-color
      )
      0%,
    var(--bpk-button-primary-gradient-end-color, $bpk-button-gradient-end-color)
      100%
  );
  font-size: $bpk-button-font-size;
  font-weight: $bpk-button-font-weight;
  line-height: $bpk-button-line-height;
  text-align: $bpk-button-text-align;
  text-decoration: none;
  box-shadow: $bpk-button-box-shadow;
  cursor: pointer;
  vertical-align: middle;
  user-select: none;

  @include bpk-themeable-property(
    color,
    --bpk-button-primary-text-color,
    $bpk-button-color
  );
  @include bpk-themeable-property(
    background-color,
    --bpk-button-primary-background-color,
    $bpk-button-background-color
  );
  @include bpk-themeable-property(
    font-size,
    --bpk-button-font-size,
    $bpk-button-font-size
  );

  @include bpk-hover {
    background-image: $bpk-button-hover-background-image;
    box-shadow: $bpk-button-hover-box-shadow;

    @include bpk-themeable-property(
      color,
      --bpk-button-primary-hover-text-color,
      $bpk-button-hover-color
    );
    @include bpk-themeable-property(
      background-color,
      --bpk-button-primary-hover-background-color,
      $bpk-button-hover-background-color
    );
  }

  &:active {
    background-image: $bpk-button-active-background-image;
    box-shadow: $bpk-button-active-box-shadow;

    @include bpk-themeable-property(
      color,
      --bpk-button-primary-active-text-color,
      $bpk-button-active-color
    );
    @include bpk-themeable-property(
      background-color,
      --bpk-button-primary-active-background-color,
      $bpk-button-active-background-color
    );
  }

  &:disabled {
    background-color: $bpk-button-disabled-background-color;
    background-image: $bpk-button-disabled-background-image;
    color: $bpk-button-disabled-color;
    box-shadow: $bpk-button-disabled-box-shadow;
    cursor: not-allowed;
  }
}

/// Large button. Modifies the bpk-button mixin.
///
/// @require {mixin} bpk-button
///
/// @example scss
///   .selector {
///     @include bpk-button();
///     @include bpk-button--large();
///   }

@mixin bpk-button--large {
  padding: bpk-spacing-md() bpk-spacing-lg();
  border-radius: $bpk-button-border-radius;
  font-size: $bpk-button-large-font-size;
  line-height: $bpk-button-large-line-height;
}

/// Secondary button. Modifies the bpk-button mixin.
///
/// @require {mixin} bpk-button
///
/// @example scss
///   .selector {
///     @include bpk-button();
///     @include bpk-button--secondary();
///   }

@mixin bpk-button--secondary {
  background-image: $bpk-button-secondary-background-image;

  @include bpk-themeable-property(
    color,
    --bpk-button-secondary-text-color,
    $bpk-button-secondary-color
  );
  @include bpk-themeable-property(
    background-color,
    --bpk-button-secondary-background-color,
    $bpk-button-secondary-background-color
  );
  @include bpk-border-lg($bpk-button-secondary-border-color);
  @include bpk-border-lg(
    var(--bpk-button-secondary-border-color, $bpk-button-secondary-border-color)
  );

  @include bpk-hover {
    background-image: $bpk-button-secondary-hover-background-image;
    box-shadow: $bpk-button-secondary-hover-box-shadow;

    @include bpk-themeable-property(
      color,
      --bpk-button-secondary-hover-text-color,
      $bpk-button-secondary-hover-color
    );
    @include bpk-themeable-property(
      background-color,
      --bpk-button-secondary-hover-background-color,
      $bpk-button-secondary-hover-background-color
    );
    @include bpk-border-lg($bpk-button-secondary-hover-border-color);
    @include bpk-border-lg(
      var(
        --bpk-button-secondary-hover-border-color,
        $bpk-button-secondary-hover-border-color
      )
    );
  }

  &:active {
    background-image: $bpk-button-secondary-active-background-image;
    box-shadow: $bpk-button-secondary-active-box-shadow;

    @include bpk-themeable-property(
      color,
      --bpk-button-secondary-active-text-color,
      $bpk-button-secondary-active-color
    );
    @include bpk-themeable-property(
      background-color,
      --bpk-button-secondary-active-background-color,
      $bpk-button-secondary-active-background-color
    );
    @include bpk-border-xl($bpk-button-secondary-active-border-color);
    @include bpk-border-xl(
      var(
        --bpk-button-secondary-active-border-color,
        $bpk-button-secondary-active-border-color
      )
    );
  }

  &:disabled {
    background-color: $bpk-button-secondary-disabled-background-color;
    background-image: $bpk-button-secondary-disabled-background-image;
    color: $bpk-button-secondary-disabled-color;
    box-shadow: $bpk-button-secondary-disabled-box-shadow;
  }
}

/// Destructive button. Modifies the bpk-button & bpk-button--secondary mixins.
///
/// @require {mixin} bpk-button
/// @require {mixin} bpk-button--secondary
///
/// @example scss
///   .selector {
///     @include bpk-button();
///     @include bpk-button--secondary();
///     @include bpk-button--destructive();
///   }

@mixin bpk-button--destructive {
  @include bpk-themeable-property(
    color,
    --bpk-button-destructive-text-color,
    $bpk-button-destructive-color
  );
  @include bpk-themeable-property(
    background-color,
    --bpk-button-destructive-background-color,
    $bpk-button-destructive-background-color
  );
  @include bpk-border-lg($bpk-button-destructive-border-color);
  @include bpk-border-lg(
    var(
      --bpk-button-destructive-border-color,
      $bpk-button-destructive-border-color
    )
  );

  @include bpk-hover {
    background-image: $bpk-button-destructive-hover-background-image;
    box-shadow: $bpk-button-destructive-hover-box-shadow;

    @include bpk-themeable-property(
      color,
      --bpk-button-destructive-hover-text-color,
      $bpk-button-destructive-hover-color
    );
    @include bpk-themeable-property(
      background-color,
      --bpk-button-destructive-hover-background-color,
      $bpk-button-destructive-hover-background-color
    );
    @include bpk-border-lg($bpk-button-destructive-hover-border-color);
    @include bpk-border-lg(
      var(
        --bpk-button-destructive-hover-border-color,
        $bpk-button-destructive-hover-border-color
      )
    );
  }

  &:active {
    box-shadow: $bpk-button-destructive-active-box-shadow;

    @include bpk-themeable-property(
      color,
      --bpk-button-destructive-active-text-color,
      $bpk-button-destructive-active-color
    );
    @include bpk-themeable-property(
      background-color,
      --bpk-button-destructive-active-background-color,
      $bpk-button-destructive-active-background-color
    );
    @include bpk-border-xl($bpk-button-destructive-active-border-color);
    @include bpk-border-xl(
      var(
        --bpk-button-destructive-active-border-color,
        $bpk-button-destructive-active-border-color
      )
    );
  }

  &:disabled {
    background-color: $bpk-button-destructive-disabled-background-color;
    background-image: $bpk-button-destructive-disabled-background-image;
    color: $bpk-button-destructive-disabled-color;
    box-shadow: $bpk-button-destructive-disabled-box-shadow;
  }
}

/// Outline button. Modifies the bpk-button & bpk-button--secondary mixins.
///
/// @require {mixin} bpk-button
/// @require {mixin} bpk-button--secondary
///
/// @example scss
///   .selector {
///     @include bpk-button();
///     @include bpk-button--outline();
///   }

@mixin bpk-button--outline {
  background-color: $bpk-button-outline-background-color;
  background-image: $bpk-button-outline-background-image;
  color: $bpk-button-outline-color;

  @include bpk-border-lg($bpk-button-outline-border-color);

  @include bpk-hover {
    background-color: $bpk-button-outline-hover-background-color;

    @include bpk-border-lg(
      rgba(
        $bpk-button-outline-hover-border-color,
        $bpk-button-outline-hover-border-opacity
      )
    );
  }

  &:active {
    background-color: $bpk-button-outline-active-background-color;

    @include bpk-border-xl($bpk-button-outline-active-border-color);
  }

  &:disabled {
    background-color: $bpk-button-outline-disabled-background-color;
    background-image: $bpk-button-outline-disabled-background-image;
    color: $bpk-button-outline-disabled-color;
    box-shadow: $bpk-button-outline-disabled-box-shadow;
  }
}

/// Selected button. Modifies the bpk-button mixin.
///
/// @require {mixin} bpk-button
///
/// @example scss
///   .selector {
///     @include bpk-button();
///     @include bpk-button--selected();
///   }
///
/// @deprecated Use a checkbox or standard button instead.

@mixin bpk-button--selected {
  background-color: $bpk-button-selected-background-color;
  background-image: $bpk-button-selected-background-image;
  color: $bpk-button-selected-color;
  box-shadow: $bpk-button-selected-box-shadow;

  @include bpk-hover {
    background-color: $bpk-button-selected-hover-background-color;
    background-image: $bpk-button-selected-hover-background-image;
    color: $bpk-button-selected-hover-color;
    box-shadow: $bpk-button-selected-hover-box-shadow;
  }

  &:active {
    background-color: $bpk-button-selected-active-background-color;
    background-image: $bpk-button-selected-active-background-image;
    color: $bpk-button-selected-active-color;
    box-shadow: $bpk-button-selected-active-box-shadow;
  }

  &:disabled {
    box-shadow: $bpk-button-selected-disabled-box-shadow;
  }
}

/// Link-style button. Modifies the bpk-button mixin.
///
/// @require {mixin} bpk-button
///
/// @example scss
///   .selector {
///     @include bpk-button();
///     @include bpk-button--link();
///   }

@mixin bpk-button--link {
  padding: 0;
  border-radius: 0;
  background: none; /* stylelint-disable-line order/order, order/properties-order */
  font-weight: normal;
  box-shadow: none;

  @include bpk-link;

  @include bpk-hover {
    background: none;
  }

  &:active {
    background: none;
  }

  &:disabled {
    background: none;
    color: $bpk-color-sky-gray-tint-04;
    text-decoration: none;
  }
}

/// Padded button. Modifies the bpk-button mixin.
///
/// @require {mixin} bpk-link
///
/// @example scss
///   .selector {
///     @include bpk-button();
///     @include bpk-button--link();
///     @include bpk-button--padded();
///   }

@mixin bpk-button--padded {
  padding: bpk-spacing-md() bpk-spacing-base();
}

/// Icon-only button. Modifies the bpk-button mixin.
///
/// @require {mixin} bpk-button
///
/// @example scss
///   .selector {
///     @include bpk-button();
///     @include bpk-button--icon-only();
///   }

@mixin bpk-button--icon-only {
  padding: bpk-spacing-md() ($bpk-one-pixel-rem * 11);
  border-radius: 50%;
}

/// Large icon-only button. Modifies the bpk-button & bpk-button--large mixins.
///
/// @require {mixin} bpk-button
/// @require {mixin} bpk-button--large
///
/// @example scss
///   .selector {
///     @include bpk-button();
///     @include bpk-button--large();
///     @include bpk-button--large-icon-only();
///   }

@mixin bpk-button--large-icon-only {
  padding: bpk-spacing-md() ($bpk-one-pixel-rem * 11);
  border-radius: 50%;
}

/// Featured button. Modifies the bpk-button
///
/// @require {mixin} bpk-button
/// @require {mixin} bpk-button--large
///
/// @example scss
///   .selector {
///     @include bpk-button();
///     @include bpk-button--featured();
///   }

@mixin bpk-button--featured {
  background-image: $bpk-button-featured-background-image;
  background-image: linear-gradient(
    -180deg,
    var(
        --bpk-button-featured-gradient-start-color,
        $bpk-button-featured-background-image
      )
      0%,
    var(
        --bpk-button-featured-gradient-end-color,
        $bpk-button-featured-background-image
      )
      100%
  );

  @include bpk-themeable-property(
    color,
    --bpk-button-featured-text-color,
    $bpk-button-featured-color
  );
  @include bpk-themeable-property(
    background-color,
    --bpk-button-featured-background-color,
    $bpk-button-featured-background-color
  );

  @include bpk-hover {
    background-image: $bpk-button-featured-hover-background-image;
    box-shadow: $bpk-button-featured-hover-box-shadow;

    @include bpk-themeable-property(
      color,
      --bpk-button-featured-hover-text-color,
      $bpk-button-featured-hover-color
    );
    @include bpk-themeable-property(
      background-color,
      --bpk-button-featured-hover-background-color,
      $bpk-button-featured-hover-background-color
    );
  }

  &:active {
    background-image: $bpk-button-featured-active-background-image;
    box-shadow: $bpk-button-featured-active-box-shadow;

    @include bpk-themeable-property(
      color,
      --bpk-button-featured-active-text-color,
      $bpk-button-featured-active-color
    );
    @include bpk-themeable-property(
      background-color,
      --bpk-button-featured-active-background-color,
      $bpk-button-featured-active-background-color
    );
  }

  &:disabled {
    background-color: $bpk-button-featured-disabled-background-color;
    background-image: $bpk-button-featured-disabled-background-image;
  }
}