@import './scss/variable.scss';

a#{$link-prefix} {
  display: inline-block;
  height: $link-height;
  line-height: $link-height;
  position: relative;
  cursor: pointer;
  color: $gray-07;
  transition: color .2s ;
  // &::after {
  //   content: '';
  //   position: absolute;
  //   left: 0;
  //   bottom: 0;
  //   width: 100%;
  //   height: 1px;
  //   background: $primary-brand;
  //   opacity: 0;
  //   transform: translateY(2px);
  //   transition: transform 0.2s, opacity 0.2s;
  //   pointer-events: none;

  // }
  &:hover {
    color: $primary-brand;
    // &::after {
    //   transform: translateY(0px);
    //   opacity: 1;
    // } 
    text-decoration: underline;
  }
  &:active, &:visited {
    color: $hover-brand;
    text-decoration: underline;
    // &::after {
    //   transform: translateY(0px);
    //   opacity: 1;
    //   background: $hover-brand;
    // } 
  }
  &#{$link-prefix}-primary {
    color: $primary-brand;
    &:hover {
      // color: $primary-brand;
      // &::after {
      //   transform: translateY(0px);
      //   opacity: 1;
      // } 
      text-decoration: underline;
    }
    &:active, &:visited {
      color: $hover-brand;
      &:hover {
        color: $hover-brand;
        // &::after {
        //   transform: translateY(0px);
        //   opacity: 1;
        // } 
      }
    }
  }
}