packages/core/styles/layout/grid.pcss

/**
 * Copyright (c) Facebook, Inc. and its affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 */

:root {
  --ifm-container-width: 1140px;
  --ifm-container-width-xl: 1320px;
}

.container {
  margin: 0 auto;
  max-width: var(--ifm-container-width);
  padding: 0 var(--ifm-spacing-horizontal);
  width: 100%;

  &--fluid {
    max-width: inherit;
  }

  @media (min-width: 1440px) {
    & {
      max-width: var(--ifm-container-width-xl);
    }
  }
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 calc(var(--ifm-spacing-horizontal) * -1);

  & .col {
    --ifm-col-width: 100%;

    flex: 1 0;
    margin-left: 0;
    max-width: 100%;
    padding: 0 var(--ifm-spacing-horizontal);
    width: 100%;

    &[class*='col--'] {
      flex: 0 0 var(--ifm-col-width);
      max-width: var(--ifm-col-width);
    }

    @media (--ifm-narrow-window) {
      &.col.col {
        --ifm-col-width: 100%;
        flex-basis: var(--ifm-col-width);
        margin-left: 0;
      }
    }

    @for $column from 1 to 12 {
      &.col--$(column) {
        --ifm-col-width: calc($(column) / 12 * 100%);
      }

      &.col--offset-$(column) {
        margin-left: calc($(column) / 12 * 100%);
      }
    }
  }

  &--no-gutters {
    margin-left: 0;
    margin-right: 0;

    & > .col {
      padding-left: 0;
      padding-right: 0;
    }
  }

  &--align-top {
    align-items: flex-start;
  }

  &--align-bottom {
    align-items: flex-end;
  }

  &--align-center {
    align-items: center;
  }

  &--align-stretch {
    align-items: stretch;
  }

  &--align-baseline {
    align-items: baseline;
  }
}