@use "sass:map";
@use "../palette/palette.module.scss" as palette;

.tag {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--ant-margin-xs) * 0.75);
  // the line-height is the same Ant uses but -2px to account for border making it 20px instead of 22px
  line-height: calc(var(--ant-line-height-sm) * var(--ant-font-size-sm) - 2px);
  min-height: calc(var(--ant-line-height-sm) * var(--ant-font-size-sm));

  // tags should always be normal weight
  // adding this prevents tags from inheriting font weight from parent
  font-weight: normal;

  :global(svg:not([data-icon])) {
    // `data-icon` comes from Ant icons, we don't want to override those,
    // only the Carbon icons.
    // If you need to override the size, use the `style` prop.
    width: 10px;
    height: 10px;
  }
  :global(.ant-tag-close-icon svg) {
    width: 12px;
    height: 12px;
  }
  --ant-padding-xxs: 0; //we're using gap instead
}

.buttonTag {
  border-radius: var(--ant-border-radius-sm);
  &:hover,
  &:focus {
    :global(.ant-tag) {
      // !important is necessary because our custom component adds the background style to the tag inline giving it a higher specificity than our scss style here
      background: map.get(palette.$colors, "neutral-50") !important;
    }
  }
  &:focus-visible {
    outline: none;
    :global(.ant-tag) {
      border: 1px solid map.get(palette.$colors, "minos");
    }
  }
}

.closeButton {
  border-radius: var(--ant-border-radius-xs);
  &:focus-visible {
    outline: 1px solid map.get(palette.$colors, "minos");
    outline-offset: 2px;
  }
}
