$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);

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

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

.Polaris-EmptyState__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;
  }
}

.Polaris-EmptyState__ImageContainer,
.Polaris-EmptyState__DetailsContainer {
  flex: 1 1 auto;
  padding: 0;
  margin: 0;

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

.Polaris-EmptyState__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;
  }
}

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

.Polaris-EmptyState__Actions {
  margin-top: spacing();
}

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

  @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;
  }
}
