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

.ma__figure {
  margin: 0 0 20px 0;

  .ma__rich-text &__skip-link, &__skip-link {
    margin: -29px 0 0 0;
    padding: 0 10px 2px 10px;
    float: left;
    display: block;
    border-bottom: 0;// Reset the link underline from .ma__rich-text a.
    font-size: 1.25rem;
    transition: none;

    &:hover {
      border: none;
    }

    &:not(:focus) {

      @include ma-visually-hidden;

    }
  }

  div[id^='figure-'] {
    // These margin and padding help the link target visible below the sticky nav in stead of hide under the sticky nav.
    margin-top: -80px;
    padding-top: 80px;
    padding-bottom: 1em;
    z-index: -3;
    display: none;

    & .ma__figure__skip-link_destination {
      margin: 0.2em 0 -30px 0;
      padding: 0 10px;
      float: left;
      font-size: 1.25rem;
      font-weight: 550;

      border: 3px solid transparent;
      border-radius: 6px;
      transition: border 0.4s ease;
    }

    &:target {

      & .ma__figure__skip-link_destination {
        // The border is added to be more recognizable.
        border-color: #005fcc;
      }

    }
  }

  figure {
    margin: 0;
    padding: 0;
  }

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

    @include ma-container;
  }

  @media ($bp-small-min) {
    margin: 0 30px 30px 30px;

    // support pre-existing figure elements besides dataviz.

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

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

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

  img {
    width: 100%;
  }

  &__title {

    @include ma-h2;
  }

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

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

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

  // Size - Small

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

    .no-sidebar &--small {
      width: calc(50% - 15px);
    }
  }

  @media ($bp-medium-min) {// 781~

    .no-sidebar &--small {
      width: calc(33.33% - 20px);
      width: calc(100% / 3 - 20px);
    }
  }

  // with right column

  .page-content:not(.no-sidebar) &--small {

    @media (max-width: 1024px) {

      float: none;
      margin-right: 0;
      margin-left: 0;
    }

    @media (min-width: 1025px) {

      width: calc(50% - 15px);
    }
  }

  // Size - Medium

  &--medium {

    @media ($bp-small-min) {// 621~
      width: calc(50% - 15px);
    }
  }

  // with right column

  .page-content:not(.no-sidebar) &--medium {

    @media (max-width: 1024px) {

      width: 100%;
      margin-right: 0 !important;
      margin-left: 0 !important;
      float: none;
    }

    @media (min-width: 1025px) {

      width: calc(50% - 15px);
    }
  }

  // Size - Large

  &--large {
    width: 100%;
  }

  .no-sidebar &--large {

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

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

  .page-content:not(.no-sidebar) &--large {// with right column
    // Always 100% of the paretnt container width
    // No side margins
    margin-right: 0;
    margin-left: 0;
    float: none;
  }

  // Alignment

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

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

  @media ($bp-small-max) {

    &--left,
    &--right {
      float: none;
      margin-right: 0;
      margin-left: 0;
    }
  }

  // No wrapping

  &--no-wrap.ma__figure {
    float: none;
    margin-right: 0;
    margin-left: 0;
  }

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

    @media ($bp-small-min) {

        padding-left: 50%;
    }
  }

  // NO WRAP - Small

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

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

      padding-left: 66.66%;
      padding-left: calc(100% / 3 * 2);
    }
  }

  // NO WRAP - Medium

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

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

      padding-left: 50%;
    }
  }

  // NO WRAP - Large

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

    @media ($bp-large-min) {

      padding-left: 66.66%;
      padding-left: calc(100% / 3 * 2);
    }
  }

  // caption

  &__caption {

    color: $c-font-detail;
    font-weight: bold;
    font-style: normal;
    border-bottom: 1px solid $c-black;
    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 syles on elements in iframe container.

  .ma__figure__skip-link {
    font-size: 1.25rem;
    // font-size: 1.375rem;
    text-decoration: underline;
    height: auto;
    width: auto;
    color: #14558f;

    &:visited {
      color: #800080;
    }
  }

  .ma__figure__skip-link_destination {
    height: auto;
    width: auto;
    font-size: 1.375rem;
  }
}

