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

.ma__featured-item-mosaic {

    @include ma-container();

    // Accordion behavior

    .ma__featured-item-mosaic__toggle {

      @include ma-button-reset;

      @include ma-link-underline;

      @include ma-chevron;
      font-size: $fonts-medium;
      padding-right: 10px;

      .less {
        display: none;
      }

      &[aria-expanded="true"] {

        .more {
          display: none;
        }

        .less {
          display: inline;
        }
      }

      &:after {
        margin-left: 0;
        transform: translateY(-45%) rotate(45deg);

      }

      &[aria-expanded="true"]:after {
          transform: translateY(-55%) rotate(-135deg);
        }

      @media ($bp-small-min) {
        display: none;
      }
    }

    @media ($bp-small-max) {

      &.is-open {

        .js-accordion-content {
          display: initial;
        }
      }

      .js-accordion-content {
        display: none;
      }
    }
}

.ma__featured-item-mosaic__container {
    margin-left: -10px;
    margin-right: -10px;
    margin-bottom: 10px;

    @media ($bp-small-min) {
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        justify-content: space-between;
    }

    .ma__divider {
      margin-top: 20px;

      @media ($bp-small-min) {
        margin-top: 50px;
      }

    }

}

.ma__featured-item-mosaic__column {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;

    .ma__featured-item + .ma__featured-item {
        margin-top: 20px;
    }

    @media ($bp-small-min) {
      display: flex !important; // override JS-hidden accordion behavior on non-mobile
      flex-basis: 50%;
      max-width: 50%;
      flex-direction: row;
    }

    @media ($bp-large-min) {
      flex-basis: 33%;
      max-width: 33%;
    }


    @media ($bp-small-min) and ($bp-large-max) {
    //       last odd child gets flowed

      &:last-child:nth-child(odd) {
        flex-basis: 100%;
        max-width: 100%;
        justify-content: space-between;

        .ma__featured-item {
          margin-top: 0;
          width: calc(50% - 10px);
        }
      }
    }

}

//theme

.ma__featured-item-mosaic__toggle {
  color: $c-font-link;
  font-weight: $fonts-bold;

  &:after {
    border-color: $c-font-link;
    opacity: .5;
  }

  &:hover {
    border-color: rgba($c-font-link,.5);
  }
}