/* ==========================================================================
 * Main
 * ========================================================================== */

.mds-c-main {
  --mds-t-background-color: var(--mds-t-background-color--primary);

  background-color: var(--mds-t-background-color);
  background-position: center;
  background-size: cover;
  display: flex;
  flex-grow: 1;
  overflow: hidden;
  position: relative;
  width: 100%;
  z-index: 1;

  &--background-light {
    --mds-t-background-color: var(--mds-t-background-color--secondary);
  }

  &__menu {
    @mixin mds-m-scroll-vertical;

    border-left: 1px solid var(--mds-t-border-color--secondary);
    flex-basis: 18rem;
    flex-shrink: 0;
  }

  &__column {
    @mixin mds-m-scroll-vertical;

    flex-basis: 50%;
    flex-grow: 1;
    position: relative;

    &--fixed {
      max-width: 400px;

      .mds-c-main--background-light & {
        /* Backgrounds of second, fixed columns within focused layouts must be primary bg color */
        background-color: var(--mds-t-background-color--primary);
      }
    }

    &--rows {
      overflow: hidden;
    }

    & + & {
      border-left: 1px solid var(--mds-t-border-color--secondary);
    }
  }
}