@aplus-frontend/ui/theme/ap-tag/ap-tag.less

@import '../mixins/mixins.less';

.b(tag, {
    &-wrapper {
      text-wrap: nowrap;
      white-space: nowrap;
      display: inline-flex;
      max-width: 100%;
    }
    &-wrapper &-inner-wrapper {
      border-radius: 4px;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      width: 100%;
      
      &--large {
        padding: 6px;
        line-height: @line-height-lg;
        font-size: @font-size-lg;
      }
      &--middle {
        line-height: @line-height-base;
        padding: 3px 6px;
        font-size: @font-size-base;
      }
      &--small {
        padding: 0 4px;
        line-height: @line-height-base;
        font-size: @font-size-base;
        border-radius: 2px;
      }
    }
    &-wrapper-purely {
      & > * {
        background-color: var(--tag-main-color-background);
        color: var(--ap-text-color-2);
      }
    }
    &-wrapper-border {
      & > * {
        outline: 1px solid var(--tag-main-color);
        outline-offset: -1px;
        background-color: var(--tag-main-color-opacity);
        color: var(--tag-main-color);
      }
    }
    &-wrapper-purely &-inner-wrapper--disabled {
      background-color: rgba(#8896b0,0.15);
    }
    &-wrapper-purely &-inner-wrapper--disabled-admin {
      background-color: rgba(#333,0.15);
    }
    &-wrapper-border &-inner-wrapper--disabled {
      outline: 1px solid #DEE4ED;
      outline-offset: -1px;
      background-color: #526a900f;
      color: #8896b0;
    }
    &-wrapper-border &-inner-wrapper--disabled-admin {
      outline: 1px solid #d9d9d9;
      outline-offset: -1px;
      background-color: #9999990f;
      color: #999;
    }
});