:root {
  --playground-main-color: var(--ifm-background-surface-color);
  --playground-secondary-color: var(--ifm-color-emphasis-100);
}

.playgroundMenu {
  width: 100%;
  background: var(--playground-main-color);
  overflow: auto;
}

.tabCode {
  flex: 1;
}

.hidden {
  display: none;
}

.playgroundInfoContainer {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: var(--code-editor-bg);
}

.playgroundInfo {
  word-wrap: normal;
  width: 100%;
  position: relative;
  padding: 5px 0;
}

.panelGroup {
  height: calc(100vh - 60px) !important;
  border-top: 1px solid var(--ifm-color-emphasis-200);
}

.Panel {
  display: flex;
  flex-direction: row;
  font-size: 2rem;
}

.PanelColumn,
.PanelRow {
  display: flex;
}

.PanelColumn {
  flex-direction: column;
}

.PanelRow {
  flex-direction: row;
}

.PanelResizeHandle {
  --resize-border-color: var(--playground-main-color);
  --resize-background-color: var(--ifm-color-emphasis-200);

  flex: 0 0 11px;
  background-clip: padding-box;
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  outline: none;
  transition:
    border-color 0.2s linear,
    background-color 0.2s linear;
  background-color: var(--resize-background-color);
  border-color: var(--resize-border-color);
  border-style: solid;
  border-width: 0 5px;
}

.PanelResizeHandle[data-panel-group-direction='vertical'] {
  flex-direction: column;
  border-width: 5px 0;
}

.PanelResizeHandle[data-resize-handle-active],
.PanelResizeHandle:hover {
  --resize-border-color: var(--ifm-color-emphasis-200);
  --resize-background-color: var(--ifm-color-emphasis-300);
}

@media only screen and (width <= 996px) {
  .PanelResizeHandle {
    flex: 0 0 21px;
    border-width: 0 10px;
  }

  .PanelResizeHandle[data-panel-group-direction='vertical'] {
    border-width: 10px 0;
  }
}
