/**
* Link
* @define link
*/

@use 'sass:map';
@use '@ecl/vanilla-utility-screen-reader/screen-reader';

// Exposed variables
$theme: null !default;
$link: null !default;

// Internal variables
$min-width: 44px; // According to COMM every interactive element should be at least 44px large

.ecl-link,
%ecl-link {
  color: map.get($link, 'color');
  font-family: var(--ff-d);
  margin: 0;
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: clamp(3px, 0.245em, 10px);

  &:visited {
    color: map.get($link, 'color-visited');
  }

  &:hover {
    color: map.get($link, 'color-hover');
  }

  &:focus-visible {
    border-radius: map.get($link, 'outline-radius');
    outline: map.get($link, 'outline-width') solid
      map.get($link, 'outline-color');
    outline-offset: 2px;
  }

  &:active {
    color: map.get($link, 'color-active');
  }
}

// DEPRECATED
.ecl-link--no-visited:visited {
  color: map.get($link, 'color');

  &:hover,
  &:focus-visible {
    color: map.get($link, 'color-hover');
  }
}

.ecl-link--icon {
  display: inline;
  text-decoration: none;

  .ecl-link__icon {
    fill: currentcolor;
    position: relative;
    top: -1px;
    vertical-align: middle;
  }

  &:not(
      .ecl-link--standalone,
      .ecl-link--cta,
      .ecl-link--primary,
      .ecl-link--secondary
    )
    .ecl-link__label {
    text-decoration: underline;
  }
}

.ecl-link__icon-container {
  display: inline;
  position: relative;
}

.ecl-link__indicator {
  display: none;
}

// stylelint-disable no-descending-specificity
.ecl-link__icon ~ .ecl-link__label,
.ecl-link__icon-container ~ .ecl-link__label,
.ecl-link__label ~ .ecl-link__icon,
.ecl-link__label ~ .ecl-link__icon-container {
  margin-inline-start: var(--s-xs);
}
// stylelint-enable no-descending-specificity

// Icon only
.ecl-link--icon-only {
  // stylelint-disable-next-line no-descending-specificity
  .ecl-link__label {
    @include screen-reader.sr-only;
  }

  .ecl-link__icon,
  .ecl-link__icon-container {
    margin: 0;
  }
}

/**
* Standalone
*/
.ecl-link--standalone {
  display: inline-block;
  line-height: map.get($theme, 'line-height-ui', 'xs');
  text-decoration: none;

  &:visited {
    color: map.get($link, 'color');
  }

  &:hover {
    color: map.get($link, 'color');
    text-decoration: underline;
  }
}

/**
* Inverted link
*/
.ecl-link--inverted,
%ecl-link-inverted {
  color: map.get($link, 'inverted', 'color');

  &:visited {
    color: map.get($link, 'inverted', 'color-visited');
  }

  &:hover {
    color: map.get($link, 'inverted', 'color-hover');
  }

  &:focus-visible {
    outline-color: map.get($link, 'inverted', 'outline-color');
  }

  &:active {
    color: map.get($link, 'inverted', 'color-active');
  }

  &.ecl-link--standalone {
    &:hover,
    &:visited {
      color: map.get($link, 'inverted', 'color');
    }
  }

  // DEPRECATED
  /* stylelint-disable-next-line plugin/selector-bem-pattern */
  &.ecl-link--no-visited:visited {
    color: map.get($link, 'inverted', 'color');

    /* stylelint-disable-next-line */
    &:hover {
      color: map.get($link, 'inverted', 'color-hover');
    }
  }
}

/**
* Link button
*/
@mixin link-button($variant: null) {
  background-color: map.get($link, #{$variant}, 'background');
  border: map.get($link, 'button', 'border-width') solid
    map.get($link, #{$variant}, 'border-color');
  border-radius: map.get($link, 'button', 'radius');
  box-sizing: border-box;
  color: map.get($link, #{$variant}, 'color');
  display: inline-block;
  font: map.get($link, 'button', 'font');
  min-width: $min-width;
  padding: calc(
      #{map.get($link, 'button', 'padding-vertical')} -
        #{map.get($link, 'button', 'border-width')}
    )
    calc(
      #{map.get($link, 'button', 'padding-horizontal')} -
        #{map.get($link, 'button', 'border-width')}
    );
  text-decoration: none;

  &:visited {
    color: map.get($link, #{$variant}, 'color');
  }

  &:hover {
    background-color: map.get($link, #{$variant}, 'background-hover');
    border-color: map.get($link, #{$variant}, 'border-color-hover');
    box-shadow: map.get($link, 'button', 'shadow');
    color: map.get($link, #{$variant}, 'color-hover');
  }

  &:focus-visible {
    background-color: map.get($link, #{$variant}, 'background-focus');
    border-color: map.get($link, #{$variant}, 'border-color-focus');
    border-radius: map.get($link, 'button', 'radius');
    color: map.get($link, #{$variant}, 'color-focus');
    outline: map.get($link, 'button', 'outline-width') solid
      map.get($link, #{$variant}, 'outline-color');
    outline-offset: calc(
      0px - #{map.get($link, 'button', 'outline-width')} - 2px
    );
    text-decoration: none;
  }

  &:active {
    background-color: map.get($link, #{$variant}, 'background-active');
    border-color: map.get($link, #{$variant}, 'border-color-active');
    color: map.get($link, #{$variant}, 'color-active');
    outline-width: 0;
  }
}

.ecl-link--primary {
  @include link-button(primary);
}

.ecl-link--secondary {
  @include link-button(secondary);

  &:focus-visible {
    box-shadow: map.get($link, 'secondary', 'focus-shadow');
  }
}

.ecl-link--cta {
  @include link-button(cta);
}
