.main-nav-hover-linethrough,
.main-nav-hover-underline-1,
.main-nav-hover-underline-3 {

  > li {

    > a {

      .link-ext {
        display: inline-block;
        width: 100%;
        height: 0.0625em;
        min-height: 1px;
        position: absolute;
        bottom: -0.1875em;
        left: 0;
        background-color: #000;
        transform-origin: right center;
        transform: scaleX(0);
        transition: transform 0.25s cubic-bezier(0, 0, 0.2, 1);
      }
    }
    &.is-active > a,
    &.active > a,
    &.current-menu-item > a,
    > a:hover {
    
      .link-ext {
        transform-origin: left center;
        transform: scaleX(1);
      }
    }
  }
}

.main-nav-hover-linethrough {

  > li {

    > a {

      .link-ext {
        width: 114%;      
        bottom: 50%;
        left: -7%;
        margin-top: -0.0312em;
      }
    }
  }
}  

.main-nav-hover-underline-2 {

  > li {

    > a {
      
      .link-ext {
        display: inline-block;
        width: 107%;
        height: 0.4em;
        position: absolute;
        bottom: 0.25em;
        left: -3.5%;
        background: #f4bcba;
        background: linear-gradient(to right, #f4bc8b 0%, #f1aacc 100%);
        transform: scaleY(0);
        transform-origin: right top;
        transition: transform 0.3s cubic-bezier(0.23, 1, 0.320, 1);
      } 
    }
    &.is-active > a,
    &.active > a,
    &.current-menu-item > a,
    > a:hover {
          
      .link-ext {
        transform-origin: center bottom;
        transform: scaleY(1);
      }
    }
  }
}

.main-nav-hover-underline-3 {

  .link-txt {
    position: static;
  }
  > li {

    > a {

      .link-ext {
        height: 0.214285714285714em;
        min-height: 2px;
        width: 100%;
        left: 0;
        bottom: 0;
      }
    }
  }
}

.main-nav-side-style-2 {

  > li {

    > a {

      .link-ext {
        display: inline-block;
        width: 0.25em;
        height: 0.25em;
        min-width: 4px;
        min-height: 4px;
        border-radius: 50em;
        position: absolute;
        top: 50%;
        right: -1em;
        left: auto;
        margin-top: -0.12em;
        background: #181b31; // inherit from hover/active link color
        opacity: 0;
        visibility: hidden;
        transform: translateY(200%);
        transition: all 0.3s;
      }
    }
    &.is-active > a,
    &.active > a,
    &.current-menu-item > a,
    > a:hover {
          
      .link-ext {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }
    }
  }
}

.main-nav-hover-fade-inactive {

  &:hover {

    > li {

      > a {
        opacity: 0.35;

      }
      &:hover {

        > a {
          opacity: 1;
        }
      }
    }
  }
}