/* Components :: Tag :: Styles */

@import '../../styles/settings/index';
@import '../../styles/tools/index';

.c-tag {
  @include fabric-font-size(14px);

  align-items: center;
  $defaultColor: fabric-color('black');
  background-color: $defaultColor;
  border-radius: $fabric-global-spacing-unit;
  color: fabric-choose-contrast-color($defaultColor);
  display: inline-flex;
  font-family: 'FS-Emeric-Medium', sans-serif;
  padding: 0 $fabric-global-spacing-unit;

  &.u-skeleton {
    border-radius: 0;
  }

  @each $fabric-key, $fabric-value in $fabric-colors {
    &--#{$fabric-key} {
      background: $fabric-value;
      color: fabric-choose-contrast-color($fabric-value);
    }
  }

  &--small {
    @include fabric-font-size(12px);
    padding: 0 $fabric-global-spacing-unit-small;
  }

  &--large {
    @include fabric-font-size(16px);
    padding: $fabric-global-spacing-unit-tiny $fabric-global-spacing-unit-large;
  }
}