@import '../../styles/common';

$secondary-basis: $layout-width-secondary-min;
$primary-basis: $layout-width-primary-min;
$one-half-basis: $layout-width-one-half-width-base;
$one-third-basis: $layout-width-one-third-width-base;
$relative-size: $primary-basis / $secondary-basis;

.Layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  margin-top: calc(-1 * var(--p-space-4));
  margin-left: calc(-1 * var(--p-space-5));

  @media print {
    body & {
      font-size: var(--p-font-size-1);
      line-height: var(--p-line-height-1);
    }

    a,
    button {
      color: var(--p-text);
    }
  }
}

.Section {
  flex: $relative-size $relative-size $primary-basis;
  min-width: 51%;

  @media print {
    flex: 2 2 360px;
  }
}

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

.Section-fullWidth {
  flex: 1 1 100%;
}

.Section-oneHalf {
  flex: 1 1 $one-half-basis;
  min-width: 0;
}

.Section-oneThird {
  flex: 1 1 $one-third-basis;
  min-width: 0;
}

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

.Section,
.AnnotatedSection {
  max-width: calc(100% - var(--p-space-5));
  margin-top: var(--p-space-4);
  margin-left: var(--p-space-5);

  + .AnnotatedSection {
    @include page-content-when-not-fully-condensed {
      padding-top: var(--p-space-4);
      border-top: var(--p-border-divider);
    }
  }
}

.AnnotationWrapper {
  display: flex;
  flex-wrap: wrap;
  margin-top: calc(-1 * var(--p-space-4));
  margin-left: calc(-1 * var(--p-space-5));
}

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

.Annotation {
  flex: 1 1 $secondary-basis;
  padding: var(--p-space-4) var(--p-space-5) 0;

  @include page-content-when-not-fully-condensed {
    padding: var(--p-space-4) 0 0;
  }

  @include page-content-when-layout-not-stacked {
    padding: var(--p-space-5) var(--p-space-5) var(--p-space-5) 0;
  }
}

.Annotation,
.AnnotationContent {
  min-width: 0;
  max-width: calc(100% - var(--p-space-5));
  margin-top: var(--p-space-4);
  margin-left: var(--p-space-5);
}

.AnnotationDescription {
  @include text-emphasis-subdued;
}