@import "palette";
@import "mixins/fontSize";
@import "mixins/border";

@mixin tag-color($color: $unselected-text) { 
  color: lighten($color, 5%);
  @include border($color);
  background-image: linear-gradient(to right, rgba($color, 0.4), transparent);
  &::before {
    @include border(rgba($color, 0.75));
  }
}

.tag {
  display: inline-block;
  padding: em-calc(2px) em-calc(8px) em-calc(2px) em-calc(8px);

  border-left-width: em-calc(3px);
  border-radius: em-calc(2px);
  $radius-width: em-calc(12px);
  border-top-left-radius: $radius-width 50%;
  border-bottom-left-radius: $radius-width 50%;

  background-position: center left;
  background-size: em-calc(80px) 100%;
  background-repeat: no-repeat;

  @include font-size(14px);

  &::before {
    content: "";
    display: inline-block;
    position: relative;
    top: em-calc(-1px);
    width: em-calc(9px);
    height: em-calc(9px);
    margin-right: em-calc(8px);
    border-radius: 100%;
    background-color: $dark-blue-color;
  }

  @include tag-color();
  &--default-0 { @include tag-color($tag-default-0-color); }
  &--default-1 { @include tag-color($tag-default-1-color); }
  &--default-2 { @include tag-color($tag-default-2-color); }
  &--default-3 { @include tag-color($tag-default-3-color); }
  &--default-4 { @include tag-color($tag-default-4-color); }
  &--default-5 { @include tag-color($tag-default-5-color); }
  &--default-6 { @include tag-color($tag-default-6-color); }
  &--default-7 { @include tag-color($tag-default-7-color); }
  &--default-8 { @include tag-color($tag-default-8-color); }
  &--default-9 { @include tag-color($tag-default-9-color); }
}