/* ==========================================================================
   ATOMS / tag / tag.css
   --------------------------------------------------------------------------
   VARIANTS:  default, brand, success, warning, error, info
   MODIFIERS: removable (dengan tombol ×), clickable (interaktif)

   HTML PATTERN:
     <span class="tag">JavaScript</span>
     <span class="tag tag-brand">React</span>

   Removable:
     <span class="tag tag-removable">
       CSS
       <button class="tag-remove" aria-label="Remove CSS tag">×</button>
     </span>

   Clickable:
     <button class="tag tag-clickable">Filter: Active</button>
   ========================================================================== */

.tag {
  display:        inline-flex;
  align-items:    center;
  gap:            var(--size-100);
  padding:        var(--size-100) var(--size-300);   /* 4px 12px */
  font-size:      var(--text-label-sm-size);          /* 12px */
  font-weight:    var(--font-weight-medium);
  line-height:    var(--leading-none);
  border-radius:  var(--radius-full);
  border:         1px solid var(--color-border-default);
  background-color: var(--color-bg-sunken);
  color:          var(--color-text-secondary);
  white-space:    nowrap;
  vertical-align: middle;
}

/* Variants */
.tag-brand   { background-color: var(--color-brand-subtle);   color: var(--color-brand-text);   border-color: transparent; }
.tag-success { background-color: var(--color-success-subtle); color: var(--color-success-text); border-color: transparent; }
.tag-warning { background-color: var(--color-warning-subtle); color: var(--color-warning-text); border-color: transparent; }
.tag-error   { background-color: var(--color-error-subtle);   color: var(--color-error-text);   border-color: transparent; }
.tag-info    { background-color: var(--color-info-subtle);    color: var(--color-info-text);    border-color: transparent; }

/* Clickable tag */
.tag-clickable {
  cursor:  pointer;
  transition: var(--transition-base);
  background: none;
  border: 1px solid var(--color-border-default);
}
.tag-clickable:hover {
  background-color: var(--color-bg-sunken);
  border-color:     var(--color-border-strong);
  color:            var(--color-text-primary);
}
.tag-clickable:focus-visible {
  outline:        2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.tag-clickable[aria-pressed="true"],
.tag-clickable.tag-active {
  background-color: var(--color-brand-subtle);
  border-color:     var(--color-brand);
  color:            var(--color-brand-text);
}

/* Remove button */
.tag-remove {
  display:          inline-flex;
  align-items:      center;
  justify-content:  center;
  width:            14px;
  height:           14px;
  background:       none;
  border:           none;
  border-radius:    var(--radius-full);
  cursor:           pointer;
  color:            inherit;
  opacity:          0.6;
  font-size:        12px;
  line-height:      1;
  padding:          0;
  margin-left:      var(--size-50);
  transition:       var(--transition-base);
}
.tag-remove:hover {
  opacity:          1;
  background-color: rgba(0,0,0,0.1);
}
.tag-remove:focus-visible {
  outline:        2px solid var(--color-border-focus);
  outline-offset: 1px;
}

/* Tag group */
.tag-group {
  display:  flex;
  flex-wrap: wrap;
  gap:      var(--size-200);
  align-items: center;
}