:root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
  --neeto-ui-tag-padding-x: 0.5rem;
  --neeto-ui-tag-padding-y: 0.1875rem;
  --neeto-ui-tag-font-size: var(--neeto-ui-text-xs);
  --neeto-ui-tag-font-weight: var(--neeto-ui-font-normal);
  --neeto-ui-tag-line-height: 0.75rem;
  --neeto-ui-tag-color: rgb(var(--neeto-ui-black));
  --neeto-ui-tag-bg-color: transparent;
  --neeto-ui-tag-border-width: 1px;
  --neeto-ui-tag-border-color: transparent;
  --neeto-ui-tag-border-radius: var(--neeto-ui-rounded-full);
  --neeto-ui-tag-gap: 0.25rem;
  --neeto-ui-tag-icon-size: 0.75rem;

  // Indicator
  --neeto-ui-tag-indicator-size: 0.5rem;
  --neeto-ui-tag-indicator-border-radius: var(--neeto-ui-rounded-full);

  // Hover
  --neeto-ui-tag-icon-hover-opacity: 0.8;
}

.neeto-ui-tag {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-size: var(--neeto-ui-tag-font-size);
  line-height: var(--neeto-ui-tag-line-height);
  font-weight: var(--neeto-ui-tag-font-weight);
  gap: var(--neeto-ui-tag-gap);
  padding: var(--neeto-ui-tag-padding-y) var(--neeto-ui-tag-padding-x);
  border-radius: var(--neeto-ui-tag-border-radius);
  color: var(--neeto-ui-tag-color);
  background-color: var(--neeto-ui-tag-bg-color);
  border-width: var(--neeto-ui-tag-border-width);
  border-color: var(--neeto-ui-tag-border-color);
  user-select: none;

  &__indicator {
    border-radius: var(--neeto-ui-tag-indicator-border-radius);
    height: var(--neeto-ui-tag-indicator-size);
    width: var(--neeto-ui-tag-indicator-size);
  }

  &__icon {
    display: inline-flex;
    justify-content: center;
    align-items: center;

    svg {
      width: var(--neeto-ui-tag-icon-size);
      height: var(--neeto-ui-tag-icon-size);
    }
  }

  &__close {
    transition: var(--neeto-ui-transition);
    cursor: pointer;

    &:hover {
      opacity: var(--neeto-ui-tag-icon-hover-opacity);
    }

    svg {
      width: var(--neeto-ui-tag-icon-size);
      height: var(--neeto-ui-tag-icon-size);
    }
  }

  &--size-large {
    --neeto-ui-tag-padding-x: 0.75rem;
    --neeto-ui-tag-padding-y: 0.1875rem;
    --neeto-ui-tag-gap: 0.375rem;
    --neeto-ui-tag-font-size: var(--neeto-ui-text-sm);
    --neeto-ui-tag-line-height: 1rem;
    --neeto-ui-tag-icon-size: 1rem;
  }

  &--type-outline {
    &.neeto-ui-tag--style-primary {
      --neeto-ui-tag-bg-color: rgb(var(--neeto-ui-primary-100));
      --neeto-ui-tag-border-color: rgb(var(--neeto-ui-primary-500));
      --neeto-ui-tag-color: rgb(var(--neeto-ui-primary-800));
    }

    &.neeto-ui-tag--style-secondary {
      --neeto-ui-tag-bg-color: rgb(var(--neeto-ui-white));
      --neeto-ui-tag-border-color: rgb(var(--neeto-ui-gray-400));
      --neeto-ui-tag-color: rgb(var(--neeto-ui-black));
    }

    &.neeto-ui-tag--style-danger {
      --neeto-ui-tag-bg-color: rgb(var(--neeto-ui-error-100));
      --neeto-ui-tag-border-color: rgb(var(--neeto-ui-error-500));
      --neeto-ui-tag-color: rgb(var(--neeto-ui-error-800));
    }

    &.neeto-ui-tag--style-info {
      --neeto-ui-tag-bg-color: rgb(var(--neeto-ui-info-100));
      --neeto-ui-tag-border-color: rgb(var(--neeto-ui-info-500));
      --neeto-ui-tag-color: rgb(var(--neeto-ui-info-800));
    }

    &.neeto-ui-tag--style-success {
      --neeto-ui-tag-bg-color: rgb(var(--neeto-ui-success-100));
      --neeto-ui-tag-border-color: rgb(var(--neeto-ui-success-500));
      --neeto-ui-tag-color: rgb(var(--neeto-ui-success-800));
    }

    &.neeto-ui-tag--style-warning {
      --neeto-ui-tag-bg-color: rgb(var(--neeto-ui-warning-100));
      --neeto-ui-tag-border-color: rgb(var(--neeto-ui-warning-500));
      --neeto-ui-tag-color: rgb(var(--neeto-ui-warning-800));
    }
  }

  &--type-solid {
    &.neeto-ui-tag--style-primary {
      --neeto-ui-tag-bg-color: rgb(var(--neeto-ui-primary-100));
      --neeto-ui-tag-border-color: rgb(var(--neeto-ui-primary-100));
      --neeto-ui-tag-color: rgb(var(--neeto-ui-black));
    }

    &.neeto-ui-tag--style-secondary {
      --neeto-ui-tag-bg-color: rgb(var(--neeto-ui-gray-200));
      --neeto-ui-tag-border-color: rgb(var(--neeto-ui-gray-200));
      --neeto-ui-tag-color: rgb(var(--neeto-ui-black));
    }

    &.neeto-ui-tag--style-danger {
      --neeto-ui-tag-bg-color: rgb(var(--neeto-ui-error-100));
      --neeto-ui-tag-border-color: rgb(var(--neeto-ui-error-100));
      --neeto-ui-tag-color: rgb(var(--neeto-ui-black));
    }

    &.neeto-ui-tag--style-info {
      --neeto-ui-tag-bg-color: rgb(var(--neeto-ui-info-100));
      --neeto-ui-tag-border-color: rgb(var(--neeto-ui-info-100));
      --neeto-ui-tag-color: rgb(var(--neeto-ui-black));
    }

    &.neeto-ui-tag--style-success {
      --neeto-ui-tag-bg-color: rgb(var(--neeto-ui-success-100));
      --neeto-ui-tag-border-color: rgb(var(--neeto-ui-success-100));
      --neeto-ui-tag-color: rgb(var(--neeto-ui-black));
    }

    &.neeto-ui-tag--style-warning {
      --neeto-ui-tag-bg-color: rgb(var(--neeto-ui-warning-100));
      --neeto-ui-tag-border-color: rgb(var(--neeto-ui-warning-100));
      --neeto-ui-tag-color: rgb(var(--neeto-ui-black));
    }
  }
}

.neeto-ui-tag--type-outline.neetix-tag--primary {
  --neeto-ui-tag-bg-color: rgb(var(--neeto-ui-gray-100));
  --neeto-ui-tag-border-color: rgb(var(--neeto-ui-gray-800));
  --neeto-ui-tag-color: rgb(var(--neeto-ui-black));
}
