@use "@styles/abstracts/functions" as fun;
@use "@styles/abstracts/variables" as var;

.link {
  background: linear-gradient(to top, var(--color-primary) 50%, transparent 50%)
    0 0 / 100% 201% no-repeat;
  color: var(--color-primary);
  text-decoration-thickness: 0.15em;
  text-underline-offset: 20%;
  transition: all 0.3s linear 0s, text-decoration 0.18s ease-in-out 0s;

  &:hover {
    color: var(--color-primary-light);
    text-decoration-thickness: 0.25em;
  }

  &:focus {
    background-position: 0 100%;
    color: var(--color-fg-inverted);
  }

  &:active {
    background-position: 0 0;
    color: var(--color-primary-dark);
    text-decoration-thickness: 18%;
  }

  &[hreflang] {
    &::after {
      display: inline-block;

      /* Prettier is removing spacing between content parts. */

      /* prettier-ignore */
      content: "\0000a0[" attr(hreflang) "]";
      font-size: var(--font-size-sm);
    }
  }

  &--download {
    &::after {
      display: inline-block;

      /* Prettier is removing spacing between content parts. */

      /* prettier-ignore */
      content: "\0000a0" url(
fun.encode-svg(
        '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>'
));
    }

    &:focus:not(:active)::after {
      /* Prettier is removing spacing between content parts. */

      /* prettier-ignore */
      content: "\0000a0" url(
fun.encode-svg(
        '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_white}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>'
));
    }

    &[hreflang] {
      &::after {
        /* Prettier is removing spacing between content parts. */

        /* prettier-ignore */
        content: "\0000a0[" attr(hreflang) "]\0000a0" url(
fun.encode-svg(
          '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>'
));
      }
    }
  }

  &--external {
    &::after {
      display: inline-block;

      /* Prettier is removing spacing between content parts. */

      /* prettier-ignore */
      content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
    }

    &:focus:not(:active)::after {
      /* Prettier is removing spacing between content parts. */

      /* prettier-ignore */
      content: "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
    }

    &[hreflang] {
      &::after {
        /* Prettier is removing spacing between content parts. */

        /* prettier-ignore */
        content: "\0000a0[" attr(hreflang) "]\0000a0" url(
fun.encode-svg(
            '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
));
      }

      &:focus:not(:active)::after {
        /* Prettier is removing spacing between content parts. */

        /* prettier-ignore */
        content: "\0000a0[" attr(hreflang) "]\0000a0" url(
fun.encode-svg(
            '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'
));
      }
    }
  }

  &--external#{&}--download {
    &::after {
      /* Prettier is removing spacing between content parts. */

      /* prettier-ignore */
      content: "\0000a0" url(
fun.encode-svg(
          '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>'
)) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
    }

    &[hreflang] {
      &::after {
        /* Prettier is removing spacing between content parts. */

        /* prettier-ignore */
        content: "\0000a0[" attr(hreflang) "]\0000a0" url(
fun.encode-svg(
          '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>'
)) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_blue}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
      }

      &:focus:not(:active)::after {
        /* Prettier is removing spacing between content parts. */

        /* prettier-ignore */
        content: "\0000a0[" attr(hreflang) "]\0000a0" url(
fun.encode-svg(
          '<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_blue}" d="m49 80.048-28.445-30.77 19.32 4.095V5.06h18.252v48.313l21.318-4.095z"/><path fill="#{var.$light-theme_blue}" d="M0 67.57v27.37h100V67.57H87.973v15.344H12.027V67.569z"/></svg>'
)) "\0000a0" url(fun.encode-svg('<svg width="13" viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg"><path fill="#{var.$light-theme_white}" d="M100 0 59.543 5.887l20.8 6.523-51.134 51.134 7.249 7.248L87.59 19.66l6.522 20.798z"/><path fill="#{var.$light-theme_white}" d="M4 10a4 4 0 0 0-4 4v82a4 4 0 0 0 4 4h82a4 4 0 0 0 4-4V62.314h-8V92H8V18h29.686v-8z"/></svg>'));
      }
    }
  }
}