$secondary-basis: layout-width(secondary, min);
$primary-basis: layout-width(primary, min);
$relative-size: $primary-basis / $secondary-basis;

.Polaris-Layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin-top: -1 * spacing(loose);
  margin-left: -1 * spacing(loose);
}

.Polaris-Layout__Section {
  flex: $relative-size $relative-size $primary-basis;
  min-width: 51%;
}

.Polaris-Layout__Section--secondary {
  flex: 1 1 $secondary-basis;
  min-width: 0;
}

.Polaris-Layout__Section--fullWidth {
  flex: 1 1 100%;
}

.Polaris-Layout__AnnotatedSection {
  min-width: 0;
  flex: 1 1 100%;
}

.Polaris-Layout__Section,
.Polaris-Layout__AnnotatedSection {
  max-width: calc(100% - #{spacing(loose)});
  margin-top: spacing(loose);
  margin-left: spacing(loose);

  + .Polaris-Layout__AnnotatedSection {
    @include page-content-when-not-fully-condensed {
      padding-top: spacing(loose);
      border-top: border();
    }
  }
}

.Polaris-Layout__AnnotationWrapper {
  display: flex;
  flex-wrap: wrap;
  margin-top: -1 * spacing(loose);
  margin-left: -1 * spacing(loose);
}

.Polaris-Layout__AnnotationContent {
  flex: $relative-size $relative-size $primary-basis;
}

.Polaris-Layout__Annotation {
  flex: 1 1 $secondary-basis;
  padding: spacing(loose) spacing(loose) 0;

  @include page-content-when-layout-not-stacked {
    padding: spacing(loose) spacing(loose) spacing(loose) 0;
  }
}

.Polaris-Layout__Annotation,
.Polaris-Layout__AnnotationContent {
  min-width: 0;
  max-width: calc(100% - #{spacing(loose)});
  margin-top: spacing(loose);
  margin-left: spacing(loose);
}
