@use 'mixins/mixins' as *;
@use 'mixins/var' as *;
@use 'common/var' as *;

:root,
:host {
  --xzx-tag-padding: var(--xzx-padding-base) 10px;
  --xzx-tag-text-color: var(--xzx-white);
  --xzx-tag-height: 24px;
  --xzx-tag-font-size: var(--xzx-text-mini);
  --xzx-tag-radius: var(--xzx-br-sm);
  --xzx-tag-line-height: 16px;
  --xzx-tag-medium-padding: 2px 6px;
  --xzx-tag-large-padding: var(--xzx-padding-base) var(--xzx-padding-xs);
  --xzx-tag-large-radius: var(--xzx-br-round);
  --xzx-tag-large-font-size: var(--xzx-text-lg);
  --xzx-tag-round-radius: var(--xzx-br-round);
  --xzx-tag-danger-color: var(--xzx-color-danger);
  --xzx-tag-primary-color: var(--xzx-color-primary);
  --xzx-tag-success-color: var(--xzx-color-success);
  --xzx-tag-warning-color: var(--xzx-color-warning);
  --xzx-tag-default-color: var(--xzx-text-color);
  --xzx-tag-danger-background-color: var(--xzx-color-danger-light);
  --xzx-tag-primary-background-color: var(--xzx-color-primary-light);
  --xzx-tag-success-background-color: var(--xzx-color-success-light);
  --xzx-tag-warning-background-color: var(--xzx-color-warning-light);
  --xzx-tag-default-background-color: var(--xzx-gray-3);
  --xzx-tag-plain-background: transparent;
  --xzx-tag-icon-size: var(--xzx-text-sm);
  --xzx-tag-immersive-background: rgba(255, 255, 255, 0.1);
  --xzx-tag-immersive-border-color: var(--xzx-text-white-4);
  --xzx-tag-immersive-text-color: var(--xzx-text-white-1);
}

@include b(tag) {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--xzx-tag-padding);
  color: var(--xzx-tag-text-color);
  font-size: var(--xzx-tag-font-size);
  line-height: var(--xzx-tag-line-height);
  border-radius: var(--xzx-tag-radius);
  height: var(--xzx-tag-height);

  &--default {
    color: var(--xzx-tag-default-color);
    background: var(--xzx-tag-default-background-color);

    &.xzx-tag--plain {
      color: var(--xzx-tag-default-color);
    }
  }

  &--danger {
    color: var(--xzx-tag-danger-color);
    background: var(--xzx-tag-danger-background-color);

    &.xzx-tag--plain {
      color: var(--xzx-tag-danger-color);
    }
  }

  &--primary {
    color: var(--xzx-tag-primary-color);
    background: var(--xzx-tag-primary-background-color);

    &.xzx-tag--plain {
      color: var(--xzx-tag-primary-color);
    }
  }

  &--success {
    color: var(--xzx-tag-success-color);
    background: var(--xzx-tag-success-background-color);

    &.xzx-tag--plain {
      color: var(--xzx-tag-success-color);
    }
  }

  &--warning {
    color: var(--xzx-tag-warning-color);
    background: var(--xzx-tag-warning-background-color);

    &.xzx-tag--plain {
      color: var(--xzx-tag-warning-color);
    }
  }

  &--immersive {
    background-color: var(--xzx-tag-immersive-background);
    border: 1px solid var(--xzx-tag-immersive-border-color);
    color: var(--xzx-tag-immersive-text-color);
  }

  &--plain {
    background: var(--xzx-tag-plain-background);
    border-color: currentColor;

    &::before {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border: 1px solid;
      border-color: inherit;
      border-radius: inherit;
      content: '';
      pointer-events: none;
    }
  }

  @include m(dark) {
    color: var(--xzx-tag-text-color);
    &.xzx-tag--default {
      background: var(--xzx-tag-default-color);

      &.xzx-tag--plain {
        color: var(--xzx-tag-text-color);
      }
    }

    &.xzx-tag--danger {
      background: var(--xzx-tag-danger-color);

      &.xzx-tag--plain {
        color: var(--xzx-tag-danger-color);
      }
    }

    &.xzx-tag--primary {
      background: var(--xzx-tag-primary-color);

      &.xzx-tag--plain {
        color: var(--xzx-tag-primary-color);
      }
    }

    &.xzx-tag--success {
      background: var(--xzx-tag-success-color);

      &.xzx-tag--plain {
        color: var(--xzx-tag-success-color);
      }
    }

    &.xzx-tag--warning {
      background: var(--xzx-tag-warning-color);

      &.xzx-tag--plain {
        color: var(--xzx-tag-warning-color);
      }
    }
  }

  &--medium {
    padding: var(--xzx-tag-medium-padding);
  }

  &--large {
    padding: var(--xzx-tag-large-padding);
    font-size: var(--xzx-tag-large-font-size);
    border-radius: var(--xzx-tag-large-radius);
  }

  &--mark {
    border-radius: 0 var(--xzx-tag-round-radius) var(--xzx-tag-round-radius) 0;

    &::after {
      display: block;
      width: 2px;
      content: '';
    }
  }

  &--round {
    border-radius: var(--xzx-tag-round-radius);
  }

  &__close {
    margin-left: 10px;
  }

  &__icon {
    font-size: var(--xzx-tag-icon-size);
    margin-right: var(--xzx-padding-base);
  }
}