@mixin border-slide-bottom($color, $thickness) {

position: relative;

&:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;

  width: 0%;
  border-bottom: $thickness solid $color;
  transition: width 0.4s ease-in-out;
}

&:hover::after {
  width: 100%;
}

}

@mixin overlay-on-hover($color) {

&:after {
  content: "";
  width: 100%;
  height: 100%;
  background-color: $color;
  border: none;
  transition: opacity 0.4s ease-in-out;
  opacity: 0;
}

&:hover::after {
  opacity: 0.7;
}

}