Arrow button in Sass

arrow.css.scss

$gl-padding: 17px;
$gl-real-height: 70px;
$gl-height: $gl-real-height - $gl-padding * 2;
$gl-arrow-width: $gl-real-height / 2;
$gl-arrow-height: $gl-real-height / sqrt(3);
$gl-arrow-degree: -1 * rad-to-deg(atan($gl-arrow-width / $gl-arrow-height));
$gl-margin-vertical: -1 * (($gl-arrow-height - 1) / 2);
$gl-margin-horizontal: -1 * (($gl-arrow-width + 1) / 2);

@mixin gl-arrow($first-color, $second-color) {
  @include linear-gradient($first-color, $second-color);

  &:after {
    @include linear-gradient($gl-arrow-degree, $first-color, $second-color);
  }
}

.guide-link {
  display: block;
  border-radius: 10px 0 0 10px;
  position: relative;
  height: $gl-height;
  margin-right: $gl-margin-horizontal * -1;
  padding: $gl-padding 20px $gl-padding 65px;

  &:after {
    position: absolute;
    top: 50%;
    right: 0;
    margin: $gl-margin-vertical $gl-margin-horizontal;
    width: $gl-arrow-width;
    height: $gl-arrow-height;
    @include transform(rotate(30deg) skewY(30deg));
    content: '';
  }

  &:hover {
    text-decoration: none;
  }

  header {
    font-size: 18px;
    font-weight: bold;
    line-height: 1.2;
    color: #373c40;
  }
}

.guide-link.organization {
  @include gl-arrow(#ffd646, #ffba49);
}

.guide-link.partner {
  @include gl-arrow(#e1f1a7, #c0e567);
}