@use "00-base/configure" as *;

$iframe-ratios: (
  // width-to-height ratio
  "1-to-2": 200%, /* 1:2 Aspect Ratio - vertical */
  "2-to-3": 150%, /* 2:3 Aspect Ratio - vertical */
  "3-to-4": 133.33%, /* 3:4 Aspect Ratio - vertical */
  "1-to-1": 100%, /* 1:1 Aspect Ratio - square */
  "4-to-3": 75%, /* 4:3 Aspect Ratio - horizontal */
  "3-to-2": 66.66%, /* 3:2 Aspect Ratio - horizontal */
  "2-to-1": 50%, /* 2:1 Aspect Ratio - horizontal */
  "3-to-1": 33.33% /* 3:1 Aspect Ratio - horizontal */
);

.ma__iframe {

  @include clearfix;

  &__container {
    font-size: 0;
    padding: 13px;
  }

  &--responsive {

    .ma__iframe__container {
      position: relative;
      width: 100%;
      height: 0;
      overflow: hidden;
      padding-top: 56.25%;/* default to 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */

        @each $option, $ratio in $iframe-ratios {
          &--#{$option} {
            padding-top: $ratio;
          }
        }

        iframe, object, embed {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
        }
    }
  }

  @media ($bp-small-min) {

    &--right &__container {
      float: right;
      margin-left: 1em;
      margin-bottom: 1em;
      width: 50%;
    }
  }

  .main-content--full .page-content .layout--onecol-mass-service-section .layout__region--content > &,
  .main-content .page-content .layout--onecol-mass-service-section .layout__region--content .js-lpb-component  > &,
  .main-content--full .page-content > & {

    @include ma-container('restricted');
  }

  &__link {
    margin-top: 12px;
  }

  iframe {
    width: 100%;
    border: none;
  }
}

// Full page display

.ma__figure--full.ma__iframe__container,
.ma__figure--full .ma__iframe__container {
  padding-right: 0;
  padding-left: 0;
}

//theme

.ma__iframe {

// Comment out for DP-8190
//  &__container {
//    background-color: rgba($c-primary,.1);
//  }

  &__link {
    font-size: $fonts-medium;
  }
}