<div class="container">
  <button data-am-linearrow="tooltip tooltip-bottom" display-name="Show Utilities">
    <div class="line line-1"></div>
    <div class="line line-2"></div>
  </button>
</div>

@arrow-width: 20px;
@arrow-height: (@arrow-width * 0.3);
@arrow-angle: 25deg;
@transition-speed: 300ms;

[data-am-linearrow] {
  padding: 15px;
  cursor: pointer;
  width: ((@arrow-width * 2) - @arrow-height);
  height: @arrow-height;
  box-sizing: content-box;
  .line {
    position: absolute;
    top: 50%;
    margin-top: -(@arrow-height / 2);
    width: @arrow-width;
    height: @arrow-height;
    border-radius: @arrow-height;
    background-color: #ccc;
    transition: transform @transition-speed ease, background-color @transition-speed ease;
  }
  .line-1 {
    right: 50%;
    margin-right: -(@arrow-height / 2);
  }
  .line-2 {
    left: 50%;
    margin-left: -(@arrow-height / 2);
  }
  &:hover,
  &:focus {
    .line-1 {
      transform: rotate(@arrow-angle);
    }
    .line-2 {
      transform: rotate(-(@arrow-angle));
    }
  }
  &:focus {
    outline: none;
    .line {
      background-color: darken(#ccc, 20%);
    }
  }
}

[data-am-linearrow~="inverted"] {
  &:hover,
  &:focus {
    .line-1 {
      transform: rotate(-(@arrow-angle));
    }
    .line-2 {
      transform: rotate(@arrow-angle);
    }
  }
}

[data-am-linearrow~="tooltip"] {
  &:after {
    content: attr(display-name);
    white-space: nowrap;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    transition: opacity @transition-speed ease-out, color @transition-speed ease;
     opacity: 0;
    color: #ccc;
  }
  &:hover,
  &:focus {
    &:after {
      opacity: 1;
    } 
  }
  &:focus {
    &:after {
      color: darken(#ccc, 20%); 
    }
  }
}

[data-am-linearrow~="tooltip-top"] {
  &:after {
    bottom: 100%; 
  }
}

[data-am-linearrow~="tooltip-bottom"] {
  &:after {
    top: 100%;  
  }
}

//Base styling

.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

button {
  border: none;
  background-color: transparent;
}