@import '../variables/default.scss';
@import '../mixins/index.scss';

.at-tag {
  display: inline-flex;
  position: relative;
  text-align: center;
  box-sizing: border-box;
  background-color: $at-tag-bg-color;
  align-items: center;

  /* prettier-ignore */
  // border: 1px solid $color-border-base;
  border-radius: $border-radius-sm;

  &--xsmall {
    padding: $spacing-h-xs - 1px;
    font-size: $at-tag-font-size-xs;
    line-height: 1;
  }

  &--small {
    padding: 0 $spacing-h-md;
    min-height: $at-tag-height-sm;
    font-size: $at-tag-font-size-sm;
    line-height: $at-tag-height-sm - 2px;
  }

  &--large {
    padding: 0 $spacing-h-xl;
    min-height: $at-tag-height;
    font-size: $at-tag-font-size;
    line-height: $at-tag-height - 2px;
  }

  &--round {
    border-radius: 999px;
  }

  &--active {
    color: $at-tag-color-active;
    border-color: $at-tag-border-color-active;
    background-color: $at-tag-bg-color-active;

    &--default {
      color: $color-text-base-inverse;
      border-color: $at-tag-color-default;
      background-color: $at-tag-color-default;
    }

    &--primary {
      color: $color-text-base-inverse;
      border-color: $at-tag-color-primary;
      background-color: $at-tag-color-primary;
    }

    &--warning {
      color: $color-text-base-inverse;
      border-color: $at-tag-color-warning;
      background-color: $at-tag-color-warning;
    }

    &--danger {
      color: $color-text-base-inverse;
      border-color: $at-tag-color-danger;
      background-color: $at-tag-color-danger;
    }

    &--success {
      color: $color-text-base-inverse;
      border-color: $at-tag-color-success;
      background-color: $at-tag-color-success;
    }

    .at-tag--close {
      color: $color-text-caption;
    }
  }

  &--default {
    color: $at-tag-color-default;
    border-color: $at-tag-bg-color-default;
    background-color: $at-tag-bg-color-default;
  }

  &--primary {
    color: $at-tag-color-primary;
    border-color: $at-tag-bg-color-primary;
    background-color: $at-tag-bg-color-primary;
  }

  &--warning {
    color: $at-tag-color-warning;
    border-color: $at-tag-bg-color-warning;
    background-color: $at-tag-bg-color-warning;
  }

  &--danger {
    color: $at-tag-color-danger;
    border-color: $at-tag-bg-color-danger;
    background-color: $at-tag-bg-color-danger;
  }

  &--success {
    color: $at-tag-color-success;
    border-color: $at-tag-bg-color-success;
    background-color: $at-tag-bg-color-success;
  }

  &--border {
    &--default {
      border: 1px solid $at-tag-color-default;
      background-color: $at-tag-bg-color-active;
    }

    &--primary {
      border: 1px solid $at-tag-color-primary;
      background-color: $at-tag-bg-color-active;
    }

    &--warning {
      border: 1px solid $at-tag-color-warning;
      background-color: $at-tag-bg-color-active;
    }

    &--danger {
      border: 1px solid $at-tag-color-danger;
      background-color: $at-tag-bg-color-active;
    }

    &--success {
      border: 1px solid $at-tag-color-success;
      background-color: $at-tag-bg-color-active;
    }

    .at-tag--close {
      color: $color-text-caption;
    }
  }

  &--close {
    display: inline-block;
    color: $color-text-placeholder;
    line-height: 1;

    /* prettier-ignore */
    margin-left: 3PX;
  }
}