@use '../../theme/ontimeColours' as *;
@use '../../theme/v2Styles' as *;

$menu-width: 2.75rem;
$rundown-width: 44.5rem;
$playback-width: 26rem;

@mixin absolute-top-right($distance) {
  position: absolute;
  top: $distance;
  right: $distance;
  cursor: pointer;
  color: $ui-white;
  transition-property: color;
  transition-duration: $transition-time-action;

  &:hover {
    color: $ontime-color;
  }
}

.corner {
  display: none;
  @include absolute-top-right(0.5rem);
  transform: rotate(45deg);
}

.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: 2rem 1fr;
  grid-template-areas: 
    'menu overview'
    'menu main';
  gap: 0.5rem;
}

.overview {
  grid-area: overview;
  background-color: $white-10;
}

.panelContainer {
  grid-area: main;

  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: $rundown-width $playback-width 1fr;
  grid-template-areas:
    'rundown play info'
    'rundown mess info';
  gap: 0.5rem;
  overflow: hidden;

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

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

.rundown {
  grid-area: rundown;

  .content {
    height: calc(100% - 1.5rem);
    overflow: hidden;
  }
}

.info {
  grid-area: info;
  min-width: 17rem;
  max-width: 800px;

  .content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
}

.messages {
  grid-area: mess;
  min-width: 24rem;
}

.playback {
  grid-area: play;
  max-height: 380px;
  min-width: 26rem;
}

.content {
  padding-top: 1.5rem;
}

.rundown {
  .content {
    padding-top: 0.5rem;
  }
}