@import '../var';

.cl-tag {
  display: inline-block;
  line-height: 14px;
  padding: 1px 5px;
  border-radius: 2px;
  font-size: 10px;
  background-color: $grey-200;
  color: $color-white;
  
  &::after {
    border-color: $grey-200;
    border-radius: 4px;
  }
  
  &.is-plain {
    background-color: $color-white;
    color: $grey-200;
  }
  
  &.is-mark {
    border-radius: 0 8px 8px 0;
    
    &::after {
      border-radius: 0 16px 16px 0;
    }
  }
  
  &--success {
    background-color: $green-500;
    
    &::after {
      border-green: $green-500;
    }
    
    &.is-plain {
      color: $green-500;
    }
  }
  
  &--danger {
    background-color: $red-500;
    
    &::after {
      border-color: $red-500;
    }
    
    &.is-plain {
      color: $red-500;
    }
  }
  
  &--primary {
    background-color: $blue-500;
    
    &::after {
      border-color: $blue-500;
    }
    
    &.is-plain {
      color: $blue-500;
    }
  }
}