@import "overrides.less";

.uv-iiif-extension-host.uv-mediaelement-extension {
  .mejs-container.mejs-uv {
    background-color: @body-bg;
  }

  /**
   * responsive mode for videos of different aspect ratios
   * https://github.com/mediaelement/mediaelement/blob/master/docs/usage.md#use-stretching-modes
   */
  .mejs__container.mejs__video,
  .mejs__container.mejs__video video {
    max-width: 100%;
    max-height: 100%;
  }

  .centerPanel {
    .content {
      position: relative;

      .attribution {
        .sm-mediaquery({
          margin: 25px 20px;
        });

        .md-mediaquery({
          margin-bottom: 60px !important;
        });
      }

      .wrapper {
        width: 100%;
        height: 100%;
        overflow: hidden;

        .container {
          display: flex;
          align-items: center;
          margin: auto;
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}