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

.Card {
  overflow: hidden;
  background-color: color('white');
  box-shadow: shadow();

  + .Card {
    margin-top: spacing(loose);
  }

  @include page-content-when-not-fully-condensed {
    border-radius: border-radius();
  }

  @media (-ms-high-contrast: active) {
    box-shadow: inset 0 0 0 border-width(base) ms-high-contrast-color('text');
  }
}

.subdued {
  background-color: color('sky', 'lighter');
}

.Header {
  padding: spacing() spacing() 0;

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

.Section {
  padding: spacing();

  @include page-content-when-not-fully-condensed {
    padding: spacing(loose);
  }

  + .Section {
    border-top: border();
  }
}

.Section-fullWidth {
  padding: spacing(loose) spacing(none);
}

.Section-subdued {
  background-color: color('sky', 'lighter');

  @media (-ms-high-contrast: active) {
    background-color: transparent;
  }

  .Header + & {
    border-top: border();
    margin-top: spacing(loose);
  }
}

.SectionHeader {
  padding-bottom: spacing(tight);

  .Section-fullWidth & {
    padding-left: spacing();
    padding-right: spacing();

    @include page-content-when-not-fully-condensed {
      padding-left: spacing(loose);
      padding-right: spacing(loose);
    }
  }
}

.Subsection {
  + .Subsection {
    margin-top: spacing();
    padding-top: spacing();
    border-top: border();
  }
}

.Footer {
  display: flex;
  justify-content: flex-end;
  padding: 0 spacing() spacing();

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

  .Section-subdued + & {
    border-top: border();
    padding: spacing(loose);
  }
}
