/* Tags Component */


/* Component-specific custom properties */
.c-tags {
  /* Base properties */
  --c-tags-font-family: var(--ds-font-family-sans);
  --c-tags-font-size: var(--ds-font-size-s);
  --c-tags-line-height: var(--ds-line-height-s);
  --c-tags-transition: all var(--ds-duration-fast) var(--ds-ease-out);
  
  /* Tag properties */
  --c-tags-tag-background: var(--ds-color-surface-raised);
  --c-tags-tag-border-color: var(--ds-color-border);
  --c-tags-tag-text-color: var(--ds-color-text);
  --c-tags-tag-border-radius: var(--ds-radius-s);
  --c-tags-tag-padding: var(--ds-space-xs) var(--ds-space-s);
  --c-tags-tag-gap: var(--ds-space-xs);
  
  /* Tag hover/focus states */
  --c-tags-tag-background-hover: var(--ds-color-surface-lowered);
  --c-tags-tag-border-color-hover: var(--ds-color-border-strong);
  --c-tags-tag-background-focus: var(--ds-color-accent-alpha);
  --c-tags-tag-border-color-focus: var(--ds-color-accent);
  
  /* Remove button */
  --c-tags-remove-size: 1rem;
  --c-tags-remove-background: transparent;
  --c-tags-remove-background-hover: var(--ds-color-danger-alpha);
  --c-tags-remove-color: var(--ds-color-text-weak);
  --c-tags-remove-color-hover: var(--ds-color-text-danger);
  
  /* Category */
  --c-tags-category-title-color: var(--ds-color-text-weak);
  --c-tags-category-title-font-size: var(--ds-font-size-s);
  --c-tags-category-title-font-weight: var(--ds-font-weight-medium);
  --c-tags-category-margin: var(--ds-space-m);
  
  /* Spacing */
  --c-tags-gap: var(--ds-space-xs);
  --c-tags-category-gap: var(--ds-space-s);
  --c-tags-list-gap: var(--ds-space-xs);
}

/* Base component */
.c-tags {
  display: flex;
  flex-direction: column;
  gap: var(--c-tags-gap);
  font-family: var(--c-tags-font-family);
  font-size: var(--c-tags-font-size);
  line-height: var(--c-tags-line-height);
}

/* Display container */
.c-tags__display {
  display: flex;
  flex-direction: column;
  gap: var(--c-tags-category-gap);
}

/* Edit container */
.c-tags__edit {
  display: flex;
  align-items: center;
  gap: var(--c-tags-gap);
  padding: var(--ds-space-s);
  background: var(--ds-color-surface-raised);
  border: 1px solid var(--ds-color-border);
  border-radius: var(--ds-radius-s);
}

.c-tags__edit[hidden] {
  display: none;
}

/* Category */
.c-tags__category {
  display: flex;
  flex-direction: column;
  gap: var(--ds-space-xs);
}

.c-tags__category:not(:last-child) {
  margin-block-end: var(--c-tags-category-margin);
}

.c-tags__category-title {
  margin: 0;
  font-size: var(--c-tags-category-title-font-size);
  font-weight: var(--c-tags-category-title-font-weight);
  color: var(--c-tags-category-title-color);
  line-height: var(--ds-line-height-s);
}

/* Tags list */
.c-tags__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--c-tags-list-gap);
  align-items: center;
}

/* Individual tag */
.c-tags__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--c-tags-tag-gap);
  padding: var(--c-tags-tag-padding);
  background: var(--c-tags-tag-background);
  border: 1px solid var(--c-tags-tag-border-color);
  border-radius: var(--c-tags-tag-border-radius);
  color: var(--c-tags-tag-text-color);
  font-size: var(--c-tags-font-size);
  font-weight: var(--ds-font-weight-normal);
  line-height: 1;
  transition: var(--c-tags-transition);
  cursor: default;
  user-select: none;
}

.c-tags__tag:hover {
  background: var(--c-tags-tag-background-hover);
  border-color: var(--c-tags-tag-border-color-hover);
}

.c-tags__tag:focus {
  outline: 2px solid var(--c-tags-tag-border-color-focus);
  outline-offset: 2px;
  background: var(--c-tags-tag-background-focus);
}

/* Removable tag */
.c-tags__tag--removable {
  cursor: pointer;
  padding-inline-end: var(--ds-space-xs);
}

.c-tags__tag--removable:hover {
  background: var(--c-tags-tag-background-hover);
}

/* Tag remove button */
.c-tags__tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--c-tags-remove-size);
  height: var(--c-tags-remove-size);
  margin-inline-start: var(--ds-space-xs);
  padding: 0;
  background: var(--c-tags-remove-background);
  border: none;
  border-radius: var(--ds-radius-xs);
  color: var(--c-tags-remove-color);
  cursor: pointer;
  transition: var(--c-tags-transition);
  flex-shrink: 0;
}

.c-tags__tag-remove:hover {
  background: var(--c-tags-remove-background-hover);
  color: var(--c-tags-remove-color-hover);
}

.c-tags__tag-remove:focus {
  outline: 2px solid var(--ds-color-accent);
  outline-offset: 1px;
}

