/**
* Link print
* @define link
*/

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

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

.ecl-link,
%ecl-link {
  color: var(--ecl-link-color);
  break-inside: avoid;
  text-decoration: none;

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

.ecl-link--icon-before,
.ecl-link--icon-after {
  display: inline;
}

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

// stylelint-disable-next-line no-descending-specificity
.ecl-link__icon ~ .ecl-link__label,
.ecl-link__label ~ .ecl-link__icon {
  margin-inline-start: map.get($theme, 'spacing-print', 'xs');
}

.ecl-link--standalone {
  font-family: var(--ecl-font-family-print-default);
  display: inline-block;
  line-height: map.get($link, 'standalone-line-height');
}

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

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

/**
* Branded link
*/
.ecl-link--brand,
%ecl-link-brand {
  --ecl-link-color: #{map.get($link, 'brand', 'color')};

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

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

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

/**
* Link button
*/
/* stylelint-disable nesting-selector-no-missing-scoping-root */
@mixin link-button($variant: null) {
  align-items: center;
  background-color: map.get($button, #{$variant}, 'background');
  border: map.get($button, #{$variant}, '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(
      #{map.get($button, 'large', 'padding-vertical')} -
        #{map.get($button, #{$variant}, 'border-width')}
    )
    calc(
      #{map.get($button, 'large', 'padding-horizontal')} -
        #{map.get($button, #{$variant}, 'border-width')}
    );
  text-decoration: none;

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

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

  &.ecl-link--icon-only {
    .ecl-link__icon {
      height: map.get($button, 'large', 'icon-only-size');
      width: map.get($button, 'large', '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');
    }
  }
}
/* 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);
}