.tag {
  --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-default};
  --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-default};
  --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-default};
  --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-default};
  --#{$prefix}tag-padding-asset: #{$ouds-tag-space-padding-inline-asset-default};
  --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-default};
  --#{$prefix}tag-size-asset: #{px-to-rem($ouds-tag-size-asset-default)};
  --#{$prefix}tag-size-decorative-asset: #{$ouds-tag-size-asset-default};
  --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-default};
  --#{$prefix}tag-icon-padding: #{$ouds-tag-space-inset-icon-default};
  --#{$prefix}tag-bullet-padding: #{$ouds-tag-space-inset-bullet-default};
  --#{$prefix}tag-loader-padding: #{$ouds-tag-space-inset-loader-default};
  --#{$prefix}tag-font-size-icon: #{$ouds-font-size-label-medium};
  --#{$prefix}tag-color: #{$ouds-color-content-inverse};
  --#{$prefix}tag-border-width: 0px;
  --#{$prefix}tag-background-color: #{$ouds-color-surface-inverse-high};
  --#{$prefix}tag-asset-color: currentcolor;
  --#{$prefix}tag-loading-dasharray: 92;
  --#{$prefix}tag-loading-animation: 2.1875s infinite linear rotate1-indeterminate, 1.25s linear infinite rotate2-indeterminate;
  --#{$prefix}tag-positive-icon: var(--#{$prefix}success-icon);
  --#{$prefix}tag-info-icon: var(--#{$prefix}info-icon);
  --#{$prefix}tag-warning-external-icon: var(--#{$prefix}warning-icon);
  --#{$prefix}tag-warning-internal-icon: var(--#{$prefix}warning-internal-icon);
  --#{$prefix}tag-negative-icon: var(--#{$prefix}error-icon);

  position: relative;
  display: inline-flex;
  gap: var(--#{$prefix}tag-asset-gap);
  align-items: center;
  min-width: var(--#{$prefix}tag-min-width);
  min-height: var(--#{$prefix}tag-min-height);
  padding: calc(var(--#{$prefix}tag-padding-y) - var(--#{$prefix}tag-border-width)) calc(var(--#{$prefix}tag-padding-end) - var(--#{$prefix}tag-border-width)) calc(var(--#{$prefix}tag-padding-y) - var(--#{$prefix}tag-border-width)) calc(var(--#{$prefix}tag-padding-start) - var(--#{$prefix}tag-border-width));
  margin: 0;
  font-weight: 700;
  color: var(--#{$prefix}tag-color);
  white-space: nowrap;
  background-color: var(--#{$prefix}tag-background-color);
  @include get-font-size("label-medium");
  @include border-radius($ouds-tag-border-radius);

  &.tag-muted {
    --#{$prefix}tag-color: #{$ouds-color-content-default};
    --#{$prefix}tag-background-color: #{$ouds-color-surface-secondary};
    --#{$prefix}tag-asset-color: #{$ouds-color-content-default};
  }

  &.tag-accent {
    --#{$prefix}tag-color: #{$ouds-color-content-on-status-accent-emphasized};
    --#{$prefix}tag-background-color: #{$ouds-color-surface-status-accent-emphasized};

    &.tag-muted {
      --#{$prefix}tag-color: #{$ouds-color-content-on-status-accent-muted};
      --#{$prefix}tag-background-color: #{$ouds-color-surface-status-accent-muted};
      --#{$prefix}tag-asset-color: #{$ouds-color-content-status-accent};
    }
  }

  &.tag-positive {
    --#{$prefix}tag-color: #{$ouds-color-content-on-status-positive-emphasized};
    --#{$prefix}tag-background-color: #{$ouds-color-surface-status-positive-emphasized};

    &.tag-muted {
      --#{$prefix}tag-color: #{$ouds-color-content-on-status-positive-muted};
      --#{$prefix}tag-background-color: #{$ouds-color-surface-status-positive-muted};
      --#{$prefix}tag-asset-color: #{$ouds-color-content-status-positive};
    }
  }

  &.tag-info {
    --#{$prefix}tag-color: #{$ouds-color-content-on-status-info-emphasized};
    --#{$prefix}tag-background-color: #{$ouds-color-surface-status-info-emphasized};

    &.tag-muted {
      --#{$prefix}tag-color: #{$ouds-color-content-on-status-info-muted};
      --#{$prefix}tag-background-color: #{$ouds-color-surface-status-info-muted};
      --#{$prefix}tag-asset-color: #{$ouds-color-content-status-info};
    }
  }

  &.tag-warning {
    --#{$prefix}tag-color: #{$ouds-color-content-on-status-warning-emphasized};
    --#{$prefix}tag-background-color: #{$ouds-color-surface-status-warning-emphasized};

    &.tag-muted {
      --#{$prefix}tag-color: #{$ouds-color-content-on-status-warning-muted};
      --#{$prefix}tag-background-color: #{$ouds-color-surface-status-warning-muted};
      --#{$prefix}tag-asset-color: #{$ouds-color-content-status-warning};
    }
  }

  &.tag-negative {
    --#{$prefix}tag-color: #{$ouds-color-content-on-status-negative-emphasized};
    --#{$prefix}tag-background-color: #{$ouds-color-surface-status-negative-emphasized};

    &.tag-muted {
      --#{$prefix}tag-color: #{$ouds-color-content-on-status-negative-muted};
      --#{$prefix}tag-background-color: #{$ouds-color-surface-status-negative-muted};
      --#{$prefix}tag-asset-color: #{$ouds-color-content-status-negative};
    }
  }

  &:has(.tag-icon),
  &:has(.tag-status-icon),
  &:has(.tag-bullet),
  &.loading:has(.tag-loader) {
    padding-left: calc(var(--#{$prefix}tag-padding-asset) - var(--#{$prefix}tag-border-width));
  }

  .tag-icon,
  .tag-status-icon,
  .tag-bullet,
  .tag-loader {
    display: flex;
    flex-shrink: 0;
    align-items: center;
    width: var(--#{$prefix}tag-size-asset);
    height: var(--#{$prefix}tag-size-asset);
    overflow: hidden;
    line-height: 1;
    color: var(--#{$prefix}tag-asset-color);
  }

  .tag-icon { // Keep size in px for decorative icons
    width: var(--#{$prefix}tag-size-decorative-asset);
    height: var(--#{$prefix}tag-size-decorative-asset);
    padding: var(--#{$prefix}tag-icon-padding);
    font-size: var(--#{$prefix}tag-font-size-icon);
  }

  .tag-status-icon {
    width: calc(var(--#{$prefix}tag-size-asset) - (2 * var(--#{$prefix}tag-icon-padding)));
    height: calc(var(--#{$prefix}tag-size-asset) - (2 * var(--#{$prefix}tag-icon-padding)));
    margin: var(--#{$prefix}tag-icon-padding);
    vertical-align: middle;
    background-color: var(--#{$prefix}tag-asset-color);
    background-size: contain;
  }

  .tag-bullet {
    width: calc(var(--#{$prefix}tag-size-decorative-asset) - (2 * var(--#{$prefix}tag-bullet-padding)));
    height: calc(var(--#{$prefix}tag-size-decorative-asset) - (2 * var(--#{$prefix}tag-bullet-padding)));
    margin: var(--#{$prefix}tag-bullet-padding);
    background-color: var(--#{$prefix}tag-asset-color);
    @include border-radius(#{$ouds-border-radius-pill});
  }

  &.tag-positive .tag-status-icon {
    mask-image: escape-svg(var(--#{$prefix}tag-positive-icon));
  }

  &.tag-info .tag-status-icon {
    mask-image: escape-svg(var(--#{$prefix}tag-info-icon));
  }

  &.tag-warning:not(.tag-muted) .tag-status-icon {
    mask-image: escape-svg(var(--#{$prefix}tag-warning-external-icon));
  }

  &.tag-warning.tag-muted .tag-status-icon {
    position: relative;
    background-color: transparent;

    &::before,
    &::after {
      position: absolute;
      top: 0;
      left: 0;
      display: inline-block;
      width: calc(var(--#{$prefix}tag-size-asset) - (2 * var(--#{$prefix}tag-icon-padding)));
      height: calc(var(--#{$prefix}tag-size-asset) - (2 * var(--#{$prefix}tag-icon-padding)));
      content: "";
      background-repeat: no-repeat;
      background-size: contain;
    }

    &::before {
      background-color: var(--#{$prefix}icon-color-content-status-warning-external-shape);
      mask-image: escape-svg(var(--#{$prefix}tag-warning-external-icon));
    }

    &::after {
      background-color: var(--#{$prefix}icon-color-content-status-warning-internal-shape);
      mask-image: escape-svg(var(--#{$prefix}tag-warning-internal-icon));
    }
  }

  &.tag-negative .tag-status-icon {
    mask-image: escape-svg(var(--#{$prefix}tag-negative-icon));
  }

  &:not(.loading) .tag-loader {
    display: none;
  }

  &.loading:has(.tag-loader) {
    color: #{$ouds-color-content-default} if($enable-important-utilities, !important, null);
    background-color: #{$ouds-color-surface-secondary} if($enable-important-utilities, !important, null);
  }

  .tag-loader { // TODO partially copied from button loader, should be factorized as much as possible
    --#{$prefix}tag-asset-color: currentcolor;
    display: block;
    width: var(--#{$prefix}tag-size-asset);
    height: var(--#{$prefix}tag-size-asset);
    padding: var(--#{$prefix}tag-loader-padding);
    margin: 0;
    font-size: var(--#{$prefix}tag-size-asset);
    transform: rotate(-90deg);

    > .tag-loader-inner {
      fill: none;
      stroke: var(--#{$prefix}tag-asset-color);
      stroke-dasharray: var(--#{$prefix}tag-loading-dasharray);
      stroke-width: 8;
      transform-origin: center;
      animation: var(--#{$prefix}tag-loading-animation);
    }
  }
}

.disabled .tag,
.tag.disabled {
  color: #{$ouds-color-content-on-action-disabled} if($enable-important-utilities, !important, null);
  background-color: #{$ouds-color-action-disabled} if($enable-important-utilities, !important, null);
}

.tag-small {
  --#{$prefix}tag-min-width: #{$ouds-tag-size-min-width-small};
  --#{$prefix}tag-min-height: #{$ouds-tag-size-min-height-small};
  --#{$prefix}tag-padding-start: #{$ouds-tag-space-padding-inline-small};
  --#{$prefix}tag-padding-end: #{$ouds-tag-space-padding-inline-small};
  --#{$prefix}tag-padding-asset: #{$ouds-tag-space-padding-inline-asset-small};
  --#{$prefix}tag-padding-y: #{$ouds-tag-space-padding-block-small};
  --#{$prefix}tag-size-asset: #{px-to-rem($ouds-tag-size-asset-small)};
  --#{$prefix}tag-size-decorative-asset: #{$ouds-tag-size-asset-small};
  --#{$prefix}tag-asset-gap: #{$ouds-tag-space-column-gap-small};
  --#{$prefix}tag-icon-padding: #{$ouds-tag-space-inset-icon-small};
  --#{$prefix}tag-bullet-padding: #{$ouds-tag-space-inset-bullet-small};
  --#{$prefix}tag-loader-padding: #{$ouds-tag-space-inset-loader-small};
  --#{$prefix}tag-font-size-icon: #{$ouds-font-size-label-small};
  @include get-font-size("label-small");
}

.tag-input {
  --#{$prefix}tag-color: #{$ouds-input-tag-color-content-enabled};
  --#{$prefix}tag-background-color: #{$ouds-input-tag-color-bg-enabled};
  --#{$prefix}tag-border-color: #{$ouds-input-tag-color-border-enabled};
  --#{$prefix}tag-border-width: #{$ouds-input-tag-border-width-default};
  --#{$prefix}tag-padding-end: var(--#{$prefix}tag-padding-asset);

  margin: calc(($ouds-tag-size-min-height-interactive-area - var(--#{$prefix}tag-min-height)) / 2) 0;
  border: var(--#{$prefix}tag-border-width) solid var(--#{$prefix}tag-border-color);

  &::before {
    position: absolute;
    top: calc(-.5 * ($ouds-tag-size-min-height-interactive-area - var(--bs-tag-min-height)) - var(--#{$prefix}tag-border-width));
    right: calc(-1 * var(--#{$prefix}tag-border-width));
    bottom: calc(-.5 * ($ouds-tag-size-min-height-interactive-area - var(--bs-tag-min-height)) - var(--#{$prefix}tag-border-width));
    left: calc(-1 * var(--#{$prefix}tag-border-width));
    content: "";
  }

  &::after {
    width: var(--#{$prefix}tag-size-asset);
    height: var(--#{$prefix}tag-size-asset);
    content: "";
    background-color: currentcolor;
    mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 1000'><path d='M500 83.333 416.667 0 250 166.667 83.333 0 0 83.333 166.667 250 0 416.667 83.333 500 250 333.333 416.667 500 500 416.667 333.333 250z' transform='translate(250 250)'/></svg>");
  }

  &:hover {
    --#{$prefix}tag-color: #{$ouds-input-tag-color-content-hover};
    --#{$prefix}tag-background-color: #{$ouds-input-tag-color-bg-hover};
    --#{$prefix}tag-border-color: #{$ouds-input-tag-color-border-hover};
    --#{$prefix}tag-border-width: #{$ouds-input-tag-border-width-default-interaction};
  }

  &:active {
    --#{$prefix}tag-color: #{$ouds-input-tag-color-content-pressed};
    --#{$prefix}tag-background-color: #{$ouds-input-tag-color-bg-pressed};
    --#{$prefix}tag-border-color: #{$ouds-input-tag-color-border-pressed};
    --#{$prefix}tag-border-width: #{$ouds-input-tag-border-width-default-interaction};
  }

  &:focus-visible {
    --#{$prefix}tag-color: #{$ouds-input-tag-color-content-focus};
    --#{$prefix}tag-background-color: #{$ouds-input-tag-color-bg-focus};
    --#{$prefix}tag-border-color: #{$ouds-input-tag-color-border-focus};
    --#{$prefix}tag-border-width: #{$ouds-input-tag-border-width-default-interaction};
  }

  &:disabled,
  &[aria-disabled="true"] {
    --#{$prefix}tag-color: #{$ouds-color-action-disabled};
    --#{$prefix}tag-background-color: #{$ouds-color-content-on-action-disabled};
    --#{$prefix}tag-border-color: #{$ouds-color-action-disabled};
    --#{$prefix}tag-border-width: #{$ouds-input-tag-border-width-default};

    pointer-events: none;
  }
}