// Themes
@import './clinical-lowlight-theme/Hyperlink.module';
@import './orion-fusion-theme/Hyperlink.module';
@import './redwood-theme/Hyperlink.module';

:local {
  .hyperlink {
    background-color: transparent; // Remove the gray background on active links in IE 10
    color: var(--terra-hyperlink-color, #006fc3);
    cursor: pointer;
    outline: none;
    text-decoration: var(--terra-hyperlink-text-decoration, underline);
    touch-action: manipulation; // Enable fast tap interaction in webkit browsers; see https://webkit.org/blog/5610/more-responsive-tapping-on-ios/
    vertical-align: baseline;
    display: inline-flex;
    align-items: baseline;
    max-width: min-content;
    width: 100%;

    &:visited,
    &.is-visited {
      color: var(--terra-hyperlink-visited-color, #006fc3);

      &:focus {
        color: var(--terra-hyperlink-visited-focus-color, #001f67);
      }
    }
    
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none), (hover: hover) and (pointer: fine) {
      &:hover,
      &.is-hovered {
        background-color: var(--terra-hyperlink-hover-background-color);
        color: var(--terra-hyperlink-hover-color, #001f67);
        text-decoration: var(--terra-hyperlink-hover-text-decoration, underline);
      }
    }

    &.is-focused,
    &[data-focus-styles-enabled='true']:focus {
      background-color: var(--terra-hyperlink-focus-background-color, transparent);
      border-radius: var(--terra-hyperlink-focus-border-radius, 0.2142rem);
      box-shadow: var(--terra-hyperlink-focus-box-shadow, none);
      color: var(--terra-hyperlink-focus-color, #001f67);
      outline: var(--terra-hyperlink-focus-outline, 2px dashed #000);
      outline-offset: var(--terra-hyperlink-focus-outline-offset, 1px);
      text-decoration: var(--terra-hyperlink-focus-text-decoration, underline);
    }

    &.is-active {
      color: var(--terra-hyperlink-active-color, #001f67);
    }

    &.is-disabled {
      color: var(--terra-hyperlink-disabled-color, rgba(28, 31, 33, 0.2));
      cursor: default;
      pointer-events: none;
      text-decoration: var(--terra-hyperlink-disabled-text-decoration, none);
      touch-action: auto;
    }
  }

  .is-underline-hidden {
    color: var(--terra-hyperlink-underline-hidden-color, #006fc3);
    text-decoration: none;

    &:focus {
      color: var(--terra-hyperlink-underline-hidden-focus-color, #001f67);
      text-decoration: underline;
    }

    &:hover {
      color: var(--terra-hyperlink-underline-hidden-hover-color, #001f67);
      text-decoration: underline;
    }

    &:visited,
    &.is-visited {
      color: var(--terra-hyperlink-underline-hidden-visited-color, #006fc3);
      text-decoration: underline;

      &:focus {
        color: var(--terra-hyperlink-underline-hidden-visited-focus-color, #001f67);
      }
    }
  }

  .icon {
    display: inline-block;
    font-size: var(--terra-hyperlink-icon-font-size, 1em);
    margin-left: var(--terra-hyperlink-icon-margin-left, 0.28571em);
    overflow: visible;
    position: relative;
  }

  .audio {
    .icon {
      font-size: var(--terra-hyperlink-audio-icon-font-size, 0.92857em);
    }
  }

  .document {
    .icon {
      margin-left: var(--terra-hyperlink-document-icon-margin-left, 0.21428em);
    }
  }

  .external { 
    .icon {
      bottom: var(--terra-hyperlink-external-icon-bottom, 0.03571em);
      font-size: var(--terra-hyperlink-external-icon-font-size, 0.85714em);
      margin-left: var(--terra-hyperlink-external-icon-margin-left, 0.28571em);
    }
  }

  .image {
    .icon {
      bottom: var(--terra-hyperlink-image-icon-bottom, -0.07142em);
    }
  }

  .video {
    .icon {
      bottom: var(--terra-hyperlink-video-icon-bottom, -0.07142em);
    }
  }

  // Resets for Hyperlink-Button
  .button-reset {
    border: 0 none;
    display: inline-block; // prevents variant icon from breaking onto its own line
    font-family: inherit;
    font-size: 1em;
    left: 0; // reset for IE
    line-height: inherit;
    margin: 0; // reset for Safari, defaults to 2px
    outline: none;
    overflow: hidden; // reset for IE
    padding: 0;
    pointer-events: auto;
    position: relative; // reset for IE
    text-align: left;
    top: 0;  // reset for IE
    touch-action: manipulation; // Enable fast tap interaction in webkit browsers; see https://webkit.org/blog/5610/more-responsive-tapping-on-ios/
    vertical-align: baseline;
    width: 100%;

    .button-inner {
      font-family: inherit;
      left: 0; // reset for IE
      line-height: inherit;
      min-width: 0;
      position: relative; // reset for IE
      top: 0;  // reset for IE
      display: flex;
      min-width: 0;
      max-width: min-content;
    }  
  } 

  .inner-text {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}