@charset "UTF-8";

@mixin responsive-video($ratio: null) {
  position: relative;
  &::before {
    content: "";
    display: block;
    @if not $ratio {
      padding-top: 56.25%;
    } @else if $ratio {
      @if type-of($ratio) == string {
        $width: null;
        $height: null;
        @if str-index($ratio, "/") {
          $fslash-index: str-index($ratio, "/");
          $width: __convertToNumber(str-slice($ratio, 1, $fslash-index - 1));
          $height: __convertToNumber(str-slice($ratio, $fslash-index + 1));
        } @else if str-index($ratio, ":") {
          $colon-index: str-index($ratio, ":");
          $width: __convertToNumber(str-slice($ratio, 1, $colon-index - 1));
          $height: __convertToNumber(str-slice($ratio, $colon-index + 1));
        }
        $calc: math.div($height, $width) * 100;
        padding-top: #{$calc * 1%};
      } @else if type-of($ratio) == number {
        padding-top: math.div(1, $ratio) * 100%;
      }
    }
  }
  & > * {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}