libs/barista-components/style/_link.scss
@import '../core/src/style/variables';
@import './external-link';
@import './font-mixins';

$dark-link-hover-bg: rgba(255, 255, 255, 0.2);
$dark-link-active-bg: rgba(255, 255, 255, 0.3);

@mixin dt-link-base() {
  cursor: pointer;
  text-decoration: none;

  &:hover {
    color: $turquoise-700;
    text-decoration: underline;
  }
  &.dt-external:hover::after {
    text-decoration: none;
    background-image: dt-external-link-icon($turquoise-700);
  }

  &:active {
    color: $turquoise-800;
    text-decoration: underline;
  }
  &.dt-external:active::after {
    background-image: dt-external-link-icon($turquoise-800);
  }

  &:focus {
    outline: 2px solid $gray-300;
  }

  &:active:focus {
    outline: none;
  }
}

@mixin dt-link-dark() {
  color: #ffffff;
  text-decoration: underline;

  &:hover {
    color: #ffffff;
    text-decoration: underline;
    background-color: $dark-link-hover-bg;
  }
  &.dt-external:hover::after {
    background-image: dt-external-link-icon(#ffffff);
  }

  &:active {
    color: #ffffff;
    text-decoration: underline;
    background-color: $dark-link-active-bg;
  }
  &.dt-external:active::after {
    background-image: dt-external-link-icon(#ffffff);
  }

  &:focus {
    outline: 2px solid $gray-300;
  }
}

a.dt-link {
  @include dt-link-base();
  @include dt-custom-font-styles(
    $turquoise-600,
    $default-font-weight,
    'inherit',
    'inherit'
  );

  &.dt-external::after {
    /* ideographic white space to scale the external link icon correctly */
    content: '\3000';
    display: inline;
    margin-left: 0.35ch;
    background-image: dt-external-link-icon();
    background-repeat: no-repeat;
    background-size: contain;
    width: 1em;
    vertical-align: 0;
    background-size: 100% 100%;
  }
}

.dt-theme-dark a.dt-link,
a.dt-link.dt-theme-dark {
  @include dt-link-dark();

  &.dt-external::after {
    background-image: dt-external-link-icon(#ffffff);
  }
}
