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

$primary-action-button-height: 36px;
$primary-action-button-width: 100px;
$skeleton-display-text-max-width: 120px;

.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;
  padding-bottom: var(--p-space-2);
}

.BreadcrumbAction {
  padding-top: var(--p-space-4);
  padding-bottom: var(--p-space-4);
  margin-top: calc(-1 * var(--p-space-1));
  margin-bottom: calc(-1 * var(--p-space-1));
}

.TitleAndPrimaryAction {
  display: flex;

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

.TitleWrapper {
  flex: 1 1 0%;
}

.Title {
  @include text-emphasis-strong;
  font-size: 24px;
  line-height: 28px;

  @include when-typography-not-condensed {
    font-size: 20px;
  }
}

.SkeletonTitle {
  display: flex;
  background-color: var(--p-surface-neutral);
  border-radius: var(--p-border-radius-base);
  max-width: $skeleton-display-text-max-width;
  height: 28px;

  @media screen and (-ms-high-contrast: active) {
    background-color: grayText;
  }
}

.PrimaryAction {
  align-self: stretch;

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

  @include page-content-when-layout-stacked {
    margin-top: var(--p-space-4);
    margin-bottom: calc(-1 * var(--p-space-2));
  }

  @include page-content-when-not-fully-condensed {
    margin-top: var(--p-space-2);
    margin-bottom: calc(-1 * var(--p-space-2));
  }

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

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

.Actions {
  margin-top: var(--p-space-2);
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-items: center;
}

.Action {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: control-slim-height();
  padding-right: var(--p-space-6);
  margin-top: calc(-1 * var(--p-space-1));
  margin-bottom: calc(-1 * var(--p-space-1));
  padding-top: var(--p-space-4);

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

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