.container
  %ul
    %li
      %a.animated-arrow{:href => "https://google.com"}
        %span.the-arrow.-left
          %span.shaft
        %span.main
          %span.text
            Discover the Agency
          %span.the-arrow.-right
            %span.shaft
    %li
      %a.animated-arrow{:href => "https://google.com"}
        %span.the-arrow.-left
          %span.shaft
        %span.main
          %span.text
            View Projects
          %span.the-arrow.-right
            %span.shaft

    %li
      %a.animated-arrow{:href => "https://google.com"}
        %span.the-arrow.-left
          %span.shaft
        %span.main
          %span.text
            Get in Touch
          %span.the-arrow.-right
            %span.shaft

// Variables

$black: #666;
$white: #eaeaea;
$gray: #999;

$text-arrow-space: 16px;
$shaft-width: 64px;
$shaft-thickness: 1px;
$arrow-head-width: 8px;
$arrow-head-thickness: $shaft-thickness;



// Base

* {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

html,
body {
  background: #121212;
  height: 100%;
  font-family: 'Playfair Display', serif;
  font-size: 16px;
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

ul {
  li {
    margin: 0 0 24px;
  }
}



// The Arrow

.the-arrow {
  width: $shaft-width;
  transition: all 0.2s;
 
  &.-left {
    position: absolute;
    top: 60%;
    left: 0;

    > .shaft {
      width: 0;
      background-color: $gray;
      
      &:before,
      &:after {
        width: 0;
        background-color: $gray;
      }

      &:before {
        transform: rotate(0);
      }

      &:after {
        transform: rotate(0);
      }
    }
  }
  
  &.-right {
    top: 3px;
    
    > .shaft {
      width: $shaft-width;
      transition-delay: 0.2s;

      &:before,
      &:after { 
        width: $arrow-head-width;
        transition-delay: 0.3s;
        transition: all 0.5s;
      }
      
      &:before {
        transform: rotate(40deg);
      }
      
      &:after {
        transform: rotate(-40deg);
      }
    }
  }

  > .shaft {
    background-color: $gray;
    display: block;
    height: $shaft-thickness;
    position: relative;
    transition: all 0.2s;
    transition-delay: 0;
    will-change: transform;

    &:before,
    &:after {
      background-color: $gray;
      content: '';
      display: block;
      height: $arrow-head-thickness;
      position: absolute;
      top: 0;
      right: 0;
      transition: all 0.2s;
      transition-delay: 0;
    }

    &:before {
      transform-origin: top right;
    }

    &:after {
      transform-origin: bottom right;
    }
  }
}



// Animated Arrow Button

.animated-arrow {
  display: inline-block;
  color: $gray;
  font-size: 1.25em;
  font-style: italic;
  text-decoration: none;
  position: relative;
  transition: all 0.2s;
  
  &:hover {
    color: $white;
    
    > .the-arrow.-left {
      > .shaft {
        width: $shaft-width;
        transition-delay: 0.1s;
        background-color: $white;

        &:before,
        &:after {
          width: $arrow-head-width;
          transition-delay: 0.1s;
          background-color: $white;
        }

        &:before {
          transform: rotate(40deg);
        }

        &:after {
          transform: rotate(-40deg);
        }
      }
    }
    
    > .main {
      transform: translateX($shaft-width + $text-arrow-space);
      
      > .the-arrow.-right {
        > .shaft {
          width: 0;
          transform: translateX(200%);
          transition-delay: 0;
          
          &:before,
          &:after {
            width: 0;
            transition-delay: 0;
            transition: all 0.1s;
          }

          &:before {
            transform: rotate(0);
          }

          &:after {
            transform: rotate(0);
          }
        }
      }
    }
  }
  
  > .main {
    display: flex;
    align-items: center;
    transition: all 0.2s;
    
    > .text {
      margin: 0 $text-arrow-space 0 0;
      line-height: 1;
    }
    
    > .the-arrow {
      position: relative;
    }
  }
}