Next

$arrow-height:2rem !default;
$arrow-width:$arrow-height;
$arrow-timing:0.25s !default;

.arrow {
  cursor:pointer;
  display:inline-block;
  height:$arrow-height;
  overflow:hidden;
  transition:all $arrow-timing;
  white-space:nowrap;
  width:$arrow-width;
  &::before {
    background-color:rgba(black,0.4);
    clip-path:polygon(20% 11%, 31% 0%, 81% 50%, 31% 100%, 20% 89%, 51% 58%, 52% 57%, 59% 50%, 52% 43%, 51% 42%);
    content:"";
    display:block;
    height:$arrow-height;
    position:relative;
    transition:all $arrow-timing;
    width:$arrow-width;
  }
  &:hover {
    &::before {
      background-color:var(--primary);
      clip-path:polygon(39% 11%, 50% 0%, 100% 50%, 50% 100%, 39% 89%, 70% 58%, 0% 58%, 0% 50%, 0% 42%, 70% 42%);  
    }
  }
  &.prev {
    &::before {
      transform:rotate(180deg);
    }
  }
  &[disabled],
  &:disabled {
    cursor:default;
    &::before {
      background-color:rgba(black,0.2);
      clip-path:polygon(20% 11%, 31% 0%, 81% 50%, 31% 100%, 20% 89%, 51% 58%, 52% 57%, 59% 50%, 52% 43%, 51% 42%);
    }
  }
}