@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%;
    }
  }

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

  .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;
    position: absolute;
    bottom: 13px;
    font-size: $fonts-medium;
    width: calc(100% - 26px);
  }

  @include ma-skip-link;

  // Make the skip link visible on focus.
  // Need the positioning adjiustment because of the transcript link's absolute positioning.

  &__skip-link:focus {
    position: absolute;
    top: -20px;
  }

  // Position skip link target below the transcript link.

  &__skip-link_target a {
    position: absolute;
    bottom: -35px;
  }
}

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

.ma__video:not(.ma__video--new) {

  .main-content--full .page-content .layout--onecol-mass-service-section .layout__region--content > &,
  .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);
}

 // Override style for .ma__rich-text h2:first-child:not(.sticky-toc-jump-target).

.ma__rich-text .ma__video .ma__video-title {
  position: absolute;
}