// vf-embed

@import 'package.variables.scss';
// Debug information from component's `package.json`:
// ---
/*!
 * Component: #{map-get($componentInfo, 'name')}
 * Version: #{map-get($componentInfo, 'version')}
 * Location: #{map-get($componentInfo, 'location')}
 */

@import 'vf-embed.variables.scss';

.vf-embed {

  max-width: var(--vf-embed-max-width, 100%);
  position: relative;

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

.vf-embed--16x9 {
  padding-bottom: calc(9 / 16 * (100% - (100% - var(--vf-embed-max-width, 100%))));
}
.vf-embed--4x3 {
  padding-bottom: calc(3 / 4 * (100% - (100% - var(--vf-embed-max-width, 100%))));
}

.vf-embed--custom-ratio {
  padding-bottom: calc( var(--vf-embed-custom-ratio-y) / var(--vf-embed-custom-ratio-x) * (100% - (100% - var(--vf-embed-max-width, 100%))))
}