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

.pane {
  display: grid;
  grid-template-rows: @height-nav minmax(0, 1fr);
  grid-template-columns: 100%;

  .pane__header {
    background: var(--color-bg);
    position: relative;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background: var(--color-bg);
    color: var(--color-font);
    box-sizing: border-box;

    border-left: 1px solid @hl-md;
    border-bottom: 1px solid @hl-md;
    border-top: 1px solid @hl-md;

    .pane__header__right {
      box-shadow: -@padding-md 0 @padding-md -@padding-sm var(--color-bg);
      background: var(--color-bg);
      font-size: @font-size-sm;
    }
  }

  .pane__body {
    border-left: 1px solid @hl-md;
    box-sizing: border-box;
    height: 100%;
    background: var(--color-bg);
    color: var(--color-font);
  }

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

    &, * {
      color: @hl;
    }

    & > * {
      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;
}