@use '../abstract' as *;
.inline-tag {
  $tag-height: pxToRem(22);
  --p-inline-tag-height: #{$tag-height};

  $padding-inline: pxToRem(6);
  --p-inline-tag-padding-inline: #{$padding-inline};

  --p-inline-tag-text-color:          var(--inline-tag-text-color, var(--p-inline-tag-text-color-default));
  --p-inline-tag-bg-color:            var(--inline-tag-bg-color, var(--p-inline-tag-bg-color-default));

  --p-inline-tag-text-color-default:  var(--p-text-color, var(--color-neutral-60));
  --p-inline-tag-bg-color-default:    var(--color-neutral-10);

  --p-inline-tag-text-color-disabled: var(--color-neutral-15);


  --p-inline-tag-text-color-info:     var(--color-neutral-0);
  --p-inline-tag-bg-color-info:       var(--color-information-100);

  display:inline-grid; place-content:center; padding-inline:var(--p-inline-tag-padding-inline);

  background-color: hsl(var(--p-inline-tag-bg-color));
  color:            hsl(var(--p-inline-tag-text-color));
  border-radius:    var(--border-radius-xsmall);

  flex-shrink:0; font-weight:600;

  &.is-info {
    --p-inline-tag-text-color: var(--p-inline-tag-text-color-info);
    --p-inline-tag-bg-color: var(--p-inline-tag-bg-color-info);
  }

  &:where(#{$disabled}) {
    --p-inline-tag-text-color: var(--p-inline-tag-text-color-disabled);
  }

  /* Theme Dark */
  #{$theme-dark} & {
    --p-inline-tag-text-color-default:  var(--p-text-color, var(--color-neutral-20));
    --p-inline-tag-bg-color-default:    var(--color-neutral-80);

    --p-inline-tag-text-color-disabled: var(--color-neutral-60);
  }
}