// ————————————– // // tools.intrinsic-ratio // Fluid Embeds and whatever WITH NO JAVASCIPT! // // ————————————–

$intrinsic-ratio: 16 / 9 !default $intrinsic-ratio-width: 100% !default $intrinsic-ratio-elements: “> *” !default $intrinsic-ratio-extend: true !default $intrinsic-ratio-direction: top !default

intrinsic-ratio-parent($extend: $intrinsic-ratio-extend)

@if $extend
  @extend %intrinsic-ratio-parent
@else
  position: relative
  height: 0

intrinsic-ratio-child($extend: $intrinsic-ratio-extend)

@if $extend
  @extend %intrinsic-ratio-child
@else
  display: block
  position: absolute
  width: 100% !important
  // Nuke the external styles
  height: 100% !important
  // Nuke the external styles
  top: 0
  margin: 0
  padding: 0

intrinsic-ratio-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $direction: $intrinsic-ratio-direction)

padding-#{$direction}: 1 / $ratio * $width
width: $width

intrinsic-ratio($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend, $direction: $intrinsic-ratio-direction)

+intrinsic-ratio-parent($extend)
+intrinsic-ratio-ratio($ratio, $width, $direction)
@each $element in $elements
  #{$element}
    +intrinsic-ratio-child($extend)

ir($ratio: $intrinsic-ratio, $width: $intrinsic-ratio-width, $elements: $intrinsic-ratio-elements, $extend: $intrinsic-ratio-extend, $direction: $intrinsic-ratio-direction)

+intrinsic-ratio($ratio, $width, $elements, $extend, $direction)

%intrinsic-ratio-parent

+intrinsic-ratio-parent(false)

%intrinsic-ratio-child

+intrinsic-ratio-child(false)