exadel-inc/esl

@import (reference) './variables.less';
 
@arrow: "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 471.2 471.2'%3E%3Cpath d='M456.57 248.48a18.45 18.45 0 0 0 5.43-12.9 17.88 17.88 0 0 0-5.43-12.9L340.08 106.19a18.34 18.34 0 0 0-25.93 25.93l85.26 85.13H27.53a18.33 18.33 0 1 0 0 36.66h371.88l-85.26 85.26a18.34 18.34 0 0 0 25.93 25.93z'/%3E%3C/svg%3E";
 
.arrow-link {
  color: @primary-blue;
  font-size: 1rem;
  font-weight: 600;
 
  &::after,
  &::before {
    display: inline-block;
    margin: 0 5px;
    width: 1em;
    height: 1.27em;
    vertical-align: middle;
    transition: transform 0.3s ease-in-out;
 
    -webkit-mask: url(@arrow) no-repeat 0 0.1em;
    mask: url(@arrow) no-repeat 0 0.1em;
 
    background-color: @primary-blue;
  }
 
  &::before {
    transform: rotate(180deg);
    transform-origin: center;
  }
 
  &::after {
    content: '';
  }
 
  &:hover {
    &::after {
      transform: translateX(5px);
      background-color: @link-hover-fg;
    }
 
    &::before {
      transform: rotate(180deg) translateX(5px);
      background-color: @link-hover-fg;
    }
  }
 
  &.reverse {
    &::after {
      content: none;
    }
 
    &::before {
      content: '';
    }
  }
}
 
// Icon link hover effect
.icon-link:hover svg {
  filter: drop-shadow(0 0 4px @link-fg);
}