.conductor {
  /* 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-1: rgba(0, 128, 255, 0.02);
  --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-6: rgba(217, 217, 224, 1);
  --slate-8: rgba(185, 187, 198, 1);
  --slate-9: rgba(139, 141, 152, 1);
  --slate-10: rgba(128, 131, 141, 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-5: rgba(0, 9, 50, 0.12);
  --slate-alpha-6: rgba(0, 0, 47, 0.15);
  --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);

  --white-alpha-11: rgba(255, 255, 255, 0.9);

  --red-2: rgba(255, 247, 247, 1);
  --red-4: rgba(255, 219, 220, 1);
  --red-6: rgba(253, 189, 190, 1);
  --red-9: rgba(229, 72, 77, 1);
  --red-11: rgba(206, 44, 49, 1);

  --green-9: rgba(48, 164, 108, 1);

  --white: rgb(255, 255, 255);

  --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;
  --font-size-4: 1.125rem;
  --font-size-5: 1.25rem;
  --font-size-6: 1.5rem;
  --font-size-7: 1.75rem;
  --font-size-8: 2.1875rem;
  --font-size-9: 3.75rem;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-heavy: 700;

  --line-height-1: 1rem;
  --line-height-2: 1.25rem;

  --letter-spacing-1: 0.0025rem;
  --letter-spacing-2: 0;

  /* https://www.figma.com/design/LQVIPOB1BtW1AwR1cgu705?m=dev&vars=1&var-id=605-3073&var-set-id=605-3059&fuid=1514548755443050425 */
  --radius-small-2: 2px;
  --radius-small-3: 3px;
  --radius-small-4: 4px;
  --radius-medium-1: 3px;
  --radius-medium-2: 4px;
  --radius-medium-3: 6px;
  --radius-medium-4: 8px;

  --form-border: 1px solid var(--slate-alpha-5);
  --form-border-radius: var(--radius-small-3);
  --form-border-focus: var(--blue-9);
  --form-border-focus-ring: 1px solid var(--form-border-focus);
  --form-inner-shadow: rgba(0, 0, 0, 0.1) 2px 2px 3px 0px inset, rgb(28, 32, 36) 0px 0px 0px 0px;
  --form-box-shadow: var(--form-inner-shadow), 0 0;

  --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(--slate-12);
  --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 var(--spacing-1);
  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;

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

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

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

@keyframes conductor__spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.conductor {
  .conductor__tab-list {
    display: flex;
    flex-shrink: 0;
    justify-content: space-between;
    margin-bottom: var(--spacing-4);
    padding: 0 2px;

    border-bottom: 1px solid var(--slate-6);

    color: var(--slate-11);

    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(--slate-11);
    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(--slate-12);
    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;
  }
}
