.conductor {
  /* @todo migrate usage of these to the section below */
  --blue-700: rgb(13, 116, 206);
  --blue-600: rgb(0, 144, 255);
  --blue-500: rgb(59 130 246);
  --blue-500-alpha: rgba(59, 130, 246, 0.1);
  --blue-400: rgb(142, 200, 246);
  --blue-300: rgb(191, 219, 254);
  --blue-100: rgb(230, 244, 254);
  --blue-50: rgb(244, 250, 255);
  --navy-900-alpha: rgba(0, 0, 47, 0.149);
  --gray-900: rgb(28, 32, 36);
  --gray-600: rgb(96, 100, 108);
  --gray-500: rgb(128, 131, 141);
  --gray-400: rgb(139, 141, 152);
  --gray-300: rgb(185, 187, 198);
  --gray-200: rgb(217, 217, 224);
  --gray-100: rgb(240, 240, 243);
  --gray-50: rgb(249, 250, 251);

  --white: rgb(255, 255, 255);
  --form-border: 1px solid rgba(0, 9, 50, 0.1216);
  --form-border-radius: 3px;
  --focus-box-shadow: 0 0 0 2px var(--blue-500);
  --menu-border: 1px solid rgba(252, 252, 253, 1);
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-heavy: 700;
  --font-size-tiny: 0.75rem;
  --font-size-small: 0.875rem;

  /* Variables from Canvas Design System */
  /* https://www.figma.com/design/0NFfNz2uJWs8Kr2pMpLXPf/External---Experience-Builder---Design-System?node-id=0-1&p=f&vars=1&var-id=502-4908&m=dev */
  --blue-2: rgba(244, 250, 255, 1);
  --blue-3: rgba(230, 244, 254, 1);
  --blue-6: rgba(172, 216, 252, 1);
  --blue-8: rgba(94, 177, 239, 1);
  --blue-9: rgba(0, 144, 255, 1);
  --blue-11: rgba(13, 116, 206, 1);
  --slate-1: rgba(252, 252, 253, 1);
  --slate-2: rgba(249, 249, 251, 1);
  --slate-3: rgba(240, 240, 243, 1);
  --slate-8: rgba(185, 187, 198, 1);
  --slate-9: rgba(139, 141, 152, 1);
  --slate-11: rgba(96, 100, 108, 1);
  --slate-12: rgba(28, 32, 36, 1);
  --slate-alpha-2: rgba(0, 0, 85, 0.02);
  --slate-alpha-3: rgba(0, 0, 51, 0.06);
  --slate-alpha-7: rgba(0, 6, 46, 0.2);
  --black-alpha-1: rgba(0, 0, 0, 0.05);
  --black-alpha-3: rgba(0, 0, 0, 0.15);
  --red-4: rgba(255, 219, 220, 1);
  --red-9: rgba(229, 72, 77, 1);
  --red-11: rgba(206, 44, 49, 1);
  --green-9: rgba(48, 164, 108, 1);

  --spacing-1: 0.25rem; /* 4px */
  --spacing-2: 0.5rem; /* 8px */
  --spacing-3: 0.75rem; /* 12px */
  --spacing-4: 1rem; /* 16px */
  --spacing-5: 1.5rem; /* 24px */
  --spacing-6: 2rem; /* 32px */
  --spacing-7: 2.5rem; /* 40px */
  --spacing-8: 3rem; /* 48px */
  --spacing-9: 4rem; /* 64px */

  --font-size-1: 0.75rem;
  --font-size-2: 0.875rem;
  --font-size-3: 1rem;
  --line-height-1: 1rem;
  --line-height-2: 1.25rem;
  --letter-spacing-1: 0.0025rem;
  --letter-spacing-2: 0;
  --radius-small-2: 2px;
  --radius-small-3: 3px;
  --radius-small-4: 4px;
  --radius-medium-1: 3px;
  --radius-medium-2: 4px;
  --radius-medium-3: 6px;
  --input-border: 1px solid var(--slate-9);
  --shadow-4: 0 var(--spacing-3) var(--spacing-6) calc(0 - var(--spacing-1)) var(--slate-alpha-3), 0 var(--spacing-2) var(--spacing-7) 0 var(--black-alpha-1);
  --shadow-6: 0 16px 36px -20px var(--slate-alpha-7), 0 16px 64px 0 var(--slate-alpha-2), 0 12px 60px 0 var(--black-alpha-3);

  --default-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI (Custom)', Roboto, 'Helvetica Neue',
  'Open Sans (Custom)', system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji';
  --default-font-color: var(--gray-900);
  --default-font-size: var(--font-size-2);
  --default-font-weight: var(--font-weight-regular);
  --default-line-height: var(--line-height-1);

  display: flex;
  flex-direction: column;
  min-height: 60vh;
  padding: 0;
  overflow-x: hidden;

  color: var(--default-font-color);
  font-family: var(--default-font-family);
  font-size: var(--default-font-size);
  font-weight: var(--default-font-weight);
  line-height: var(--default-line-height);

  --conductor-pop-in: conductor__pop-in 0.3s ease-in forwards;
  --conductor-fade-in: conductor__fade-in 0.3s ease-in;

  --ck-content-font-color: var(--default-font-color);
  --ck-content-font-family: var(--default-font-family);
  --ck-content-font-size: var(--default-font-size);
  --ck-content-font-weight: var(--default-font-weight);
  --ck-content-line-height: var(--default-line-height);
  --ck-color-base-background: var(--slate-1);

  &:focus-within,
  &:focus {
    outline: 0;
  }

  input {
    accent-color: var(--blue-600);
  }
}

@keyframes conductor__pop-in {
  from {
    transform: translateY(10px);

    opacity: 0;
  }
  to {
    transform: translateY(0);

    opacity: 1;
  }
}

@keyframes conductor__fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.conductor__tab-list {
  display: flex;
  flex-shrink: 0;
  justify-content: space-between;
  margin-bottom: 0.625rem;
  padding: 0 2px;

  border-bottom: 1px solid var(--gray-200);

  color: var(--gray-600);

  list-style: none;
}

.conductor__tab-panel {
  display: none;
  flex-grow: 1;
  padding: 0 2px;
}

.conductor__tab-panel.react-tabs__tab-panel--selected {
  display: grid;
}

.conductor__tab {
  margin: var(--spacing-1) var(--spacing-2);
  padding: var(--spacing-1) var(--spacing-2);

  border-radius: var(--spacing-1);

  color: var(--gray-600);
  font-size: var(--font-size-1);
  list-style: none;

  cursor: pointer;
}

.conductor__tab:hover {
  background: var(--slate-3);
}

.conductor__tab:focus {
  outline: none;
}

.conductor__tab.react-tabs__tab--selected {
  margin: 0;
  padding: var(--spacing-2) var(--spacing-3);

  border-bottom: 2px solid var(--blue-500);
  border-radius: var(--radius-small-4) var(--radius-small-4) 0 0;

  color: var(--gray-900);
  font-weight: var(--font-weight-medium);
}

.conductor__tab.react-tabs__tab--disabled {
  cursor: default;
}
.conductor__tab.react-tabs__tab--disabled:hover {
  background: none;
}

.conductor__no-drafts-message {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-6);

  border: 1px solid var(--red-4);
  border-radius: var(--radius-small-4);

  color: var(--red-11);
  font-size: var(--font-size-2);
  text-align: center;
}
