Video play button + arrow mixins

SassMeister-input-HTML.html

<br/>
  <div class="video">
      <span class="play-button"></span>
  </div>

SassMeister-input.scss

// ----
// Sass (v3.4.21)
// Compass (v1.0.3)
// ----


@mixin arrow($direction: left, $size: 15px, $color: white, $skew: 1) {
    display: block;
    width: $size;
    height: 0px;
    border: ($size) solid transparent;
    border-#{$direction}: ($size * $skew) solid $color;
}

@mixin play-button ($play-button-size: 100px, $base-color: #fff) {
    $arrow-size: ($play-button-size / 4);
    position: absolute;
    left: calc(50% - #{$play-button-size / 2});
    top: calc(50% - #{$play-button-size / 2});
    border: 1px solid rgba( $base-color, .6 );
    background-color: rgba( $base-color, .3 );
    border-radius: 100%;
    height: $play-button-size;
    width: $play-button-size;
    &:after {
        position: absolute;
        content: "";
        @include arrow($size: $arrow-size, $color: $base-color, $skew: 1.3);
        left: calc(50% - #{$arrow-size / 2});
        top: calc(50% - #{$arrow-size});
    }
    &:hover {
      background-color: rgba( $base-color, .5 );
    }
}


.video {
    background: url("https://i.ytimg.com/vi/nfs8NYg7yQM/hqdefault.jpg");
    display: block;
    height: 350px;
    width: 500px;
    position: relative;
    
    .play-button {
      @include play-button($play-button-size: 75px);
    }
}

SassMeister-output.css

.video {
  background: url("https://i.ytimg.com/vi/nfs8NYg7yQM/hqdefault.jpg");
  display: block;
  height: 350px;
  width: 500px;
  position: relative;
}
.video .play-button {
  position: absolute;
  left: calc(50% - 37.5px);
  top: calc(50% - 37.5px);
  border: 1px solid rgba(255, 255, 255, 0.6);
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 100%;
  height: 75px;
  width: 75px;
}
.video .play-button:after {
  position: absolute;
  content: "";
  display: block;
  width: 18.75px;
  height: 0px;
  border: 18.75px solid transparent;
  border-left: 24.375px solid #fff;
  left: calc(50% - 9.375px);
  top: calc(50% - 18.75px);
}
.video .play-button:hover {
  background-color: rgba(255, 255, 255, 0.5);
}

SassMeister-rendered.html

<br/>
  <div class="video">
      <span class="play-button"></span>
  </div>