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

.ma__page-flipper {

  .pre-content > &,
  .post-content &,
  .main-content--full .page-content > & {

    @include ma-container();
  }

  .post-content &:last-child {
    margin-bottom: 30px;

    @media ($bp-medium-min) {
      margin-bottom: 45px;
    }
  }

  &__context-label {
    text-transform: uppercase;
    font-size: $fonts-xsmall;
    letter-spacing: $letter-spacing-large;
    font-weight: bold;
  }

  &__context-label + .ma__decorative-link {
    margin-bottom: 20px;
  }

  &__container {
    border-top-style: solid;
    border-top-width: 2px;
    display: flex;
      align-items: stretch;
    overflow: hidden;
    width: 100%;
  }

  &__blank,
  .ma__arrow-nav {
    flex-basis: 400px;
    flex-grow: 1;
    flex-shrink: 1;
    margin-top: 20px;
    max-width: 50%;

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

  &__blank {
    margin-top: 0;
  }

  .ma__arrow-nav:first-child {
    border-right-style: solid;
    border-right-width: 1px;
    margin-right: -1px;
    padding-right: 20px;

    @media ($bp-small-min) {
      padding-right: 40px;
    }
  }

  .ma__arrow-nav:nth-child(2) {
    border-left-style: solid;
    border-left-width: 1px;
    margin-left: -1px;
    padding-left: 20px;

    @media ($bp-small-min) {
      padding-left: 40px;
    }
  }
}

//theme

.ma__page-flipper {

  &__container {
    border-color: $c-bd-divider;
  }

  &__context-label {
    color: rgba($c-font-link, .7);
  }

  &__blank,
  .ma__arrow-nav {
    border-color: $c-bd-divider;
  }
}