// ESL Media core definition mixin
.esl-media-init(@tagName: esl-media) {
  @{tagName} {
    display: block;

    .esl-media-inner {
      display: block;
      width: 100%;
    }

    .esl-media-inner:not(audio) {
      height: 100%;
    }

    iframe.esl-media-inner {
      border: 0;
    }

    &.esl-media-bg {
      position: relative;
      .esl-media-inner {
        z-index: -1;
        pointer-events: none;
      }
      &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
    }

    &[fill-mode='cover'],
    &[fill-mode='inscribe'] {
      position: relative;
      overflow: hidden;

      height: 100%;

      .esl-media-inner {
        position: absolute;
        top: var(--esl-media-y-offset, 50%);
        left: var(--esl-media-x-offset, 50%);
        transform: translate(
          calc(var(--esl-media-x-offset, 50%) * -1),
          calc(var(--esl-media-y-offset, 50%) * -1)
        );

        // Safari & FF are not recognize video size otherwise
        min-width: 1px;
        min-height: 1px;
      }
    }

    &:not([wide])[fill-mode='cover'] .esl-media-inner,
    &[wide][fill-mode='inscribe'] .esl-media-inner {
      width: auto;
      height: 100%;
    }

    &:not([wide])[fill-mode='inscribe'] .esl-media-inner,
    &[wide][fill-mode='cover'] .esl-media-inner {
      width: 100%;
      height: auto;
    }

    // Alignments
    &.esl-media-top {
      --esl-media-y-offset: 0%;
    }
    &.esl-media-bottom {
      --esl-media-y-offset: 100%;
    }
    &.esl-media-left {
      --esl-media-x-offset: 0%;
    }
    &.esl-media-right {
      --esl-media-x-offset: 100%;
    }
  }
}