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

$detail-width: rem(336px);

$stacking-order: (
  illustration: 0,
  details: 10,
);

$left-offset: 35%;
$right-offset: 10%;

// Multiply by 2 to expand the image size to align with design requirements
$illustration-left-margin: $left-offset * -2;

// Shift the illustration to the left to overlap with Details
$illustration-width: calc(100% + #{$left-offset} * 2);

// Respect the right offset on mobile so the illustration shows the correct
// crop zone
$illustration-width-cropped: calc(
  #{$illustration-width} + #{$right-offset} * 2
);

.EmptyState {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  margin: spacing(loose) auto 0 auto;
  padding: spacing(loose) 0;
  max-width: $page-max-width;
}

.imageContained {
  .Image {
    @include page-content-when-not-partially-condensed {
      position: initial;
      width: 100%;
    }
  }
}

.Section {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  width: 100%;

  @include page-content-when-not-partially-condensed {
    left: spacing(loose);
    flex-direction: row;
    align-items: center;
  }
}

.ImageContainer,
.DetailsContainer {
  flex: 1 1 auto;
  padding: 0;
  margin: 0;

  @include page-content-when-not-partially-condensed {
    flex-basis: 50%;
  }

  @include page-content-when-fully-condensed {
    overflow-x: hidden;
  }
}

.Details {
  position: relative;
  z-index: z-index(details, $stacking-order);
  padding: 0 spacing();
  width: $detail-width;

  @include page-content-when-not-fully-condensed {
    padding: 0;
  }
}

.Content {
  @include text-style-display-small;
  @include text-emphasis-subdued;
}

.Actions {
  margin-top: spacing();
}

.Image {
  position: relative;
  z-index: z-index(illustration, $stacking-order);
  margin-top: spacing(loose) * -1;
  margin-left: $illustration-left-margin;
  width: $illustration-width-cropped;
  max-width: none;

  @include page-content-when-not-fully-condensed {
    margin-left: 0;
    width: 100%;
  }

  @include page-content-when-not-partially-condensed {
    margin-top: 0;
    margin-left: $illustration-left-margin;
    width: $illustration-width;
  }
}

.FooterContent {
  @include text-emphasis-subdued;
  margin-top: spacing();
}