$navigation-elements-height: rem(36px);
$title-height: line-height(display-large, large-screen);
$action-horizontal-padding: (1.5 * spacing(tight));

$difference-between-touch-area-and-backdrop: control-height() - control-slim-height();

$stacking-order: (
  title: 10,
  breadcrumbs: 20,
);

html, body {
  min-height: 100%;
  height: 100%;
}

.Polaris-Page {
  @include page-layout;
}

.Polaris-Page--fullWidth {
  max-width: none;
}

.Polaris-Page--singleColumn {
  max-width: layout-width(primary, max);
}

.Polaris-Page__Content {
  @include page-content-layout;
}

.Polaris-Page__Header {
  @include page-header-layout;
}

.Polaris-Page__Header--hasPagination,
.Polaris-Page__Header--hasBreadcrumbs {
  padding-top: spacing(loose);
}

.Polaris-Page__Header--hasSecondaryActions {
  @include page-header-has-secondaryactions;
}

.Polaris-Page__Header--hasSeparator {
  padding-bottom: spacing();
  border-bottom: border();

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

.Polaris-Page__Header--hasRollup {
  .Polaris-Page__IndividualActions {
    display: none;
  }

  @include page-content-when-not-partially-condensed {
    .Polaris-Page__Rollup {
      display: none;
    }

    .Polaris-Page__IndividualActions {
      display: flex;
    }
  }
}

.Polaris-Page__Navigation {
  display: flex;
  justify-content: space-between;
  margin-bottom: spacing(extra-tight);
}

.Polaris-Page__Pagination {
  margin-left: auto;
}

.Polaris-Page__MainContent {
  display: flex;
  align-items: center;
}

.Polaris-Page__TitleAndActions {
  flex: 1 1 0%;
}

.Polaris-Page__Title {
  @include layout-flex-fix;
  word-wrap: break-word;
  word-break: break-word;
}

.Polaris-Page__Title--hidden {
  @include visually-hidden;
}

.Polaris-Page__Actions {
  @include page-actions-layout;
}

.Polaris-Page__SecondaryActions {
  flex: 1;
}

.Polaris-Page__IndividualActions {
  display: flex;
  align-items: flex-start;

  > .Polaris-Page__Action,
  > .Polaris-Page__ActionGroup {
    &:first-child {
      // Compensates for the fact that we push the icon slightly to the left
      margin-left: -1 * $action-horizontal-padding;
    }

    &:last-child {
      margin-right: -1 * $action-horizontal-padding;
    }
  }
}

.Polaris-Page__PrimaryAction {
  display: flex;
  align-self: stretch;
  align-items: center;

  .Polaris-Page__MainContent > & {
    display: none;
    margin-left: spacing(loose);
  }

  @include page-content-when-not-partially-condensed {
    display: none;

    .Polaris-Page__MainContent > & {
      display: flex;
    }
  }
}

.Polaris-Page__Action {
  @include unstyled-button;
  @include text-style-body;
  display: inline-flex;
  align-items: center;
  position: relative;
  min-height: control-height();
  text-decoration: none;

  // Negative margin vertically for the amount that is not covered by
  // the focus overlay
  margin-top: -0.5 * $difference-between-touch-area-and-backdrop;
  margin-bottom: -0.5 * $difference-between-touch-area-and-backdrop;
  padding: 0 $action-horizontal-padding;
  color: color(ink, light);

  &:hover,
  &:active {
    color: color(ink);

    .Polaris-Page__ActionIcon {
      @include recolor-icon(color(ink));
    }
  }

  &:focus,
  &:active {
    &::after {
      background: plain-button-background();
    }
  }

  &::after {
    content: '';
    display: block;
    position: absolute;
    left: spacing(extra-tight);
    right: spacing(extra-tight);
    top: 0.5 * $difference-between-touch-area-and-backdrop;
    height: control-slim-height();
    border-radius: border-radius();
    background: transparent;
    will-change: background;
    transition-property: background;
    transition-duration: duration();
    transition-timing-function: easing();
  }

  &.Polaris-Page--disabled {
    color: color(ink, lightest);
    cursor: default;
    pointer-events: none;

    .Polaris-Page__ActionIcon {
      @include recolor-icon(color(ink, lightest));
    }
  }
}

.Polaris-Page__ActionContent {
  display: flex;
  align-items: center;
}

.Polaris-Page__ActionIcon {
  @include recolor-icon(color(ink, lighter));
  display: inline-block;

  &:first-child {
    margin-right: spacing(extra-tight);
  }

  &:last-child {
    margin-left: spacing(extra-tight);

    // This compensates for the disclosure icon, which is substantially
    // inset within the viewbox (and makes it look like there is too much
    // spacing on the right of the button)
    margin-right: -3px;
  }

  &.Polaris-Page--disabled {
    @include recolor-icon(color(ink, lightest));
  }
}

.Polaris-Page__Details {
  padding: spacing();
  margin-top: -1 * spacing();

  &.Polaris-Page--withActions {
    margin-top: -1 * spacing(tight);
    border-top: border();
  }
}