/*
* Tag mixins
*
*/

@use '../../../style/core/utilities.scss' as utilities;

@mixin tagIcon($fillColor, $strokeColor, $borderColor) {
  --tag-icon-fill: #{$fillColor};
  --tag-icon-stroke: #{$strokeColor};

  @include utilities.focusVisible() {
    --tag-icon-fill: #{$strokeColor};
    --tag-icon-stroke: #{$fillColor};
  }

  @include utilities.hover() {
    --tag-icon-fill: #{$strokeColor};
    --tag-icon-stroke: #{$fillColor};
  }

  @include utilities.active() {
    --tag-icon-fill: #{$strokeColor};
    --tag-icon-stroke: #{$fillColor};
  }

  svg {
    border-radius: 50%;
    outline: 0.0625rem solid $borderColor;
    outline-offset: -0.0625rem;
    .dnb-icon-close-circle-path {
      fill: var(--tag-icon-fill);
    }

    .dnb-icon-close-cross-path {
      stroke: var(--tag-icon-stroke);
    }
  }
}