/**
* Link
* @define link
*/

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

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

@mixin standalone-link {
  --ecl-link-text-decoration: none;
  --ecl-link-text-decoration-hover: underline;
  --ecl-link-color-hover: var(--ecl-link-color);
}

@mixin brand-link {
  --ecl-link-color: #{map.get($link, 'brand', 'color')};
  --ecl-link-color-hover: #{map.get($link, 'brand', 'color-hover')};
  --ecl-link-color-active: #{map.get($link, 'brand', 'color-active')};
  --ecl-focus-outline-color: #{map.get($link, 'brand', 'outline-color')};
}

@mixin inverted-link {
  --ecl-link-color: #{map.get($link, 'inverted', 'color')};
  --ecl-link-color-hover: #{map.get($link, 'inverted', 'color-hover')};
  --ecl-link-color-active: #{map.get($link, 'inverted', 'color-active')};
  --ecl-link-focus-shadow: #{map.get($link, 'inverted', 'shadow-focus')};
  --ecl-focus-outline-color: #{map.get($link, 'inverted', 'outline-color')};
}

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

  &:visited {
    color: var(--ecl-link-color);
  }

  &:hover {
    color: var(--ecl-link-color-hover);
    text-decoration: var(--ecl-link-text-decoration-hover);
    text-decoration-thickness: from-font;
  }

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

  &:active {
    color: var(--ecl-link-color-active);
  }
}

.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--primary-highlight,
      .ecl-link--primary-neutral,
      .ecl-link--primary-highlight-inverted,
      .ecl-link--primary,
      .ecl-link--secondary,
      .ecl-link--secondary-neutral,
      .ecl-link--secondary-inverted
    )
    .ecl-link__label {
    text-decoration: underline;
    text-decoration-thickness: from-font;
  }
}

.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 {
  @include standalone-link;

  display: inline-block;
}

/**
* Branded link
*/
.ecl-link--brand,
%ecl-link-brand {
  @include brand-link;

  &.ecl-link--standalone {
    @include brand-link;
    @include standalone-link;
  }
}

/**
* Inverted link
*/
.ecl-link--inverted,
%ecl-link-inverted {
  @include inverted-link;

  &.ecl-link--standalone {
    @include inverted-link;
    @include standalone-link;
  }
}

/**
* Link button
*/
/* stylelint-disable nesting-selector-no-missing-scoping-root */
@mixin link-button($variant: null) {
  --ecl-button-border-width: #{map.get($button, #{$variant}, 'border-width')};
  --ecl-button-padding-horizontal: #{map.get(
      $button,
      'large',
      'padding-horizontal'
    )};
  --ecl-button-padding-vertical: #{map.get(
      $button,
      'large',
      'padding-vertical'
    )};

  align-items: center;
  background-color: map.get($button, #{$variant}, 'background');
  border: var(--ecl-button-border-width) solid
    map.get($button, #{$variant}, 'border-color');
  border-radius: map.get($button, 'radius');
  box-sizing: border-box;
  color: map.get($button, #{$variant}, 'color');
  display: inline-flex;
  min-height: map.get($button, 'large', 'size');
  min-width: map.get($button, 'large', 'size');
  padding: calc(
      var(--ecl-button-padding-vertical) - var(--ecl-button-border-width)
    )
    calc(var(--ecl-button-padding-horizontal) - var(--ecl-button-border-width));
  text-decoration: none;

  @include mixins.responsive-font(map.get($button, 'large', 'font'));

  .ecl-link__icon {
    flex-shrink: 0;
    height: map.get($button, 'large', 'icon-size');
    top: 0;
    width: map.get($button, 'large', 'icon-size');
  }

  &.ecl-button--s {
    --ecl-button-padding-horizontal: #{map.get(
        $button,
        'small',
        'padding-horizontal'
      )};
    --ecl-button-padding-vertical: #{map.get(
        $button,
        'small',
        'padding-vertical'
      )};

    min-height: map.get($button, 'small', 'size');
    min-width: map.get($button, 'small', 'size');

    @include mixins.responsive-font(map.get($button, 'small', 'font'));

    .ecl-link__icon {
      height: map.get($button, 'small', 'icon-size');
      width: map.get($button, 'small', 'icon-size');
    }
  }

  @if map.has-key($button, #{$variant}, 'border-width-small') {
    &.ecl-button--s {
      --ecl-button-border-width: #{map.get(
          $button,
          #{$variant},
          'border-width-small'
        )};
    }
  }

  &.ecl-button--m {
    --ecl-button-padding-horizontal: #{map.get(
        $button,
        'medium',
        'padding-horizontal'
      )};
    --ecl-button-padding-vertical: #{map.get(
        $button,
        'medium',
        'padding-vertical'
      )};

    min-height: map.get($button, 'medium', 'size');
    min-width: map.get($button, 'medium', 'size');

    @include mixins.responsive-font(map.get($button, 'medium', 'font'));

    .ecl-link__icon {
      height: map.get($button, 'medium', 'icon-size');
      width: map.get($button, 'medium', 'icon-size');
    }
  }

  @if map.has-key($button, #{$variant}, 'border-width-medium') {
    &.ecl-button--m {
      --ecl-button-border-width: #{map.get(
          $button,
          #{$variant},
          'border-width-medium'
        )};
    }
  }

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

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

  &:focus-visible {
    background-color: map.get($button, #{$variant}, 'background-focus');
    border-color: map.get($button, #{$variant}, 'border-color-focus');
    color: map.get($button, #{$variant}, 'color-focus');
    outline: #{map.get($button, #{$variant}, 'outline-width')} solid
      #{map.get($button, #{$variant}, 'outline-color')};
    outline-offset: map.get($button, #{$variant}, 'outline-offset');

    @if map.has-key($button, #{$variant}, 'shadow-focus') {
      box-shadow: map.get($button, #{$variant}, 'shadow-focus');
    }
  }

  @if map.has-key($button, #{$variant}, 'border-width-focus') {
    &:focus-visible {
      --ecl-button-border-width: #{map.get(
          $button,
          #{$variant},
          'border-width-focus'
        )};
    }

    &.ecl-button--s:focus-visible {
      --ecl-button-border-width: #{map.get(
          $button,
          #{$variant},
          'border-width-focus'
        )};
    }

    &.ecl-button--m:focus-visible {
      --ecl-button-border-width: #{map.get(
          $button,
          #{$variant},
          'border-width-focus'
        )};
    }
  }

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

  &.ecl-link--icon-only {
    align-items: center;
    display: inline-flex;
    justify-content: center;
    padding: 0 !important;

    .ecl-link__icon {
      height: map.get($button, 'large', 'icon-only-size');
      width: map.get($button, 'large', 'icon-only-size');
    }
  }

  &.ecl-link--icon-only.ecl-button--s .ecl-link__icon {
    height: map.get($button, 'small', 'icon-only-size');
    width: map.get($button, 'small', 'icon-only-size');
  }

  &.ecl-link--icon-only.ecl-button--m .ecl-link__icon {
    height: map.get($button, 'medium', 'icon-only-size');
    width: map.get($button, 'medium', 'icon-only-size');
  }

  &:not(.ecl-link--icon-only) {
    .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: map.get($button, 'large', 'icon-spacing');
    }
  }

  .ecl-link__icon {
    top: 0;
  }
}
/* stylelint-enable nesting-selector-no-missing-scoping-root */

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

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

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

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

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

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

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