@import '../../assets/styles/colors';
@import '../../assets/styles/rsfonts';

.chip {
  border-radius: 12px;
  padding: 4px 8px;
  color: $white;
  &--container-count {
    @extend .fontMontserratSemiboldSm;
    height: 19px;
    padding: 2px 8px;
  }
  &--single-count {
    @extend .fontMontserratSemiboldSm;
    padding: 4px 12px;
  }
  &--small {
    @extend .fontMontserratSemiboldXs;
  }
  &--Semibold {
    @extend .fontMontserratSemiboldLg;
  }

  &--primary {
    background-color: $primary;
  }
  &--default {
    background-color: $grey_1;
  }
  &--success {
    background-color: $success;
  }
  &--error {
    background-color: $error;
  }
  &--warning {
    background-color: $warning;
  }
  &--caution {
    background-color: $caution;
  }
}
.ff-chip-no-background {
  &--primary {
    background: none;
    border: 1px solid $primary;
    color: $primary;
  }
  &--default {
    background: none;
    border: 1px solid $grey_1;
    color: $grey_1;
  }
  &--success {
    background: none;
    border: 1px solid $success;
    color: $success;
  }
  &--error {
    background: none;
    border: 1px solid $error;
    color: $error;
  }
  &--warning {
    background: none;
    border: 1px solid $warning;
    color: $warning;
  }
  &--caution {
    background: none;
    border: 1px solid $caution;
    color: $caution;
  }
}

.ff-chip-white-background {
  &--primary {
    background: white;
    color: $primary;
  }
  &--default {
    background: white;
    color: $grey_1;
  }
  &--success {
    background: white;
    color: $success;
  }
  &--error {
    background: white;
    color: $error;
  }
  &--warning {
    background: white;
    color: $warning;
  }
  &--caution {
    background: white;
    color: $caution;
  }
}