@use './EditorMixin' as editor;

$menu-width: 2.75rem;
$min-playback-width: 27rem;
$max-playback-width: 35rem;
$panel-gap: 0.5rem;

.corner {
  @include editor.corner;
}

.mainContainer {
  background: $ui-black;
  width: 100%;
  height: 100%;
  color: $ui-white;
  padding: 1rem 0.5rem;

  display: grid;
  grid-template-columns: $menu-width auto;
  grid-template-rows: 3rem 1fr;
  grid-template-areas:
    'menu overview'
    'menu main';
  gap: $panel-gap;
}

.panelContainer {
  grid-area: main;

  display: flex;
  gap: $panel-gap;
  overflow: hidden;

  .corner {
    /* we show this if the component hasnt been extracted */
    display: inline;
  }

  .rundown,
  .playback,
  .messages {
    position: relative;
    border-radius: 8px;
    background-color: $bg-container-l2;
    padding: 1rem;
  }
}

.left {
  flex-grow: 1;
  flex-shrink: 1;
  min-width: $min-playback-width;
  max-width: $max-playback-width;
  display: flex;
  flex-direction: column;
  gap: $panel-gap;
}

.messages {
  flex: 1;
}

.content {
  padding-top: 1.5rem;
}