@reference "../../global.css";

.playground {
  --playground-page-padding: 24px;
  --playground-gap: 24px;
  box-sizing: border-box;
  padding-top: var(--header-height, 0px);
  color: var(--playground-text);
  background: var(--playground-page-bg);
  @apply flex flex-col w-full h-dvh overflow-hidden;
}

.playground-main {
  min-height: 0;
  flex: 1 1 auto;
  overflow: hidden;
  box-sizing: border-box;
  padding: 0 var(--playground-page-padding) var(--playground-page-padding);
}

.playground .repl {
  display: grid;
  grid-template-columns:
    minmax(0, var(--repl-main-left-width, calc((100% - var(--playground-gap)) / 2)))
    var(--playground-gap)
    minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) minmax(220px, 0.62fr);
  grid-template-areas:
    'repl-input-panel repl-main-resizer repl-output-panel'
    'repl-input-panel repl-main-resizer repl-detail-panel';
  gap: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  overflow: visible;
  background: transparent;
}

.playground .repl-panel {
  min-width: 0;
  min-height: 0;
  @apply border-[1.6px] border-border-base rounded-2xl bg-background-base;
}

.playground .repl-input-panel,
.playground .repl-output-panel,
.playground .repl-detail-panel {
  overflow: hidden;
}

.playground .repl-input-panel {
  grid-area: repl-input-panel;
}

.playground .repl-output-panel {
  grid-area: repl-output-panel;
  border-bottom: 0;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.playground .repl-detail-panel {
  grid-area: repl-detail-panel;
  border-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.playground .repl-detail-panel .repl-tab-buttons {
  @apply border-t-[1.6px] border-border-base;
}

.playground .repl-main-resizer {
  grid-area: repl-main-resizer;
  align-self: stretch;
  width: var(--playground-gap);
}

.playground .repl-main-resizer:hover .repl-main-resizer-line {
  box-shadow: 0 0 0 4px rgba(178, 228, 255, 0.7);
  @apply bg-border-base;
}

@media (max-width: 90rem) {
  .playground {
    padding-top: 0;
  }

  .playground-main {
    padding: 0;
  }

  .playground .repl-output-panel {
    border-bottom: 1.6px solid var(--playground-border);
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
  }

  .playground .repl-detail-panel {
    border-top: 1.6px solid var(--playground-border);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
  }

  .playground .repl-detail-panel .repl-tab-buttons {
    border-top: 0;
  }

  .playground .repl-panel {
    @apply border-0;
  }
}
