// creates the perfect circular play button
@mixin play-button($fill: $color-brand-primary) {
    position: relative;
    &:after {
        background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' x='0px' y='0px' viewBox='0 0 1000 1000' enable-background='new 0 0 1000 1000' xml:space='preserve'%3E%3Ccircle fill='" + transparentize($fill, 0.6) + "' cx='514.065' cy='504.152' r='477.545'/%3E%3Cpolygon fill='white' points='383,510.151 383,318.502 548.696,414.327 714.529,510.151 548.765,605.976 383,701.801 '/%3E%3C/svg%3E");
        background-position: center center;
        background-repeat: no-repeat;
        content: ' ';
        display: block;
        height: 30%;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 30%;
    }
}