.noora-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: var(--noora-spacing-2);
  box-shadow: var(--noora-border-light-default);
  border-radius: var(--noora-radius-3);
  background: var(--noora-surface-background-primary);
  padding: var(--noora-spacing-2) var(--noora-spacing-3);
  color: var(--noora-surface-label-primary);

  &[data-invalid] {
    box-shadow: var(--noora-border-light-error);
  }

  & [data-part="icon"] {
    display: flex;
    align-items: center;
    width: var(--noora-icon-size-medium);
    height: var(--noora-icon-size-medium);

    & svg {
      width: 100%;
      height: 100%;
    }
  }

  & [data-part="label"],
  & [data-part="item-preview"] {
    font: var(--noora-font-weight-medium) var(--noora-font-body-small);
  }

  &[data-disabled] {
    background: var(--noora-surface-background-secondary);
    color: var(--noora-surface-label-disabled);
  }
}