@use "sass:selector";

@use "sass:meta";

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

.ma__video {

  @include clearfix;

  &__container {
    padding: 13px;
    position: relative;
    padding-bottom: 12px + 29px + 13px;// 12px + 1.5rem + 13px
    background-color: rgba($c-primary,.1);

    @media ($bp-large-min) {
      padding-bottom: 12px + 32px + 13px;
    }

    iframe {
      border: none;
    }
  }

  @media ($bp-small-min) {

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

  .ma__services & {

    @media ($bp-small-min) {
      width: 80%;
    }

    @media ($bp-large-min) {
      width: 100%;
    }

    @media ($bp-large-extended-min) {
      width: 70%;
    }

  }

  // Backward Compatible - had to add the --new as a variant for the new styling

  .main-content--full .page-content > & {

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

  &__link {
    margin-top: 12px;
    position: absolute;
    bottom: 13px;
    font-size: $fonts-small;
    width: calc(100% - 26px);
  }
}

// Backward Compatible - had to add the --new as a variant for the new styling

.ma__video:not(.ma__video--new) {
  padding: 13px;

  .main-content--full .page-content > & {
    // @include ma-container();  // can't use this due to bg color apply to padding
    margin-left: 20px;
    margin-right: 20px;
    max-width: $max-width;
    padding: 13px;

    @media ($bp-medium-min) {
      margin-left: 30px;
      margin-right: 30px;
    }

    @media ($bp-large-min) {
      margin-left: 40px;
      margin-right: 40px;
    }

    @media ($bp-page-width-min) {
      margin-left: auto;
      margin-right: auto;
      max-width: $max-width - 80px;
    }
  }

  .main-content--full .page-content > #{selector.unify("--right", &)} {

    @media ($bp-small-min) {
      margin-left: 1em;
    }

    @media ($bp-large-min) {
      max-width: 400px;
    }

    @media ($bp-page-width-min) {
      margin-right: calc(50vw - (#{$max-width} / 2) + 40px);
    }
  }

  .ma__content-link,
  .ma__decorative-link {
    margin-top: 12px;
  }
}

// Backward Compatible - had to add the --new as a variant for the new styling

.ma__video:not(.ma__video--new) {
  background-color: rgba($c-primary,.1);
}