/*
 * 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 badges
////

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

@mixin bpk-badge {
  display: inline-flex;
  padding: $bpk-badge-padding-y $bpk-badge-padding-x;
  align-items: center;
  color: $bpk-font-color-base;

  @include bpk-themeable-property(
    background-color,
    --bpk-badge-background-color,
    $bpk-badge-background-color
  );
  @include bpk-border-radius-xs;
  @include bpk-text;
  @include bpk-text--xs;
  @include bpk-text--bold;

  // // HACK: Icons have an inline style attribute setting the height and width.
  // // so the only way to override this in CSS is to use !important.
  > svg {
    /* stylelint-disable declaration-no-important */
    width: 16 * $bpk-one-pixel-rem !important;
    height: 16 * $bpk-one-pixel-rem !important;
    /* stylelint-enable declaration-no-important */
    margin-top: $bpk-one-pixel-rem * 2;
    margin-bottom: $bpk-one-pixel-rem * 2;
  }
}
/// Centered badge. Modifies the bpk-badge mixin.
///
/// @require {mixin} bpk-badge
///
/// @example scss
///   .selector {
///     @include bpk-badge();
///     @include bpk-badge--centered();
///   }

@mixin bpk-badge--centered {
  vertical-align: $bpk-badge-centered-vertical-align;
}

/// Right-docked badge. Modifies the bpk-badge mixin.
///
/// @require {mixin} bpk-badge
///
/// @example scss
///   .selector {
///     @include bpk-badge();
///     @include bpk-badge--docked-right();
///   }

@mixin bpk-badge--docked-right {
  position: absolute;
  top: 0;
  right: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;

  @include bpk-rtl {
    right: inherit;
    left: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: $bpk-border-radius-xs;
  }
}

/// Left-docked badge. Modifies the bpk-badge mixin.
///
/// @require {mixin} bpk-badge
///
/// @example scss
///   .selector {
///     @include bpk-badge();
///     @include bpk-badge--docked-left();
///   }

@mixin bpk-badge--docked-left {
  position: absolute;
  top: 0;
  left: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 0;

  @include bpk-rtl {
    right: 0;
    left: inherit;
    border-bottom-left-radius: $bpk-border-radius-xs;
    border-bottom-right-radius: 0;
  }
}

/// Success badge. Modifies the bpk-badge mixin.
///
/// @require {mixin} bpk-badge
///
/// @example scss
///   .selector {
///     @include bpk-badge();
///     @include bpk-badge--success();
///   }

@mixin bpk-badge--success {
  @include bpk-themeable-property(
    background-color,
    --bpk-badge-success-background-color,
    $bpk-color-glencoe
  );
}

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

@mixin bpk-badge--destructive {
  color: $bpk-color-white;
  fill: $bpk-color-white;

  @include bpk-themeable-property(
    background-color,
    --bpk-badge-destructive-background-color,
    $bpk-color-panjin
  );
}

/// Light badge. Modifies the bpk-badge mixin.
///
/// @require {mixin} bpk-badge
///
/// @example scss
///   .selector {
///     @include bpk-badge();
///     @include bpk-badge--light();
///   }

@mixin bpk-badge--light {
  background-color: $bpk-color-sky-gray-tint-07;
  fill: $bpk-color-sky-gray;
}

/// Inverse badge. Modifies the bpk-badge mixin.
///
/// @require {mixin} bpk-badge
///
/// @example scss
///   .selector {
///     @include bpk-badge();
///     @include bpk-badge--inverse();
///   }

@mixin bpk-badge--inverse {
  background-color: $bpk-color-white;
  fill: $bpk-color-sky-gray;
}

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

@mixin bpk-badge--outline {
  background-color: transparent;
  color: $bpk-color-white;
  box-shadow: inset 0 0 0 $bpk-border-size-sm $bpk-color-white;
  fill: $bpk-color-white;
}