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

.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: calc(@padding-md * -1) 0 @padding-md calc(@padding-sm * -1) 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;
      }
    }
  }

  .pane__footer {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-top: 1px solid var(--hl-md);
    height: @line-height-xs;
    font-size: @font-size-sm;

    input {
      font-family: @font-monospace;
      margin-right: 0;
      width: 100%;
      margin-left: @padding-md;
    }

    button {
      color: var(--hl);
      padding: @padding-xs @padding-md;
      height: 100%;
    }
  }
}

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