@import "../base/variables";
@import "../variables/badges";

@import "../mixins/border-radius";
@import "../base/mixins";
// @import "../mixins/box-shadow";
// @import "../mixins/transition";
// @import "../mixins/buttons";
// @import "../mixins/links";
// @import "../utilities/screenreaders";

// Base class
.badge {
  display: flex;
  justify-content: center;
  padding: 0 $badge-padding-x;
  @include text-type(5, $badge-font-weight);
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  @include border-radius($badge-border-radius);
  box-sizing: border-box;
  border: 1px solid transparent;
  // Empty badges collapse automatically
  &:empty {
    display: none; 
  }
  min-width: 1.875rem;
  min-height: 1.25rem; 

  &__content {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: $badge-padding-y 0;
    &--icon {
      margin-left: $badge-icon-padding;
    }

    &--dismissible {
      margin-right: 6px;
    }

  }
  &__button {
    background: transparent;
    border: none;
    color: currentColor;
    cursor: pointer;
    padding: 0;

    &:focus, &:hover {
      outline: 0;
      border-radius: 50%;
      background-color: rgba($white, .2);
      background-blend-mode: screen;
    }
  }
  // badge sizes
  &--xs {
    font-size: .875rem;
    line-height: 1.125rem; // remove 2px from line height to account for border
    padding: 0 $badge-xs-padding-x;
    
    > .badge__content {
      padding: $badge-xs-padding-y 0;
    }
  }
  
  &--sm {
    @include text-type(6, $badge-font-weight);
    padding: 0 $badge-sm-padding-x;
    min-height: 1.5rem;
  
    &.badge--dismissible {
      padding-right: .3125rem !important;
    }
  
    > .badge__content {
      padding: $badge-sm-padding-y 0;
      > .badge__icon, .badge__button {
        font-size: map-get($font-sizes, 6);
      }
    }
  }
  
  &--md {
    @include text-type(6, $badge-font-weight);
    padding: 0 $badge-md-padding-x;
    min-height: 1.75rem;
    
    &.badge--dismissible {
      padding-right: .3125rem !important;
    }
  
    > .badge__content {
      padding: $badge-md-padding-y 0;
      > .badge__icon, .badge__button {
        font-size: map-get($font-sizes, 5);
      }
    }
  }
  
  &--lg {
    @include text-type(5, $badge-font-weight);
    padding: 0 $badge-lg-padding-x;
    min-height: 2rem;
  
    &.badge--dismissible {
      padding-right: .4375rem !important;
    }
  
    > .badge__content {
      padding: $badge-lg-padding-y 0;
      > .badge__icon, .badge__button {
        font-size: map-get($font-sizes, 4);
      }
    }
  } 
  // Badge Colors
  @each $color, $value in $badge-colors {
    &--#{$color} {
      color: map-get($badge-fonts, $color);
      background-color: $value;
      border-color: $value;
      &.badge{
        .badge {
          &__button {
            &:focus, &:hover {
              background-color: map-get($badge-buttons-dark, $color);
            }

            &:focus-visible {    
              border-color: map-get($badge-fonts, $color);
              box-shadow: 0px 0px 0px 2px map-get($badge-fonts, $color);   
            }            
          }
        }
        &--light{
          background-color: map-get($badge-backgrounds, $color);

          @if $color == 'gray'{
            color: $body-copy;
            border-color: $gray-50;
          } @else if $color == 'warning'{
            color: $warning-link;
          } @else if $color == 'success' {
            color: $success-hover;
          } @else if $color == 'primary' {
            color: $primary-hover;
          } @else {
            color: $value;
          }
          .badge{
            &__button {
              &:focus, &:hover, &:focus-visible {
                background-color: map-get($badge-buttons-light, $color);
              }

              &:focus-visible {
                @if $color == 'gray'{
                  border-color: $body-copy;
                  box-shadow: 0px 0px 0px 2px $body-copy; 
                } @else if $color == 'warning'{ 
                  border-color: $warning-link;
                  box-shadow: 0px 0px 0px 2px $warning-link;  
                } @else {
                  border-color: $value;
                  box-shadow: 0px 0px 0px 2px $value;  
                }             
              }
            }
          }
        }
      }
    }
  }
}

  
// Quick fix for badges in buttons
.btn .badge {
  position: relative;
  top: -1px;
}