//
// 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.
//

@use "../../theme" as *;
@use "../../utilities/button-reset";
@use "../../type" as *;
@use "../../motion" as *;
@use "../../config" as *;
@use "../../utilities/component-tokens" as *;
@use "../../utilities/convert" as *;
@use "../../utilities/high-contrast-mode" as *;
@use "../../spacing" as *;
@use "./mixins" as *;
@use "../../utilities/skeleton";

/// Tag styles
/// @access public
/// @group tag
@mixin tag {
  .#{$prefix}--tag {
    @include font-family("sans");
    @include typescale("zeta");
    display: inline-flex;
    align-items: center;
    padding: 0 $spacing-03;
    height: 1.5rem;
    margin: $spacing-01;
    border-radius: calcRem(15px);
    white-space: nowrap;

    &:not(:first-child) {
      margin-left: 0;
    }
    > a {
      text-decoration: none;
      &:hover {
        text-decoration: underline;
      }
    }
  }

  .#{$prefix}--tag--info {
    @include tag-theme(
      $layer-primary,
      #005e8d
    ); // TODO create token for these colors
  }

  // .#{$prefix}--tag--beta {
  //   @include tag-theme($color__gray-1, $color__navy-gray-4);
  // }

  // TODO create new token for support-dark-color

  .#{$prefix}--tag--error {
    @include tag-theme($support-error-background, var(--support-dark-01));
  }

  .#{$prefix}--tag--success {
    @include tag-theme($support-success-background, var(--support-dark-02));
  }

  .#{$prefix}--tag--warning {
    @include tag-theme($support-warning-background, var(--support-dark-03));
  }

  .#{$prefix}--tag--wrap {
    white-space: normal;
  }

  // .#{$prefix}--tag--information {
  //   @include tag-theme(var(--support-light-04), $support-04);
  // }

  // Skeleton state
  // .#{$prefix}--tag.#{$prefix}--skeleton {
  //   @include tag-theme($color__gray-1, $color__navy-gray-4);
  //   width: calcRem(60px);

  //   &:after {
  //     @include skeleton;
  //     content: '';
  //     height: calcRem(6px);
  //     width: 100%;
  //   }
  // }
}

@mixin tag--x {
  .#{$prefix}--tag {
    @include font-family("sans");
    @include typescale("zeta");
    display: inline-flex;
    align-items: center;
    padding: 0 $spacing-03;
    height: 1.5rem;
    margin: $spacing-02;
    border-radius: calcRem(15px);

    &:not(:first-child) {
      margin-left: 0;
    }

    &[disabled] {
      @include tag-theme--x($ibm-colors__gray--10, $ibm-colors__gray--30);
    }
  }

  .#{$prefix}--tag--basic {
    @include tag-theme--x($ibm-colors__gray--10, $ibm-colors__gray--100);
  }

  // Skeleton state TODO
  // .#{$prefix}--tag.#{$prefix}--skeleton {
  //   @include tag-theme--x($color__gray-1, $color__navy-gray-4);
  //   width: calcRem(60px);

  //   &:after {
  //     @include skeleton;
  //     content: '';
  //     height: calcRem(6px);
  //     width: 100%;
  //   }
  // }
}

// @include exports('tag') {
//   @if feature-flag-enabled('components-x') {
//     @include tag--x;
//   } @else {
//     @include tag;
//   }
// }