// MARGIN ADJUSTMENT with side by side layout

.no-sidebar { // 1 col layout, no right column

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

    // Small size - 50% width for 621 - 780

    // left align --- 3rd item, 5th item, 7th item

    .ma__figure--small + .ma__figure--small + .ma__figure--small.ma__figure--left,
    .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small.ma__figure--left,
    .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small.ma__figure--left {
      margin-right: 30px;
    }

    // right align --- 3rd item, 5th item, 7th item

    .ma__figure--small + .ma__figure--small + .ma__figure--small.ma__figure--right,
    .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small.ma__figure--right,
    .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small.ma__figure--right {
      margin-left: 30px;
    }

    // right side items --- 2nd item, 4th item, 6th item

    .ma__figure--small + .ma__figure--small,
    .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small,
    .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small {
      margin: 0 0 30px 0;
    }
  }

  @media ($bp-medium-min) {

    // Small size - 33% width for 780 <

    // left align --- 4th + 5th itmes, 7th + 8th items

    .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small.ma__figure--left,
    .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small.ma__figure--left {
      margin-right: 30px;
    }

    // right align ---  4th + 5th itmes, 7th + 8th items

    .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small.ma__figure--right,
    .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small.ma__figure--right {
      margin-left: 30px;
    }

    // right side items --- 3rd item, 6th item

    .ma__figure--small + .ma__figure--small + .ma__figure--small,
    .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small {
      margin: 0 0 30px 0;
    }
  }
}



@media ($bp-small-min) {

  // Medium size - 50% width for 620 <
  // Apply to layout with/without a right column.

  // left align --- 3rd item, 5th item, 7th item

  .ma__figure--medium + .ma__figure--medium + .ma__figure--medium.ma__figure--left,
  .ma__figure--medium + .ma__figure--medium + .ma__figure--medium + .ma__figure--medium + .ma__figure--medium.ma__figure--left,
  .ma__figure--medium + .ma__figure--medium + .ma__figure--medium + .ma__figure--medium + .ma__figure--medium + .ma__figure--medium + .ma__figure--medium.ma__figure--left {
    margin-right: 30px;
  }

  // right align --- 3rd item, 5th item, 7th item

  .ma__figure--medium + .ma__figure--medium + .ma__figure--medium.ma__figure--right,
  .ma__figure--medium + .ma__figure--medium + .ma__figure--medium + .ma__figure--medium + .ma__figure--medium.ma__figure--right,
  .ma__figure--medium + .ma__figure--medium + .ma__figure--medium + .ma__figure--medium + .ma__figure--medium + .ma__figure--medium + .ma__figure--medium.ma__figure--right {
    margin-left: 30px;
  }

  // right side items --- 2nd item, 4th item, 6th item

  .ma__figure--medium + .ma__figure--medium,
  .ma__figure--medium + .ma__figure--medium + .ma__figure--medium + .ma__figure--medium,
  .ma__figure--medium + .ma__figure--medium + .ma__figure--medium + .ma__figure--medium + .ma__figure--medium + .ma__figure--medium {
    margin: 0 0 30px 0;
  }
}

.page-content:not(.no-sidebar) {// with right column

  @media (min-width: 1025px) {

    // Small size - 50% width for 1024 px <

    // left align --- 3rd item, 5th item, 7th item

    .ma__figure--small + .ma__figure--small + .ma__figure--small.ma__figure--left,
    .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small.ma__figure--left,
    .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small.ma__figure--left {
      margin-right: 30px;
    }

    // right align --- 3rd item, 5th item, 7th item

    .ma__figure--small + .ma__figure--small + .ma__figure--small.ma__figure--right,
    .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small.ma__figure--right,
    .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small.ma__figure--right {
      margin-left: 30px;
    }

    // right side items --- 2nd item, 4th item, 6th item

    .ma__figure--small + .ma__figure--small,
    .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small,
    .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small + .ma__figure--small {
      margin: 0 0 30px 0;
    }
  }
}

//theme

.ma__figure {

  &__caption {
    font-weight: $fonts-lighter;
  }
}