/* -------------------------------------------- */
/*                 ASPECT RATIO                 */
/* -------------------------------------------- */

@function aspect-ratio($height, $width) {
  @return calc(calc(#{$height} / #{$width}) * 100%);
}

.ratio {
  position: relative;
  overflow: hidden;
  display: block;

  &::before {
    content: "";
    display: block;
    padding-top: calc(var(--#{$prefix}ratio) * 100%);
    background-color: var(--#{$prefix}ratio-bg-color);

    @if ($aspect-ratio-bg-svg) {
      background-image: $aspect-ratio-bg-svg;
      background-size: $aspect-ratio-bg-size;
      background-repeat: no-repeat;
      background-position: center;
    }
  }

  &.no-placeholder::before {
    background-image: none !important;
  }

  > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: auto;
  }

  svg,
  img {
    width: 100%;
    height: auto;
    color: transparent;
  }

}

@each $key, $ratio in $aspect-ratios {
  .ratio-#{$key} {
    --#{$prefix}ratio: #{$ratio};
  }
}