.c-tags__tag-remove svg {
  width: 0.75rem;
  height: 0.75rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

/* Edit button */
.c-tags__edit-button {
  align-self: flex-start;
  margin-block-start: var(--ds-space-xs);
}

/* Add button */
.c-tags__add-button {
  flex-shrink: 0;
}

.c-tags__add-first-button {
  margin-block-start: var(--ds-space-xs);
}

/* Empty state */
.c-tags__empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-space-s);
  padding: var(--ds-space-l);
  text-align: center;
  color: var(--ds-color-text-weak);
}

.c-tags__empty-message {
  margin: 0;
  font-size: var(--ds-font-size-s);
  color: var(--ds-color-text-weak);
}

/* Editing state */
.c-tags--editing .c-tags__display {
  display: none;
}

.c-tags--editing .c-tags__edit {
  display: flex;
}

.c-tags--editing .c-tags__edit-button {
  display: none;
}

/* Empty state */
.c-tags--empty .c-tags__display {
  display: none;
}

.c-tags--empty .c-tags__empty-state {
  display: flex;
}

/* Inline edit variant */
.c-tags--inline-edit .c-tags__edit {
  background: transparent;
  border: none;
  padding: 0;
}

/* Compact variant */
.c-tags--compact {
  --c-tags-tag-padding: calc(var(--ds-space-xs) * 0.5) var(--ds-space-xs);
  --c-tags-font-size: var(--ds-font-size-xs);
  --c-tags-gap: calc(var(--ds-space-xs) * 0.5);
  --c-tags-list-gap: calc(var(--ds-space-xs) * 0.5);
}

.c-tags--compact .c-tags__category-title {
  font-size: var(--ds-font-size-xs);
}

/* Large variant */
.c-tags--large {
  --c-tags-tag-padding: var(--ds-space-s) var(--ds-space-m);
  --c-tags-font-size: var(--ds-font-size-m);
  --c-tags-gap: var(--ds-space-s);
  --c-tags-list-gap: var(--ds-space-s);
}

.c-tags--large .c-tags__category-title {
  font-size: var(--ds-font-size-m);
}

/* Color variants */
.c-tags__tag--primary {
  --c-tags-tag-background: var(--ds-color-accent-alpha);
  --c-tags-tag-border-color: var(--ds-color-accent);
  --c-tags-tag-text-color: var(--ds-color-accent);
}

.c-tags__tag--success {
  --c-tags-tag-background: var(--ds-color-success-alpha);
  --c-tags-tag-border-color: var(--ds-color-border-success);
  --c-tags-tag-text-color: var(--ds-color-text-success);
}

.c-tags__tag--warning {
  --c-tags-tag-background: var(--ds-color-warning-alpha);
  --c-tags-tag-border-color: var(--ds-color-border-warning);
  --c-tags-tag-text-color: var(--ds-color-text-warning);
}

.c-tags__tag--danger {
  --c-tags-tag-background: var(--ds-color-danger-alpha);
  --c-tags-tag-border-color: var(--ds-color-border-danger);
  --c-tags-tag-text-color: var(--ds-color-text-danger);
}

.c-tags__tag--info {
  --c-tags-tag-background: var(--ds-color-info-alpha);
  --c-tags-tag-border-color: var(--ds-color-border-info);
  --c-tags-tag-text-color: var(--ds-color-text-info);
}

/* Selected state */
.c-tags__tag--selected {
  background: var(--ds-color-accent);
  border-color: var(--ds-color-accent);
  color: var(--ds-color-text-on-accent);
}

.c-tags__tag--selected .c-tags__tag-remove {
  color: var(--ds-color-text-on-accent);
}

.c-tags__tag--selected .c-tags__tag-remove:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* Disabled state */
.c-tags__tag--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Loading state */
.c-tags--loading {
  position: relative;
}

.c-tags--loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Animation for adding/removing tags */
.c-tags__tag {
  animation: tagFadeIn var(--ds-duration-normal) var(--ds-ease-out);
}

@keyframes tagFadeIn {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.c-tags__tag--removing {
  animation: tagFadeOut var(--ds-duration-fast) var(--ds-ease-in) forwards;
}

@keyframes tagFadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }
  to {
    opacity: 0;
    transform: scale(0.8);
  }
}

/* Responsive behavior */
@media (max-width: 768px) {
  .c-tags {
    --c-tags-tag-padding: calc(var(--ds-space-xs) * 0.75) var(--ds-space-s);
    --c-tags-font-size: var(--ds-font-size-s);
  }
  
  .c-tags__edit {
    flex-direction: column;
    align-items: stretch;
  }
  
  .c-tags__add-button {
    margin-block-start: var(--ds-space-xs);
  }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .c-tags__tag {
    border-width: 2px;
  }
  
  .c-tags__tag:focus {
    outline-width: 3px;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .c-tags__tag,
  .c-tags__tag-remove {
    transition: none;
  }
  
  .c-tags__tag,
  .c-tags__tag--removing {
    animation: none;
  }
}

/* Print styles */
@media print {
  .c-tags__edit,
  .c-tags__edit-button,
  .c-tags__tag-remove {
    display: none;
  }
  
  .c-tags__tag {
    border: 1px solid #000;
    background: transparent;
    color: #000;
  }
}