@use 'sass:map';
@import '../../scss/supernova/styles/colors.css';

$underline-width: 0.0625rem;
$focus-width: 0.15rem;

@mixin anchorlink-hover {
  cursor: pointer;
  color: var(--color-action-text-onlight-hover);
  background-color: var(--color-action-background-transparent-onlight-hover);
  text-decoration-color: var(--color-action-border-hover);
}

@mixin anchorlink-focus {
  outline: none;
  border: $focus-width solid var(--color-action-border-onlight-focus);
}

@mixin anchorlink {
  display: inline;
  box-decoration-break: clone;
  overflow-wrap: break-word;
  word-break: normal;
  text-align: left;
  color: var(--color-action-text-onlight);
  border: $focus-width solid transparent;
  text-decoration: underline;
  text-underline-offset: 0.16rem;
  text-decoration-color: var(--core-color-neutral-700);
  text-decoration-thickness: $underline-width;
  padding: 0.1rem;

  &:hover {
    @include anchorlink-hover;
  }

  &:focus {
    @include anchorlink-focus;
  }

  &__icon {
    display: inline-block;
    vertical-align: bottom;
    margin-right: -0.4rem;
    margin-top: -2rem;
    margin-bottom: -0.3rem;
  }
}

@mixin anchorlink-icon {
  &[target='_blank'] {
    &::after {
      content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='38px' height='38px' viewBox='0 0 48 48' fill='%2308667c'><polygon points='33.305,14.659,33.305,29.205,32.005,29.205,32.005,16.948,15.804,33.149,14.885,32.229,31.155,15.959,18.761,15.96,18.761,14.659' /></svg>");
      display: inline-block;
      vertical-align: bottom;
      margin-right: -0.4rem;
      margin-top: -2rem;
      margin-bottom: -0.8rem;
    }
  }
}

.anchorlink {
  @include anchorlink;
}

.anchorlink-wrapper {
  all: unset;

  &:hover > span {
    @include anchorlink-hover;
  }

  &:focus > span {
    @include anchorlink-focus;
  }
}