// Copyright 2015 Palantir Technologies, Inc. All rights reserved.
// Licensed under the Apache License, Version 2.0.

@import "../../common/variables";
@import "../../common/variables-extended";
@import "./common";

/*
Tags

Markup:
<span class="#{$ns}-tag {{.modifier}}">125</span>
<span class="#{$ns}-tag {{.modifier}}">Done</span>
<span class="#{$ns}-tag {{.modifier}}">
  Tracking
  <button class="#{$ns}-tag-remove"></button>
</span>
<span class="#{$ns}-tag {{.modifier}}">
  Crushed
  <button class="#{$ns}-tag-remove"></button>
</span>
<span class="#{$ns}-tag {{.modifier}}">
  A rather long string of text that wraps to multiple lines
  demonstrates the position of the remove button.
  <button class="#{$ns}-tag-remove"></button>
</span>

.#{$ns}-large - Large
.#{$ns}-minimal - Minimal appearance
.#{$ns}-round - Rounded corners, ideal for badges
.#{$ns}-interactive - Hover and active effects
.#{$ns}-intent-primary - Primary intent
.#{$ns}-intent-success - Success intent
.#{$ns}-intent-warning - Warning intent
.#{$ns}-intent-danger  - Danger intent

Styleguide tag
*/

$tag-intent-colors: (
  "primary": ($pt-intent-primary, $blue2, $blue1, $white),
  "success": ($pt-intent-success, $green2, $green1, $white),
  "warning": ($orange5, $orange4, $orange3, $pt-text-color),
  "danger": ($pt-intent-danger, $red2, $red1, $white)
) !default;

$minimal-tag-intent-colors: (
  "primary": ($pt-intent-primary, $blue2, $blue1),
  "success": ($pt-intent-success, $green2, $green1),
  "warning": ($pt-intent-warning, $orange2, $orange1),
  "danger": ($pt-intent-danger, $red2, $red1)
) !default;

$minimal-dark-tag-intent-colors: (
  "primary": ($pt-intent-primary, $blue5, $blue6),
  "success": ($pt-intent-success, $green5, $green6),
  "warning": ($pt-intent-warning, $orange5, $orange6),
  "danger": ($pt-intent-danger, $red5, $red6)
) !default;

.#{$ns}-tag {
  @include pt-tag();

  &.#{$ns}-large,
  .#{$ns}-large & {
    @include pt-tag-large();
  }

  @each $intent, $colors in $tag-intent-colors {
    &.#{$ns}-intent-#{$intent} {
      @include pt-tag-intent($colors...);
    }
  }

  &.#{$ns}-fill {
    display: flex;
    width: 100%;
  }

  &.#{$ns}-minimal {
    @include pt-tag-minimal();

    @each $intent, $colors in $minimal-tag-intent-colors {
      &.#{$ns}-intent-#{$intent} {
        @include pt-tag-minimal-intent($colors...);
      }
    }

    @each $intent, $colors in $minimal-dark-tag-intent-colors {
      &.#{$ns}-intent-#{$intent} {
        .#{$ns}-dark & {
          @include pt-tag-minimal-dark-intent($colors...);
        }
      }
    }
  }
}

.#{$ns}-tag-remove {
  @include pt-tag-remove();
}
