/*
 * Anchor theme
 *
 */

@use '../anchor-mixins.scss';

@mixin anchorHover {
  --anchor-color: var(--color-sea-green);
  @include anchor-mixins.anchorBackground(var(--anchor-background--hover));
}

@mixin anchorActive {
  --anchor-color: var(--anchor-color--active);
  @include anchor-mixins.anchorBackground(
    var(--anchor-background--active)
  );
}

@mixin anchorFocus {
  --anchor-color: var(--color-sea-green);
}

@mixin anchorStyle() {
  --anchor-color: var(--anchor-color--default, var(--color-sea-green));
  --anchor-color--active: var(--color-mint-green);
  --anchor-color--contrast: var(--color-emerald-green);
  --anchor-background--hover: var(--color-mint-green-50);
  --anchor-background--active: var(--color-emerald-green);

  color: var(--anchor-color);

  &:hover {
    @include anchor-mixins.notNoHover() {
      @include anchorHover();
    }
  }

  &:active {
    @include anchorActive();
  }

  &:focus-visible {
    @include anchorFocus();
  }

  // Align this icon to look the same as in v10
  &__launch-icon.dnb-icon.dnb-icon--default {
    font-size: 1em;
    svg path {
      stroke-width: 1.2;
    }
  }
}

$useClasses: true !default;
@if $useClasses {
  @include anchor-mixins.notNoStyle() {
    &.dnb-anchor {
      @include anchorStyle();
    }
  }

  .dnb-anchor--hover {
    @include anchorHover();
  }

  .dnb-anchor--active {
    @include anchorActive();
  }

  .dnb-anchor--focus {
    @include anchorFocus();
  }
}

@mixin anchorThemeTag() {
  a {
    --theme-color-black-80: var(--color-sea-green);
    @include anchorStyle();
  }
}