/*
 * Link
 */

@use '../abstracts/variables';

pkt-link {
  display: inline;
}

a,
.pkt-link-button {
  // Order of pseudoclasses is important for specificity:
  // link, visited, hover, focus, active
  // but we don't use visited, so we can skip :link

  color: var(--pkt-color-text-action-normal);
  text-decoration: underline;
  word-wrap: break-word;
  cursor: pointer;

  span {
    color: inherit;
    text-decoration: inherit;
  }

  // visited
  &:visited:not(.pkt-linkcard, .pkt-btn, .pkt-tabs__link) {
    &:not(:hover) {
      color: inherit;
    }

    &:focus-visible {
      color: var(--pkt-color-text-action-active);
    }
  }

  // hover
  &:hover,
  &.pkt-link--hover {
    color: var(--pkt-color-text-action-active);
    text-decoration: underline;
    svg {
      --fg-color: currentColor;
    }
  }

  // focus
  &:focus-visible,
  &.pkt-link--focus {
    box-shadow:
      0px 0px 0px 0.125rem var(--pkt-color-text-action-active),
      0px 0px 0px 0.375rem var(--pkt-color-border-states-focus);
    outline: none;
    color: var(--pkt-color-text-action-active);
  }

  // active
  &:active,
  &.pkt-link--active {
    color: var(--pkt-color-text-action-active);
  }
}

.pkt-link {
  display: inline;
  text-align: left;
  align-items: baseline;
}

.pkt-link {
  &__icon {
    --fg-color: currentColor;
    width: 1.5rem;
    height: 1.5rem;
    flex-shrink: 0;
    margin-inline: 0.25rem;
    align-self: center;
  }

  &--icon-left,
  &--icon-right {
    display: inline-flex;
    text-decoration: none;
    align-items: baseline;
  }

  &--icon-left {
    flex-direction: row;

    > :where(.pkt-link__icon) {
      margin-inline: 0 0.5rem;
    }
  }

  &--icon-right {
    flex-direction: row-reverse;

    > :where(.pkt-link__icon) {
      margin-inline: 0.5rem 0;
    }
  }

  &--external::after {
    display: inline-block;
    content: ' ';
    --svg: url(#{variables.$icon-path}/new-window-small.svg);
    background-image: var(--svg);
    background-repeat: no-repeat;
    background-size: 18px 18px;
    width: 1.125rem;
    height: 1.125rem;
    vertical-align: middle;
    align-self: center;
  }

  &--external:hover::after {
    // #1f42aa
    filter: brightness(0) saturate(100%) invert(16%) sepia(99%) saturate(2420%) hue-rotate(222deg) brightness(93%)
      contrast(90%);
  }
}

button.pkt-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  cursor: pointer;
  font-weight: inherit;
}

@at-root [data-mode='dark'] {
  .pkt-link {
    &--external::after {
      // white
      filter: brightness(0) saturate(100%) invert(100%);
    }

    &--external:hover::after,
    &:hover:not(.pkt-btn) pkt-icon,
    &:hover:not(.pkt-btn) .pkt-icon {
      // #b3f5ff
      filter: brightness(0) saturate(100%) invert(80%) sepia(54%) saturate(502%) hue-rotate(173deg) brightness(109%)
        contrast(105%);
    }
  }
}