.cuesheetEditor,
.rundownEditor {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: auto;
}

.rundownEditor {
  // width is locked to swatch picker elements
  min-width: calc(15 * 2rem + 13 * 0.5rem);

  // we dont want a scrollbar when in the modal
  .content {
    overflow-y: scroll;
  }
}

.content {
  padding-inline: 0.5rem 1.5rem;
  padding-bottom: 4rem;

  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.timeSettings {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.column {
  display: flex;
  flex-direction: column;
  gap: 1rem;

  h3 {
    margin-bottom: -0.5rem; // bring the title closer to the section elements
  }
}

.decorated {
  color: var(--decorator-color, $ui-white);
  background-color: var(--decorator-bg, $gray-1100);
  width: fit-content;
  padding-inline: 0.5rem;
  border-radius: $component-border-radius-sm;
}

.delayLabel {
  font-size: $aux-text-size;
  color: $ontime-delay-text;

  &::after {
    content: '\200b';
  }
}

.switchLabel {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: max-content;
  cursor: pointer;
  height: 2rem; // manually match the height of a text input
  margin-bottom: 0; // reset margin from label component
}

.inline {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.splitTwo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 1rem;
  row-gap: 1rem;
}

.splitThree {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  column-gap: 1rem;
  row-gap: 1rem;
}

.tooltipIcon {
  color: $blue-500;
  display: inline-block;
  font-size: 1.25em;
  margin-left: 0.25em;
}

.customImage {
  display: grid;
  grid-template-columns: 1fr 72px;
  gap: 1rem;
}

/* approximating the style of a disabled input */
.textLikeInput {
  background: transparent;
  justify-content: start;
  width: 7.5em;
  border: 1px solid transparent;
  border-bottom: 1px solid $gray-1100;
}

.inactive {
  color: $muted-gray;
}

.active {
  color: $active-indicator;
}