@import "../settings/variables";

.detail-page {
  background-color: $detail-layout-background;
  height: 100%;
  min-width: $detail-layout-min-width;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  &__actions {
    padding-left: spacing(xl);

    > button,
    > a {
      &:first-child {
        margin-left: 0;
      }

      margin-left: spacing(sm);
    }
  }

  &__banner {
    width: 100%;
    margin-top: spacing(lg);

    & + .detail-page__title {
      margin-top: spacing(lg);
    }
  }

  &__body {
    width: 100%;
    min-width: $detail-layout-body-min-width;
    padding: 0px spacing(xl) spacing(xl);

    &--width-md {
      max-width: $detail-layout-body-max-width-md;
    }
    &--width-lg {
      max-width: $detail-layout-body-max-width-lg;
    }
    &--width-xl {
      max-width: $detail-layout-body-max-width-xl;
    }
    &--width-block {
      max-width: $detail-layout-body-max-width-block;
    }
  }

  &__breadcrumbs {
    margin-top: spacing(lg);

    & + .detail-page__title {
      margin-top: spacing(xl);
    }
  }

  &__header {
    align-self: stretch;
    padding: 0 spacing(xl);

    &--drop-shadow {
      background-color: $detail-layout-component-background;
      box-shadow: 0px 6px 12px rgba(23, 26, 28, 0.12),
        0px 0px 4px rgba(23, 26, 28, 0.12);
    }
  }

  &__tabs {
    margin-top: spacing(sm);
  }

  &__title {
    display: flex;
    justify-content: space-between;
    margin-top: spacing(sm);
    width: 100%;
  }

  &__card {
    margin-top: spacing(xl);
    width: 100%;

    & > .detail-page__banner {
      padding: $detail-layout-section-content-min-margin
        $detail-layout-section-content-min-margin 0
        $detail-layout-section-content-min-margin;
      max-width: 100%;

      &:empty {
        padding-top: spacing(sm);
      }
    }

    &
      > .detail-page__section--divide:first-child
      > .detail-page__section__inner {
      border-top: 0px;
    }
    &
      > .detail-page__banner
      + .detail-page__section
      > .detail-page__section__inner {
      border-top: 0;
    }
  }

  &__body > &__banner:first-child,
  &__body > &__title {
    margin-top: spacing(xl);
  }

  &__footer {
    background-color: $detail-layout-component-background;
    box-shadow: 0px 4px 8px rgba(23, 26, 28, 0.08),
      0px 0px 4px rgba(23, 26, 28, 0.08);
    width: 100%;

    position: fixed;
    bottom: 0px;
    left: 0;
    padding: spacing(lg) 0;

    display: flex;
    justify-content: center;

    &--at-bottom {
      position: absolute;
    }

    &__content {
      width: 100%;
      align-items: center;
      display: flex;
      justify-content: flex-end;
      padding: 0 spacing(xl);

      &--width-md {
        max-width: $detail-layout-body-max-width-md;
      }
      &--width-lg {
        max-width: $detail-layout-body-max-width-lg;
      }
      &--width-xl {
        max-width: $detail-layout-body-max-width-xl;
      }
      &--width-block {
        max-width: $detail-layout-body-max-width-block;
      }
    }

    &__notation {
      flex-grow: 1;
      z-index: 1;
    }
  }

  &__footer-spacer {
    height: $detail-layout-footer-height;
  }

  &__section {
    margin-left: auto;
    margin-right: auto;
    padding-left: $detail-layout-section-content-min-margin; // space for a collapse button
    padding-right: $detail-layout-section-content-min-margin;

    &:first-child {
      padding-top: spacing(lg);
    }

    &:last-child {
      padding-bottom: spacing(lg);
    }

    .detail-page__section {
      margin-left: -1 * $detail-layout-section-content-min-margin;
      margin-right: -1 * $detail-layout-section-content-min-margin;
      margin-top: spacing(xxl);
      padding-top: 0;
      padding-bottom: 0;

      &:first-child,
      & + .detail-page__section {
        margin-top: 0;
      }

      &:last-child {
        & > .detail-page__section__inner {
          padding-bottom: 0;
        }
      }
    }

    [data-jss-placeholder="form__row"] + & {
      margin-top: spacing(xs);
    }

    [data-jss-placeholder="form__row"]:last-of-type {
      margin-bottom: -28px;
    }

    &--divide {
      & > .detail-page__section__inner {
        border-top: 1px solid $detail-layout-section-divide-color;
      }
    }

    &__inner {
      padding-bottom: spacing(xxl);
      padding-top: spacing(xxl);
    }

    &__header {
      align-items: center;
      display: flex;
      position: relative;
      // min-height on header for alignment:
      //  - when heading line height is less than the collapse button height
      //  - when heading line height is less than the button size it will shift
      //      the heading text when the section is opened and buttons appear
      min-height: $button-md-height;
      word-break: break-word;

      & + .detail-page__section__content-region {
        padding-top: 28px;
      }
    }

    &__collapse-heading {
      position: absolute;
      left: -1 *
        (
          $detail-layout-section-collapse-button-width +
            $detail-layout-section-collapse-button-margin
        );
      top: 0;
    }

    &__content-region {
      .detail-page__section--expand-closed & {
        padding-top: 0;
      }
    }
  }
}

// Solving if a card starts with:
//  - a single anonymous section
//  - a banner then a single anonymous section
// and is followed by:
//  - a named section
// then
//  - reduce the visual space
.detail-page__section--level-anonymous:first-child,
.detail-page__banner + .detail-page__section--level-anonymous {
  & + .detail-page__section--level-2,
  & + .detail-page__section--level-3 {
    & > .detail-page__section__inner {
      margin-top: -1 * spacing(xxl);
    }
  }
}