/**
 * Media utilities
 */

@use 'sass:math';
@use 'sass:map';
@use '@ecl/vanilla-layout-grid/mixins/breakpoints';

// Exposed variables
$theme: null !default;

@mixin aspect-ratio($width, $height) {
  display: block; // for safari
  position: relative !important;

  /* stylelint-disable-next-line */
  &::before {
    content: '' !important;
    display: block !important;
    padding-top: math.div($height, $width) * 100% !important;
    width: 100% !important;
  }

  /* stylelint-disable-next-line */
  .ecl-u-media-content {
    height: 100% !important;
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
  }

  /* stylelint-disable-next-line */
  > iframe {
    bottom: 0;
    left: 0;

    // Avoid video flickering in chrome
    min-height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
  }
}

/*
   * Media size
   */
@each $breakpoint in map.keys(map.get($theme, 'breakpoint')) {
  @include breakpoints.up($breakpoint) {
    $infix: breakpoints.infix($breakpoint, map.get($theme, 'breakpoint'));

    @each $key, $value in map.get($theme, 'media') {
      .ecl-u-media-a#{$infix}-#{$key} {
        height: $value !important;
        width: $value !important;
      }

      .ecl-u-media-h#{$infix}-#{$key} {
        width: $value !important;
      }

      .ecl-u-media-v#{$infix}-#{$key} {
        height: $value !important;
      }
    }
  }
}

/*
   * Media ratio
   */
.ecl-u-media-ratio-16-9 {
  @include aspect-ratio(16, 9);
}

.ecl-u-media-ratio-4-3 {
  @include aspect-ratio(4, 3);
}

.ecl-u-media-ratio-3-2 {
  @include aspect-ratio(3, 2);
}

.ecl-u-media-ratio-1-1 {
  @include aspect-ratio(1, 1);
}

/*
   * Background origin
   */
.ecl-u-media-bg-origin-border {
  background-origin: border-box !important;
}

.ecl-u-media-bg-origin-padding {
  background-origin: padding-box !important;
}

.ecl-u-media-bg-origin-content {
  background-origin: content-box !important;
}

/*
   * Background position
   */
.ecl-u-media-bg-position-initial {
  background-position: 0 0 !important;
}

.ecl-u-media-bg-position-top {
  background-position: top !important;
}

.ecl-u-media-bg-position-bottom {
  background-position: bottom !important;
}

.ecl-u-media-bg-position-left {
  background-position: left !important;
}

.ecl-u-media-bg-position-right {
  background-position: right !important;
}

.ecl-u-media-bg-position-center {
  background-position: center !important;
}

/*
   * Background repeat
   */
.ecl-u-media-bg-repeat-all {
  background-repeat: repeat !important;
}

.ecl-u-media-bg-repeat-x {
  background-repeat: repeat-x !important;
}

.ecl-u-media-bg-repeat-y {
  background-repeat: repeat-y !important;
}

.ecl-u-media-bg-repeat-none {
  background-repeat: no-repeat !important;
}

/*
   * Background size
   */
.ecl-u-media-bg-size-auto {
  background-size: auto !important;
}

.ecl-u-media-bg-size-contain {
  background-size: contain !important;
}

.ecl-u-media-bg-size-cover {
  background-size: cover !important;
}
