_patterns_links.scss

@import 'settings';

@mixin vf-p-links {
  .p-link--soft {
    color: $color-dark;

    &:visited {
      color: $color-dark;
      text-decoration: none;
    }

    &:hover {
      color: $color-link;
    }

    &.is-selected {
      font-weight: $font-weight-bold;
    }
  }

  .p-link--inverted {
    color: $color-light;
    font-weight: $font-weight-bold;

    &:hover {
      color: $color-light;
    }

    &:visited {
      color: darken($color-light, 10%);
    }
  }

  // include external link styles only if CSS mask is supported
  @supports (mask-size: 1em) or (-webkit-mask-size: 1em) {
    @include vf-mask-supported;
  }

  .p-top {
    border-bottom: 1px dotted $color-mid-light;
    clear: both;
    margin: 20px 0;
  }

  .p-top__link {
    background: $color-x-light;
    color: $color-dark;
    float: right;
    margin-right: 5px;
    padding: 0 5px;
    position: relative;
    text-decoration: none;
    top: -0.725rem;
  }
}

// For browsers that support CSS masks
@mixin vf-mask-supported {
  $external-icon-size--default-text: 1rem;

  .p-link--external {
    // Used for links point at a different domain
    &::after {
      background-color: currentColor;
      content: '';
      display: inline-block;
      height: $external-icon-size--default-text;
      line-height: 1;
      // stylelint-disable property-no-vendor-prefix
      -webkit-mask: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.157 3l-1.5 1.5H6a.5.5 0 00-.492.41L5.5 5v5a.5.5 0 00.41.492L6 10.5h5a.5.5 0 00.492-.41L11.5 10V8.538l1.5-1.5V10a2 2 0 01-2 2H6a2 2 0 01-2-2V5a2 2 0 012-2h3.157zm5.593-1.75V6h-1.5V3.81L8.5 8.56 7.44 7.5l4.748-4.75H10v-1.5h4.75z' fill='%23666' fill-rule='evenodd'/%3E%3C/svg%3E")
        no-repeat 0 0 / #{$external-icon-size--default-text};
      // stylelint-enable property-no-vendor-prefix
      mask: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.157 3l-1.5 1.5H6a.5.5 0 00-.492.41L5.5 5v5a.5.5 0 00.41.492L6 10.5h5a.5.5 0 00.492-.41L11.5 10V8.538l1.5-1.5V10a2 2 0 01-2 2H6a2 2 0 01-2-2V5a2 2 0 012-2h3.157zm5.593-1.75V6h-1.5V3.81L8.5 8.56 7.44 7.5l4.748-4.75H10v-1.5h4.75z' fill='%23666' fill-rule='evenodd'/%3E%3C/svg%3E")
        no-repeat 0 0 / #{$external-icon-size--default-text};
      vertical-align: calc(#{$baseline-position} - #{$external-icon-size--default-text} - 1px);
      width: $external-icon-size--default-text;
    }
  }
}