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

$action-text-spacing: rem(24px);
$primary-action-button-height: rem(36px);
$primary-action-button-width: rem(100px);

.Page {
  @include page-layout;
}

.fullWidth {
  max-width: none;
}

.narrowWidth {
  max-width: layout-width(primary, max);
}

.Content {
  @include page-content-layout;
}

.Header {
  @include page-header-layout;
  @include skeleton-page-header-layout;
}

.Header-hasSecondaryActions {
  @include skeleton-page-header-has-secondary-actions;
}

.BreadcrumbAction {
  padding-top: spacing(base);
  padding-bottom: spacing(base);
  margin-top: (-1 * spacing(extra-tight));
  margin-bottom: (-1 * spacing(extra-tight));
}

.TitleAndPrimaryAction {
  display: flex;

  @include page-content-when-partially-condensed {
    display: block;
  }
}

.Title {
  flex: 1 1 0%;
}

.PrimaryAction {
  align-self: stretch;

  > * {
    height: $primary-action-button-height;
    min-width: $primary-action-button-width;
  }

  @include page-content-when-layout-stacked {
    margin-top: spacing(base);
    margin-bottom: (-1 * spacing(tight));
  }

  @include page-content-when-not-fully-condensed {
    margin-top: $actions-vertical-spacing;
    margin-bottom: (-1 * spacing(tight));
  }

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

  @include page-content-when-layout-not-stacked {
    margin-top: 0;
  }
}

.Actions {
  @include skeleton-page-secondary-actions-layout;
}

.Action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: control-slim-height();
  padding-right: $action-text-spacing;
  margin-top: (-1 * spacing(extra-tight));
  margin-bottom: (-1 * spacing(extra-tight));
  padding-top: spacing();

  &:first-child {
    padding-right: 0;
  }

  @include page-content-when-partially-condensed {
    &:not(:last-child) {
      display: none;
    }
  }
}
