.eventEditor {
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow-x: auto;

  &.inModal {
    max-height: 80vh;
  }
}

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

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

.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;
}

.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;
}