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

@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.25em;

  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() {
  --anchor-color: var(--anchor-color--hover);
  --anchor-icon-color: var(--anchor-icon-color--hover);

  @include anchorBackground(var(--anchor-bg--hover));

  @include resetUnderlineStyle();
}

@mixin anchorActiveStyle() {
  --anchor-color: var(--anchor-color--active);
  --anchor-icon-color: var(--anchor-icon-color--active);

  @include anchorBackground(var(--anchor-bg--active));
  @include resetUnderlineStyle();
}

@mixin anchorFocusStyle() {
  --anchor-color: var(--token-color-text-action-focus);
  --anchor-icon-color: var(--token-color-icon-action-focus);
  --focus-ring-width: 0.25rem;

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

  @include utilities.focusRing(
    'always',
    var(--token-color-stroke-action-focus),
    null,
    anchor-background-value(
      var(--token-color-background-action-focus-subtle)
    )
  );

  @content;
}

@mixin anchorBackground($color) {
  box-shadow: anchor-background-value($color);
}

@function anchor-background-value($color) {
  @return 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 useAnchorDarkSurfaceStyle {
  // Text
  --anchor-color--default: var(--token-color-text-action-ondark);
  --anchor-color--hover: var(--token-color-text-action-ondark);
  --anchor-color--active: var(--token-color-text-action-ondark);

  // Icon
  --anchor-icon-color--default: var(--token-color-icon-action-ondark);
  --anchor-icon-color--hover: var(--token-color-icon-action-hover-ondark);
  --anchor-icon-color--active: var(--token-color-icon-action-ondark);

  // Background
  --anchor-bg--hover: var(
    --token-color-background-action-hover-subtle-ondark
  );
  --anchor-bg--active: var(
    --token-color-background-action-pressed-subtle-ondark
  );
}

@mixin anchorStyle() {
  // Component variables
  --anchor-color: var(--anchor-color--default);
  --anchor-icon-color: var(--anchor-icon-color--default);

  // Text
  --anchor-color--default: var(--token-color-text-action);
  --anchor-color--hover: var(--token-color-text-action-hover);
  --anchor-color--active: var(--token-color-text-action-pressed);

  // Icon
  --anchor-icon-color--default: var(--token-color-icon-action);
  --anchor-icon-color--hover: var(--token-color-icon-action-hover);
  --anchor-icon-color--active: var(--token-color-icon-action-pressed);

  // Background
  --anchor-bg--hover: var(--token-color-background-action-hover-subtle);
  --anchor-bg--active: var(--token-color-background-action-pressed-subtle);

  $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();
  color: var(--anchor-color);
  // 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,
    color 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
    color: var(--anchor-icon-color);

    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 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;
  }
}