/*
 * Anchor mixins
 *
 */
@use 'sass:math';
@import '../../../style/core/utilities.scss';

@mixin anchorDefaultStyle() {
  // make sure we have always `display: inline;` as inline-block is breaking the border-bottom
  display: inline;

  padding: 0.05575em 0; // the total body height will then be 24px if font-size is 18px

  font-size: var(--font-size-basis);
  text-decoration: underline;
  text-decoration-color: currentcolor;
  text-decoration-thickness: var(--anchor-underline-thickness);
  text-underline-offset: 0.25em;
  border-radius: 0;

  sup &,
  sub & {
    padding: 0 0.025em;
  }

  .dnb-p &,
  .dnb-lead &,
  .dnb-h--xx-large &,
  .dnb-h--x-large &,
  .dnb-h--large &,
  .dnb-h--medium &,
  .dnb-h--basis &,
  .dnb-h--small &,
  .dnb-h--x-small & {
    font-size: inherit;
  }
}

// reset methods
@mixin resetUnderlineStyle() {
  &,
  .dnb-section &.dnb-anchor {
    text-decoration: none;
  }
}

@mixin resetBorderRadius() {
  &,
  &:hover,
  &:active,
  &:focus-visible {
    border-radius: 0;
  }
}

@mixin resetAnimationStyle() {
  transition: none;
}

// states
@mixin anchorHoverStyle() {
  border-radius: 0.25em;

  @include resetUnderlineStyle();
}

@mixin anchorActiveStyle() {
  border-radius: 0.25em;

  @include resetUnderlineStyle();
}

@mixin anchorFocusStyle() {
  background-color: transparent;

  @include resetAnimationStyle();
  @include resetUnderlineStyle();

  @include focusRing('always');

  border-radius: 0.25em;
  @content;
}

@mixin anchorBackground($color) {
  box-shadow:
    inset 100vw 100vw 0 0 $color,
    calc(var(--anchor-background-gutter-left, 0.125rem) * -1) 0 0 0 $color,
    var(--anchor-background-gutter-right, 0.125rem) 0 0 0 $color;
}

// other styles
@mixin useAnchorContrastStyle {
  color: var(--color-white);

  &:hover {
    @include notNoHover() {
      color: var(--anchor-color--contrast);
      @include anchorBackground(var(--color-white));
    }
  }

  &:active {
    color: var(--color-white);
    background-color: transparent;
    @include anchorBackground(transparent);
  }

  &:focus-visible {
    color: var(--color-white);
    background-color: transparent;

    @include focusRing('always', var(--color-white));
  }
}

@mixin anchorStyle() {
  $icon-scale: 2;
  $icon-scale-filler: 0.5 - math.div(0.5, $icon-scale);

  --anchor-icon-gutter: 0.25em;
  // word-joiner character (zero-width non-breaking space) connects icon with word
  --anchor-icon-separator: '\2060';
  --anchor-icon-position: translateY(-0.175em);
  @include anchorDefaultStyle();

  // have focus before :active, because of border-radius
  &:focus-visible {
    @include anchorFocusStyle();
  }

  &:hover {
    @include notNoHover() {
      @include anchorHoverStyle();
    }
  }

  &:active {
    @include anchorActiveStyle();
  }

  transition:
    box-shadow 200ms ease-in-out,
    border-radius 200ms ease-in-out,
    background 200ms ease-in-out;

  [data-visual-test-wrapper] & {
    transition: none;
  }

  // other stuff, not related to the Anchor directly
  .dnb-icon {
    display: inline;
    vertical-align: middle;
    white-space: nowrap; // force icon to line break with word

    svg {
      vertical-align: baseline;
      transform: scale($icon-scale) var(--anchor-icon-position);
      font-size: #{math.div(1, $icon-scale)}em;
      width: #{$icon-scale}em;
      height: 1em;
      pointer-events: none;
    }
  }

  &--no-icon .dnb-icon {
    display: none;
  }

  &--icon-left .dnb-icon:first-child {
    &::after {
      content: var(--anchor-icon-separator);
    }
    svg {
      margin-right: calc(var(--anchor-icon-gutter) * #{$icon-scale});
    }
  }

  &--icon-right .dnb-icon:last-child {
    &::before {
      content: var(--anchor-icon-separator);
    }
    svg {
      margin-left: calc(var(--anchor-icon-gutter) * #{$icon-scale});
    }
  }

  .dnb-icon--default {
    font-size: calc(16em / 18);
  }
}

@mixin anchorTag() {
  a {
    @include anchorStyle();
  }
}

@mixin notNoStyle() {
  :where(:not(.dnb-anchor--no-style)) {
    @content;
  }
  :not(.dnb-anchor--no-style) {
    @include whereFallback() {
      @content;
    }
  }
}

@mixin notNoHover() {
  &:where(:not(.dnb-anchor--no-hover)) {
    @content;
  }
  &:not(.dnb-anchor--no-hover) {
    @include whereFallback() {
      @content;
    }
  }
}

@mixin notInline() {
  &:where(:not(.dnb-anchor--inline)) {
    @content;
  }
  &:not(.dnb-anchor--inline) {
    @include whereFallback() {
      @content;
    }
  }
}

@mixin whereFallback() {
  /* stylelint-disable-next-line scss/operator-no-unspaced */
  @supports not (selector(*:where(*))) {
    @content;
  }
}