/**
 * Copyright IBM Corp. 2020, 2023
 *
 * This source code is licensed under the Apache-2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */

// mixin to give the ratio for lays doen for an aspect ratio
@use '../../globals/utils/aspect-ratio' as *;

@mixin ratio-base($height, $width, $fixed) {
  @if ($fixed) {
    // fixed ratio overflow hidden
    position: relative;
    overflow: hidden;
    block-size: 0;
    padding-block-start: aspect-ratio($height, $width);
  } @else {
    // graceful ratio overflow similar to a min-height
    display: flex;

    &::before {
      block-size: 0;
      content: '';
      float: inline-start;
      inline-size: 1px;
      margin-inline-start: -1px;
      padding-block-start: aspect-ratio($height, $width);
    }

    &::after {
      display: table;
      clear: both;
      content: '';
    }
  }
}