@layer ui-reset, ui;

/* badge */
@layer ui {
  .badge {
    align-items: center;
    gap: var(--ui-spacing-1);
    padding-block: var(--ui-spacing-1);
    padding-inline: var(--ui-spacing-3);
    border-radius: var(--ui-rounded-full);
    letter-spacing: .02em;
    -webkit-user-select: none;
    user-select: none;
    background-color: var(--bg, var(--ui-neutral-200));
    color: var(--ui-neutral-900);
    font-size: .75rem;
    font-weight: 500;
    line-height: 1;
    display: inline-flex;

    &.secondary {
      background-color: var(--ui-neutral-700);
      color: var(--ui-neutral-100);
    }

    &.primary {
      background-color: var(--ui-primary-200);
      color: var(--ui-primary-700);
    }

    &.constructive {
      background-color: var(--ui-constructive-200);
      color: var(--ui-constructive-700);
    }

    &.destructive {
      background-color: var(--ui-destructive-200);
      color: var(--ui-destructive-700);
    }

    &.color1 {
      background-color: var(--ui-color1-200);
      color: var(--ui-color1-700);
    }

    &.color2 {
      background-color: var(--ui-color2-200);
      color: var(--ui-color2-700);
    }

    &.color3 {
      background-color: var(--ui-color3-200);
      color: var(--ui-color3-700);
    }

    &.color4 {
      background-color: var(--ui-color4-200);
      color: var(--ui-color4-700);
    }

    &.color5 {
      background-color: var(--ui-color5-200);
      color: var(--ui-color5-700);
    }

    &.color6 {
      background-color: var(--ui-color6-200);
      color: var(--ui-color6-700);
    }

    &.outlined {
      background-color: #0000;
      box-shadow: inset 0 0 0 1px;
    }

    & svg {
      width: 1em;
      height: 1em;
    }
  }
}

/* tag-group */
@layer ui {
  label:has( > .badge):has( > input[type="checkbox"],  > input[type="radio"]) {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    border-radius: var(--ui-rounded-full);
    transition: box-shadow var(--ease-glide-3);
    display: inline-flex;

    & > input[type="checkbox"], & > input[type="radio"] {
      appearance: none;
      opacity: 0;
      pointer-events: none;
      width: 0;
      height: 0;
      position: absolute;
    }

    &:has( > input:checked) {
      box-shadow: 0 0 0 1px var(--ui-neutral-800);
    }

    &:has( > input:focus-visible) > .badge {
      outline: 2px solid var(--ui-neutral-950);
      outline-offset: 2px;
    }

    &:has( > input:disabled) {
      opacity: .4;
      cursor: default;
    }
  }
}