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

$x-small: 100% / 4;
$small: 100% / 3;
$medium: 100% / 2;
$figures-gutter: 30px;

.ma__figure {
  margin: 0 0 20px 0;

  @include ma-skip-link;

  figure {
    margin: 0;
    padding: 0;
  }

  .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;
  }

  @media ($bp-x-small-min) {
    margin: 10px $figures-gutter 10px $figures-gutter;
  }

  @media ($bp-small-min) {
    // support pre-existing figure elements besides dataviz.

    &--left,
    &--align-left,
    &.align-left {
      float: left;
      margin-left: 0;
      width: 50%;
    }

    &:not(.ma__figure-iframe) {

      &.align-left {
        max-width: 50%;
        width: auto;
      }
    }

    &--right,
    &--align-right,
    &.align-right {
      float: right;
      margin-right: 0;
      width: 50%;
    }

    &:not(&-iframe) {

      &.align-right {
        max-width: 50%;
        width: auto;
      }
    }
  }

  &--full {
    transition: width 0.2s;
    margin-right: 0;
    margin-left: 0;
  }

  img {
    max-width: 100%;
  }

  &__caption {
    font-size: $fonts-small;
    font-style: italic;
    line-height: 1.57;
  }

  // Size - Extra large
  // Always 100% of the parent container width
  // No side margins

  &--x-large {
    width: 100%;
    margin-right: 0;
    margin-left: 0;
  }

  // Size - Small + X-small

  @media ($bp-x-small-min) {

    &--x-small {
      width: calc(#{$medium} - #{$figures-gutter});
    }

    &--x-small:not(&-iframe) {
      max-width: calc(#{$medium} - #{$figures-gutter});
      width: auto;
    }
  }

  @media ($bp-x-small-min) and ($bp-small-max) {

    &--small {
      width: 100%;
      margin-right: 0;
      margin-left: 0;
    }
  }

  @media ($bp-small-min) {
    // 621~

    &--x-small,
    &--small {
      width: calc(#{$medium} - #{$figures-gutter});
    }

    &--x-small:not(&-iframe),
    &--small:not(&-iframe) {
      max-width: calc(#{$medium} - #{$figures-gutter});
      width: auto;
    }
  }

  @media ($bp-medium-min) {
    // 781~
    // default size with BP 780<

    &--x-small {
      width: calc(#{$x-small} - #{$figures-gutter})
    }

    &--x-small:not(&-iframe) {
      max-width: calc(#{$x-small} - #{$figures-gutter});
      width: auto;
    }

    &--small {
      width: calc(#{$small} - #{$figures-gutter});
    }

    &--small:not(&-iframe) {
      max-width: calc(#{$small} - #{$figures-gutter});
      width: auto;
    }
  }

  @media ($bp-x-large-min) {
    // 1200<

    .page-content &--x-small {
      width: calc(#{$x-small} - #{$figures-gutter});
    }

    .page-content &--x-small:not(&-iframe) {
      max-width: calc(#{$x-small} - #{$figures-gutter});
      width: auto;
    }
  }
  // Size - Medium

  &--medium {

    @media ($bp-small-min) {
      // 621~
      width: calc(#{$medium} - #{$figures-gutter});

      &:not(.ma__figure-iframe) {
        max-width: calc(#{$medium} - #{$figures-gutter});
        width: auto;
      }
    }
  }

  // Size - Large

  &--large {
    width: 100%;
  }

  &--large.ma__dataviz,
  &--large.ma__iframe__container {

    @media ($bp-large-max) {
      width: 100%;
      margin-right: 0;
      margin-left: 0;
      float: none;
    }

    @media ($bp-large-min) {
      width: calc(100% / 3 * 2);
    }
  }

  // Sidebar 911-1050 - the main well gets as narrow as 451px with a sidebar in this range
  // Make the widths larger in percentage of the main well width

  @media ($bp-large-min) and ($bp-large-extended-max) {

    .page-content:not(.no-sidebar) &--x-small,
    .page-content:not(.no-sidebar) &--small {
      width: 50%;
    }

    .page-content:not(.no-sidebar) &--medium,
    .page-content:not(.no-sidebar) &--large {
      width: 100%;
    }
  }

  // Alignment

  &--left {
    float: left;
    margin-left: 0;
  }

  &--right {
    float: right;
    margin-right: 0;
  }

  @media ($bp-small-max) {

    &--left:not(.ma__figure-image),
    &--right:not(.ma__figure-image) {
      float: none;
      margin-right: 0;
      margin-left: 0;
    }
  }
  // No wrapping

  &--no-wrap {

    @include clearfix;

    .ma__figure {
      margin-left: 0;
      margin-right: 0;
    }

    figure {
      margin-bottom: 0 !important;
    }
  }

  // This is an override for the flexible pages using stack row container, to avoid duplicated margins
  // Currently, info details page and org page flexible layouts are using different containers, causing unexpected descrepencies in spacing between blocks of content.

  .ma__stacked-row__section &--no-wrap .ma__figure {
    margin-bottom: 0;

    .ma__figure__caption {
      margin-bottom: 0;
    }
  }

  /* NO sidebar - used in org pages stacked row sections
     NO wrap - no text wrapping
  */
  // Small

  .no-sidebar &--no-wrap .ma__figure--right.ma__figure--x-small,
  .no-sidebar &--no-wrap .ma__figure--right.ma__figure--small {

    &,
    &.ma__dataviz,
    &.ma__iframe__container {

      @media ($bp-small-min) {
        // 621~
        width: auto;
        max-width: 100%;
        padding-left: calc(100% / 3 * 2); //66.66%
      }
    }
  }

  // Medium

  .no-sidebar &--no-wrap .ma__figure--right.ma__figure--medium {

    &,
    &.ma__dataviz,
    &.ma__iframe__container {

      @media ($bp-small-min) {
        // 621~
        width: auto;
        max-width: 100%;
        padding-left: 50%;
      }
    }
  }

  // Large

  .no-sidebar &--no-wrap .ma__figure--large {
    width: 100%;

    @media ($bp-large-min) {
      width: calc(100% / 3 * 2);
    }

    &.ma__dataviz {

      @media ($bp-large-max) {
        width: 100%;
        margin-right: 0;
        margin-left: 0;
        float: none;
      }
    }

    // Align right

    &.ma__figure--right {

      &,
      &.ma__iframe__container {
        width: 100%;

        @media ($bp-large-min) {
          padding-left: calc(100% / 3); //33.33%
        }
      }
    }
  }

  // caption

  &__caption {
    color: var(--mf-c-font-detail);
    font-weight: bold;
    font-style: normal;
    border-bottom: 1px solid var(--mf-c-gray-darkest);
    padding: 10px 0;

    @media ($bp-small-min) {
      padding: 15px 0;
    }
  }

  .ma__rich-text &__caption {

    h2,
    h3,
    h4,
    h5,
    h6,
    p,
    ul,
    ol,
    blockquote,
    article,
    .ma__table--responsive {
      margin-bottom: 10px;
      padding-top: 0;
      padding-bottom: 0;

      @media ($bp-small-min) {
        margin-bottom: 15px;
      }
    }
  }

  .ma__rich-text &__caption > :last-child {
    margin-bottom: 0;
  }
}

.ma__figure.ma__iframe__container {

  // Reset initial styles on elements in iframe container.

  .ma__figure__skip-link {
    font-size: $fonts-medium;
    text-decoration: underline;
    height: auto;
    width: auto;
    color: var(--mf-c-bay-blue);

    &:visited {
      color: var(--mf-c-visited);
    }
  }

  .ma__figure__skip-link_destination {
    height: auto;
    width: auto;
    font-size: $fonts-large;
  }
}

// MARGIN

.ma__figure--x-small.ma__figure--left,
.ma__figure--small.ma__figure--left {

  @media ($bp-x-small-min) {
    // 480px <
    margin-right: $figures-gutter;
  }
}

// right align

.ma__figure--x-small.ma__figure--right,
.ma__figure--small.ma__figure--right {

  @media ($bp-small-min) {
    // 480px <
    margin-left: $figures-gutter;
  }
}


//theme

.ma__figure {

  &__caption {

    font-weight: $fonts-light;
  }
}