@import '../constants/colors';
@import '../constants/dimensions';

.pane {
  height: 100%;
  width: 100%;
  display: grid;
  grid-template-rows: $height-nav 1fr;
  grid-template-columns: 1fr;

  .pane__header {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: $bg-super-light;
    color: $font-super-light-bg;
    border-left: 1px solid $hl-md;
    box-sizing: border-box;

    &.pane__header--grey {
      background: $bg-light;
      border-left: 1px solid $hl-xs;
    }
  }

  .pane__body {
    border-left: 1px solid $hl-md;
    box-sizing: border-box;
  }

  .pane__body--placeholder {
    overflow: hidden;
    padding: $padding-md;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: $hl-xxl;

    & > * {
      min-width: 20em;
    }

    .pane__body--placeholder__cta {
      width: auto;
      margin: $padding-lg auto 0;
      display: block;

      & > * {
        margin: $padding-xs;
      }
    }
  }
}

body[data-platform="win32"] .pane .pane__header {
  border-top: 1px solid $hl-md;
}