/*

######################
### MOLECULE: link ###
######################

*/
@import '_extends.scss';
@import '_functions.scss';
@import '_mixins.scss';
@import '_variables.scss';

@import 'components/atoms/_text.scss';
@import 'components/atoms/_icon.scss';
@import 'components/atoms/_color.scss';
@import 'components/molecules/_link.scss';

.#{molecule('lnk')} {
  @include link;

  &-text {
    @include txt;
    @include txt-2;
    @include txt-strong;
    @include color-blue-ribbon;
    line-height: 1.3;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }

  &-icon {
    @include ico-blue-ribbon;
    padding: 0.438em 0;
    margin-bottom: auto;
    margin-right: 0.625em;
    box-sizing: initial;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
  }
  
  &:hover &-text,
  &:hover &-icon {
    transform: translateX(10px);
  }

  &-square {
    border-bottom: 1px solid color('athens-gray');

    .#{molecule('lnk')} {
      &-text {
        @include txt-1;
        @include txt-font-accent;
        @include color-black;
        padding-left: 10px;
      }

      &-icon {
        @include ico-2;
        @include ico-square;
        overflow: hidden;
        padding: 0.563em;
        box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25);
      }
    }
    
    &:hover {
      .#{molecule('lnk-icon')} {
        box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.25);
        
        svg {
          animation: 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) duepduep;
        }
      }
    }
  }
}

@keyframes duepduep {
  0% { transform: translate(0, 0); }
  49% { transform: translate(40px, 0); }
  50% { transform: translate(-40px, 0); }
  100% { transform: translate(0, 0); }
}
