@use '../../theme/styles' as theme;

.wr-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  vertical-align: middle;

  appearance: none;
  text-decoration: none;
  white-space: nowrap;

  // Defaults — color and style modifiers override
  --wr-tag-color: var(--wr-color-dark);
  --wr-tag-bg: var(--wr-color-white);
  --wr-tag-border: var(--wr-color-light);
  --wr-tag-radius: var(--wr-border-radius-sm);
  --wr-tag-padding-y: 0.125rem;
  --wr-tag-padding-x: 0.5rem;
  --wr-tag-font-size: var(--wr-text-xs);
  --wr-tag-font-weight: 500;
  --wr-tag-line-height: 1rem;

  color: var(--wr-tag-color);
  background: var(--wr-tag-bg);
  border: 1px solid var(--wr-tag-border);
  border-radius: var(--wr-tag-radius);
  padding: calc(var(--wr-tag-padding-y) * var(--wr-density-y, 1)) calc(var(--wr-tag-padding-x) * var(--wr-density-x, 1));
  font-family: var(--wr-font-family-base);
  font-size: var(--wr-tag-font-size);
  font-weight: var(--wr-tag-font-weight);
  line-height: var(--wr-tag-line-height);
  transition: var(--wr-transition-base);

  // Shape
  &--rounded {
    --wr-tag-radius: var(--wr-border-radius-pill);
    --wr-tag-padding-x: 0.625rem;
  }

  // Icon slot sizing
  &__adornment {
    --wr-icon-size: 0.875rem;
    color: inherit;
    flex: 0 0 auto;
  }

  // Hoverable (used when the tag is interactive)
  &--hoverable {
    cursor: pointer;
    &:hover {
      filter: brightness(0.95);
    }
  }

  // Loading: keep size; dim text a touch
  &--loading {
    opacity: 0.85;
  }

  // Colored variants
  @each $name in theme.$colors {
    &--#{$name} {
      --wr-tag-color: var(--wr-color-#{$name}-contrast);
      --wr-tag-bg: var(--wr-color-#{$name});
      --wr-tag-border: var(--wr-color-#{$name});

      &.wr-tag--outlined {
        --wr-tag-color: var(--wr-color-#{$name});
        --wr-tag-bg: rgba(var(--wr-color-#{$name}-rgb), 0.06);
        --wr-tag-border: rgba(var(--wr-color-#{$name}-rgb), 0.25);
      }

      &.wr-tag--transparent {
        --wr-tag-color: var(--wr-color-#{$name});
        --wr-tag-bg: rgba(var(--wr-color-#{$name}-rgb), 0.1);
        --wr-tag-border: transparent;
      }
    }
  }
}