.pane {
  display: grid;
  grid-template-rows: var(--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-bottom: 1px solid var(--hl-md);

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

  .pane__body {
    box-sizing: border-box;
    height: 100%;
    background: var(--color-bg);
    color: var(--color-font);
  }

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

    &,
    * {
      color: var(--hl);
    }

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

    .pane__body--placeholder__cta {
      width: auto;
      margin: var(--padding-lg) auto 0;
      display: block;

      & > * {
        margin: var(--padding-xs);
      }
    }
  }

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

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

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