@use '@digdir/ds-tokens/build/tokens.scss' as tokens;
@use './typography.scss' as typography;
@use './baseline/utils.scss' as utils;

$classname: '#{utils.$prefix}-icon-link';
// Color variables
$color-default: tokens.$color-interface-interaction;
$color-visited: tokens.$color-interface-visited;
$color-border-default: tokens.$color-neutral-grey-600;
$color-icon: tokens.$color-neutral-grey-800;
// Size variables
$icon-size-medium: 18px;
$icon-size-large: tokens.$spacing-base-5;
$icon-padding: 6px;

.#{$classname} {
  cursor: pointer;
  position: relative;
  overflow-wrap: anywhere;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;

  @include typography.text-body-300();
  color: tokens.$color-text-background-light;

  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: tokens.$border-width-thin;
  text-decoration-color: $color-border-default;

  transition: all tokens.$duration-normal;

  // Elements
  & > svg {
    display: inline-block;
    box-sizing: content-box;

    width: $icon-size-medium;
    height: $icon-size-medium;

    flex-shrink: 0;
    flex-grow: 0;

    path {
      fill: $color-icon;
    }
  }

  // States
  &:hover {
    text-decoration-thickness: tokens.$border-width-default;
    text-decoration-color: $color-default;
  }

  &:visited {
    color: $color-visited;

    &:hover {
      text-decoration-color: $color-visited;
    }
  }

  &:visited > svg path {
    fill: $color-visited;
  }

  // Modifiers
  &--icon-left > svg {
    margin-right: $icon-padding;
  }
  &--icon-right > svg {
    margin-left: $icon-padding;
  }
  &--shortcut {
    text-decoration-color: transparent;
  }

  &--large {
    @include typography.text-body-400();

    & > svg {
      width: $icon-size-large;
      height: $icon-size-large;
    }

    &.#{$classname}--shortcut > svg {
      width: $icon-size-medium;
      height: $icon-size-medium;
    }
  }

  &--inline {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
  }
}