@mixin arrow($color, $size, $orientation, $solid: true, $transform: '') {
  content: '';

  $rotation_right: 90deg;
  $rotation_down: 180deg;
  $rotation_left: -90deg;
  $rotation: rotate(-135deg);

  @if ($solid) {
    border-left: $size solid transparent;
    border-right: $size solid transparent;
    border-bottom: $size solid $color;
  } @else {
    $size:  calc($size/3);
    border: solid $color;
    border-width: 0 $size $size 0;
    padding: $size;
  }

  $rotation_right: -45deg;
  $rotation_down: 45deg;
  $rotation_left: 135deg;

  @if ($orientation == up) {
    bottom: 100%;
    left: calc(50% - #{$size});
  } @else if ($orientation == right) {
    $rotation: rotate($rotation_right);
  } @else if ($orientation == down) {
    $rotation: rotate($rotation_down);
  } @else if ($orientation == left) {
    $rotation: rotate($rotation_left);
  }

  @if ($transform != '') {
    transform: $transform $rotation;
  } @else {
    transform: $rotation;
  }
}

@mixin circle($color, $size) {
  content: '';
  width: $size;
  height: $size;
  background: $color;
  border-radius: 50%;
}

@mixin circle-bordered($color, $size, $border-width, $border-color) {
  @include circle($color, $size);
  border: $border-width solid $border-color;
}

@mixin iframe-play($color, $bg-color) {
  &:before {
    @include arrow($color, 1rem, right, true);
    border-bottom-width: 2rem;
    z-index: 1;
  }

  &:after {
    @include circle-bordered($bg-color, 8rem, 1rem, transparentize($bg-color, 0.2));
  }

  &:before,
  &:after {
    cursor: pointer;
    transition: all 0.25s linear;
  }

  &:hover,
  &:focus {
    &:before {
      border-bottom: 2rem solid $bg-color;
    }

    &:after {
      border-color: transparentize($color, 0.2);
      background-color: $color;
    }
  }
}

@mixin close($size, $thickness, $color) {
  & {
    display: inline-block;
    width: $size;
    height: $size;
  }

  &:before,
  &:after {
    content: '';
    display: block;
    width: 140%;
    height: $thickness;
    background: $color;
    border-radius: 0.1rem;
  }

  &:before {
    transform: rotate(45deg);
    transform-origin: 0 0;
    margin: - calc($thickness / 4) 0 0 calc($thickness / 2);
  }

  &:after {
    transform: rotate(-45deg);
    transform-origin: 100% 0;
    margin: -$thickness 0 0 -45%;
  }
}

@mixin nav-icon($size, $color, $thickness: 5px, $translate: 12px) {
  width: $size;

  &:before,
  &:after,
  div {
    background-color: $color;
    border-radius: 3px;
    content: '';
    display: block;
    height: $thickness;
    margin: 7px 0;
    transition: all 0.2s ease-in-out;
  }

  &:before {
    margin: 0;
  }

  &:after {
    width: 50%;
    margin: 0 0 0 auto;
  }

  &.active {
    &:before {
      transform: translateY($translate) rotate(135deg);
    }

    &:after {
      margin: 7px 0;
      width: auto;
      transform: translateY(-$translate) rotate(-135deg);
    }

    div {
      transform: scale(0);
    }
  }
}

@mixin nav-icon-2($size, $color, $thickness: 5px, $translate: 12px) {
  width: $size;

  &:before,
  &:after,
  div {
    background-color: $color;
    border-radius: 1px;
    content: '';
    display: block;
    height: $thickness;
    margin: 4px 0;
    transition: all 0.2s ease-in-out;
    width: 100%;
  }

  &:before {
    margin: 0;
  }

  &:after {
    margin: 0 0 0 auto;
  }

  &.active {
    &:before {
      transform: translateY($translate) rotate(135deg);
    }

    &:after {
      margin: 10px 0;
      width: auto;
      transform: translateY(-$translate) rotate(-135deg);
    }

    div {
      transform: scale(0);
    }
  }
}