// Base class
//
// Requires one of the contextual, color modifier classes for `color` and
// `background-color`.

.dada-tag {
  display: inline-flex;
  font-weight: $tag-font-weight;
  color: $tag-color;
  border-radius: $tag-border-radius;

  // Empty tags collapse automatically
  &:empty {
    display: none;
  }

  &.dada-tag-disabled {
    cursor: not-allowed !important;
    color: $disabled-color !important;
    border-color: $tag-default !important;
    background-color: $tag-default !important;

    &:hover {
      border-color: $tag-default !important;
      background-color: $tag-default !important;
    }
  }
}

.dada-tag-sm {
  padding: $tag-sm-padding-y $tag-sm-padding-x;
  font-size: $tag-sm-font-size;
  line-height: $tag-sm-line-height;
  & > .dada-tag-close {
    margin-left: $tag-sm-close-margin-left;
  }
}

.dada-tag-md {
  padding: $tag-md-padding-y $tag-md-padding-x;
  font-size: $tag-md-font-size;
  line-height: $tag-md-line-height;
  & > .dada-tag-close {
    margin-left: $tag-md-close-margin-left;
  }
}

// Quick fix for tags in buttons
.btn .dada-tag {
  position: relative;
  top: -1px;
}

// Pill tags
//
// Make them extra rounded with a modifier to replace v3's badges.

.dada-tag-pill {
  padding: $tag-pill-padding;
  border-radius: $tag-pill-border-radius;
}

// Themes
//
.dada-tag-default {
  color: $tag-default-color;
  border: $tag-border-width solid $tag-default;
  background-color: $tag-default;
}

.dada-tag-primary {
  @include tag-variant($tag-primary);
}

.dada-tag-success {
  @include tag-variant($tag-success);
}

.dada-tag-info {
  @include tag-variant($tag-info);
}

.dada-tag-warning {
  @include tag-variant($tag-warning);
}

.dada-tag-danger {
  @include tag-variant($tag-danger);
}

// Outline
//
.dada-tag-outline-default {
  color: $tag-default-color;
  border: $tag-border-width solid $tag-default-outline;
  background-color: $tag-default;
}

.dada-tag-outline-primary {
  @include tag-outline-variant($tag-primary);
}

.dada-tag-outline-success {
  @include tag-outline-variant($tag-success);
}

.dada-tag-outline-info {
  @include tag-outline-variant($tag-info);
}

.dada-tag-outline-warning {
  @include tag-outline-variant($tag-warning);
}

.dada-tag-outline-danger {
  @include tag-outline-variant($tag-danger);
}

.dada-tag-text {
  overflow: hidden;
  flex: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// Close
.dada-tag-close {
  cursor: pointer;
}
