@import '../../styles/mixins/text-ellipsis.scss';
.nut-tag {
  padding: $tag-padding;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: $tag-font-size;
  border-radius: $tag-border-radius;
  height: $tag-height;
  color: $tag-color;
  border: $tag-border-width solid transparent;
  max-width: $tag-max-width;
  .nut-tag-text {
    width: 100%;
    text-align: center;
    @include text-ellipsis();
  }
  &.nut-tag--large {
    padding: $tag-padding-large;
    height: $tag-height-large;
  }
  &.nut-tag--small {
    padding: $tag-padding-small;
    height: $tag-height-small;
  }
  .nut-icon {
    vertical-align: middle;
    margin-left: 4px;
  }

  @mixin plain {
    &.nut-tag--plain {
      color: $tag-background-color;
      background: $tag-background-plain-color;
      border: $tag-border-width solid $tag-border-plain-color;
    }
  }

  &--default {
    color: $tag-default-color;
    background: $tag-default-background-color;
    border: $tag-border-width solid $tag-default-border-color;
    &.nut-tag--disabled {
      color: $tag-disabled-color;
      background: $tag-disabled-background-color;
    }
    &.nut-tag--outline {
      background: transparent;
      border: $tag-border-width solid $tag-default-outline-border-color;
      &.nut-tag--disabled {
        border: $tag-border-width solid $tag-disabled-outline-border-color;
      }
    }
    
    // @include plain;
  }

  &--primary {
    background: $tag-primary-background-color;
    &.nut-tag--outline {
      color: $tag-primary-background-color;
      background: transparent;
      border: $tag-border-width solid $tag-primary-background-color;
    }
    &.nut-tag--plain {
      color: $tag-primary-background-color;
      background: $tag-primary-plain-background-color;
      border: $tag-border-width solid transparent;
    }
  }

  &--success {
    background: $tag-success-background-color;
    &.nut-tag--outline {
      color: $tag-success-background-color;
      background: transparent;
      border: $tag-border-width solid $tag-success-background-color;
    }
    &.nut-tag--plain {
      color: $tag-success-background-color;
      background: $tag-success-plain-background-color;
      border: $tag-border-width solid transparent;
    }
  }

  &--danger {
    background: $tag-danger-background-color;
    &.nut-tag--outline {
      color: $tag-danger-background-color;
      background: transparent;
      border: $tag-border-width solid $tag-danger-background-color;
    }
    &.nut-tag--plain {
      color: $tag-danger-background-color;
      background: $tag-danger-plain-background-color;
      border: $tag-border-width solid transparent;
    }
  }

  &--warning {
    background: $tag-warning-background-color;
    &.nut-tag--outline {
      color: $tag-warning-background-color;
      background: transparent;
      border: $tag-border-width solid $tag-warning-background-color;
    }
    &.nut-tag--plain {
      color: $tag-warning-background-color;
      background: $tag-warning-plain-background-color;
      border: $tag-border-width solid transparent;
    }
  }
  &--round {
    border-radius: $tag-round-border-radius;
  }

  &--mark {
    border-radius: $tag-mark-border-radius;
  }

  &--close {
    cursor: pointer;
  }

  &-custom-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}