html.dark-mode {
  form {
    --border-color: var(--gray-600);
    --input-border: 1px solid var(--border-color);
  }

  & .accordion summary,
  & .email-log {
    background-color: var(--gray-800);
    border-color: var(--gray-900);
  }

  & .ace_editor {
    /* Taken from the ace twilight theme */
    background-color: #141414;
    color: #f8f8f8;

    & .ace_gutter {
      background: #232323;
      color: #e2e2e2;
    }

    & .ace_print-margin {
      width: 1px;
      background: #232323;
    }

    & .ace_cursor {
      color: #a7a7a7;
    }

    & .ace_marker-layer .ace_selection {
      background: rgba(221 240 255 / 0.2);
    }

    &.ace_multiselect .ace_selection.ace_start {
      box-shadow: 0 0 3px 0 #141414;
    }

    & .ace_marker-layer .ace_step {
      background: rgb(102 82 0);
    }

    & .ace_marker-layer .ace_bracket {
      margin: -1px 0 0 -1px;
      border: 1px solid rgba(255 255 255 / 0.25);
    }

    & .ace_marker-layer .ace_active-line {
      background: rgba(255 255 255 / 0.031);
    }

    & .ace_gutter-active-line {
      background-color: rgba(255 255 255 / 0.031);
    }

    & .ace_marker-layer .ace_selected-word {
      border: 1px solid rgba(221 240 255 / 0.2);
    }

    & .ace_invisible {
      color: rgba(255 255 255 / 0.25);
    }

    & .ace_keyword,
    & .ace_meta {
      color: #cda869;
    }

    & .ace_constant,
    & .ace_constant.ace_character,
    & .ace_constant.ace_character.ace_escape,
    & .ace_constant.ace_other,
    & .ace_heading,
    & .ace_markup.ace_heading,
    & .ace_support.ace_constant {
      color: #cf6a4c;
    }

    & .ace_invalid.ace_illegal {
      color: #f8f8f8;
      background-color: rgba(86 45 86 / 0.75);
    }

    & .ace_invalid.ace_deprecated {
      text-decoration: underline;
      font-style: italic;
      color: #d2a8a1;
    }

    & .ace_support {
      color: #9b859d;
    }

    & .ace_fold {
      background-color: #ac885b;
      border-color: #f8f8f8;
    }

    & .ace_support.ace_function {
      color: #dad085;
    }

    & .ace_list,
    & .ace_markup.ace_list,
    & .ace_storage {
      color: #f9ee98;
    }

    & .ace_entity.ace_name.ace_function,
    & .ace_meta.ace_tag {
      color: #ac885b;
    }

    & .ace_string {
      color: #8f9d6a;
    }

    & .ace_string.ace_regexp {
      color: #e9c062;
    }

    & .ace_comment {
      font-style: italic;
      color: #5f5a60;
    }

    & .ace_variable {
      color: #7587a6;
    }

    & .ace_xml-pe {
      color: #494949;
    }

    & .ace_indent-guide {
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQImWMQERFpYLC1tf0PAAgOAnPnhxyiAAAAAElFTkSuQmCC")
        right repeat-y;
    }

    & .ace_indent-guide-active {
      background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAACCAYAAACZgbYnAAAAEklEQVQIW2PQ1dX9zzBz5sz/ABCcBFFentLlAAAAAElFTkSuQmCC")
        right repeat-y;
    }
  }

  & .account-dropdown.dropdown > button:hover,
  & .account-dropdown.dropdown > button:active,
  & .account-dropdown.dropdown > button:focus {
    background-color: var(--gray-800);
  }

  & .account-dropdown.dropdown > button svg {
    color: var(--purple-400);
  }

  & .admin-area header {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
  }

  & .admin-area-filter-options a {
    background-color: var(--gray-900);
    color: var(--gray-50);
  }

  & .admin-area-filter-options a:hover,
  & .admin-area-filter-options a:active {
    background-color: var(--gray-900);
  }

  & .admin-area-filter-options a:first-child,
  & .admin-area-filter-options a:last-child {
    border-color: var(--gray-700);
  }

  & .admin-area-filter-options a.active {
    background-color: var(--gray-800);
    color: var(--gray-200);
  }

  & .admin-area-filter-options a.active:hover {
    background-color: var(--gray-900);
  }

  & .admin-list li {
    color: var(--gray-200);
  }

  & .admin-list li .li-border {
    border-color: var(--gray-700);
  }

  & .admin-list li .metadata {
    color: var(--gray-400);
  }

  & .admin-list li a.active {
    background-color: var(--gray-900);
    outline-color: var(--gray-900);
  }

  & .admin-list li a:hover {
    background-color: var(--gray-850);
  }

  & .admin-list li a.active:hover {
    background-color: var(--gray-900);
    outline-color: var(--gray-900);
  }

  & .admin-list li a,
  & .admin-list li a:visited {
    color: var(--gray-400);
  }

  & .admin-list li a.list-invitation .list-invitation--ref {
    color: var(--gray-400);
  }

  & .admin-list li b {
    color: var(--gray-100);
  }

  & .admin-list--timeline {
    & li {
      &.admin-list--timeline-date {
        background-color: var(--gray-700);
      }

      & > details > summary:hover {
        background-color: var(--gray-850);
      }

      & details[open] {
        border-color: var(--scampi-700);
      }

      & .admin-list--timeline-link:hover {
        background-color: inherit;
      }

      & .object-changes .changes-from {
        color: var(--red-300);
      }

      & .object-changes .changes-to {
        color: var(--green-300);
      }
    }
  }

  & .app-main {
    background: var(--gray-700);
  }

  & .app-main > main {
    background: var(--gray-800);
  }

  & .app-main > main {
    @media (width >= 768px) {
      border-top: 1px solid black;
      border-left: 1px solid black;
    }
  }

  & .applied-filters a.filter {
    background-color: var(--gray-800);
  }

  & .badge {
    background-color: var(--gray-700);
    border: 1px solid var(--gray-600);
    color: var(--gray-100);
  }

  & body {
    background-color: var(--gray-800);
    color: var(--gray-200);

    @media (width >= 768px) {
      background-color: var(--gray-700);
    }
  }

  & .box {
    background-color: var(--gray-700);
  }

  & .btn {
    border-color: var(--gray-600);
    color: var(--gray-200);
  }

  & .btn.btn-link,
  & .btn.btn-link:hover {
    border-color: transparent;
  }

  & .btn:hover:not([aria-disabled="true"]) {
    background-color: var(--gray-900);
    border-color: var(--purple-400);
    color: var(--purple-400);
  }

  & .btn.btn-primary {
    border-color: var(--custom-accent-color, var(--scampi-500));
    background-color: var(--custom-accent-color, var(--scampi-500));
    color: var(--custom-accent-color-contrast, black);
  }

  & .btn.btn-primary:hover:not([aria-disabled="true"]) {
    background-color: var(--scampi-600);
    border-color: var(--scampi-600);
    color: var(--custom-accent-color-contrast, black);
  }

  & .btn.btn-secondary {
    background-color: var(--gray-700);
  }

  & .btn.btn-success {
    border-color: var(--success-color);
  }

  & .btn.btn-success:hover:not([aria-disabled="true"]) {
    background-color: var(--success-color-hover);
    border-color: var(--success-color-hover);
    color: var(--gray-200);
  }

  & .btn.disabled,
  & .btn[aria-disabled="true"] {
    background-color: inherit;
    border-color: var(--gray-600);
    color: var(--gray-600);
  }

  .btn.btn-simple[aria-disabled="true"] {
    background-color: inherit;
    color: var(--gray-500);
  }

  & .btn.btn-toggle {
    background-color: transparent;
    border-color: var(--gray-600);
  }

  & .btn.btn-toggle:hover {
    border-color: var(--purple-400);
  }

  & .btn-close {
    color: var(--gray-200);
  }

  & .btn-close:hover {
    background-color: black;
    color: var(--purple-400);
  }

  & .btn.btn-danger {
    border-color: var(--danger-color);
    color: var(--danger-text);
  }

  & .btn-group > .btn:not([aria-disabled="true"]) {
    background-color: var(--gray-700);
  }

  & .btn-group > .btn.active {
    background-color: transparent;
  }

  & .btn-group > .btn-group:not(:first-child),
  & .btn-group > :not(.btn-check:first-child) + .btn {
    margin-left: 0;
  }

  & .checkin header,
  & .checkin .stats {
    background-color: var(--gray-900);
  }

  & .checkin .last-ticket h5 {
    color: var(--gray-900);
  }

  & .checkin-history {
    background-color: var(--gray-700);
  }

  & .checkin-history header {
    background-color: var(--gray-900);
  }

  & .dashboard {
    & .dashboard-heading {
      & p a,
      & dl a {
        color: var(--scampi-400);
      }

      & > a {
        &:hover,
        &:active,
        &:focus {
          background-color: var(--gray-900);
          border-color: transparent;
        }
      }

      & .time-ago-unit {
        color: var(--gray-400);
      }
    }
  }

  & .dashboard data {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
  }

  & .dashboard data.list-links ul li a:hover,
  & .dashboard data.list-links ul li a:focus,
  & .dashboard data.list-links ul li a:active {
    background-color: var(--scampi-900);
  }

  & .dashboard data a.widget,
  & .dashboard data > div {
    color: var(--gray-200);
  }

  & .dashboard data > div a {
    color: var(--scampi-400);
  }

  & .dashboard data a.widget b,
  & .dashboard data > div b {
    color: var(--gray-200);
  }

  & .dashboard .card a.btn.btn-link:hover {
    background-color: var(--gray-800);
    border-color: var(--gray-800);
  }

  & .card {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
  }

  & .card header,
  & data header {
    color: var(--gray-200);
  }

  & .card header h2,
  & data header h2 {
    color: var(--gray-200);
  }

  & .card header a,
  & data header a {
    color: var(--scampi-400);

    &[aria-disabled="true"] {
      color: var(--gray-500);
    }
  }

  & data.data-check-ins ul li a:hover,
  & data.data-check-ins ul li a:active,
  & data.data-check-ins ul li a:focus {
    background-color: var(--scampi-900);
  }

  & data.data-check-ins ul li a .progress-stacked {
    background-color: var(--scampi-800);
  }

  & data.data-check-ins ul li a .progress-stacked .bg-success.progress-bar {
    background-color: var(--scampi-600);
  }

  & .card a.btn-link {
    border-color: transparent;
    color: var(--scampi-400);
  }

  a.inline-link {
    color: var(--scampi-400);

    &[aria-disabled="true"] {
      color: var(--gray-500);
    }
  }

  & dialog {
    background-color: var(--gray-900);
    border: 1px solid var(--gray-700);
    color: var(--gray-200);

    & div.modal-content {
      & main {
        & svg {
          &.svg--light {
            display: none;
          }

          &.svg--dark {
            display: block;
          }
        }
      }

      &.test-invitation main svg.svg--dark path.test-bg {
        fill: #1f2837;
      }
    }
  }

  & dialog::backdrop {
    background-color: var(--gray-800);
    opacity: 0.5;
  }

  & dialog header,
  & dialog footer {
    border-color: var(--gray-700);
  }

  & .digital-pass-notification {
    color: var(--gray-900);
  }

  & .digital-pass-example-apple {
    color: var(--foreground-color, var(--gray-900));
  }

  & .dropdown button {
    color: var(--gray-100);

    &.btn {
      border-color: var(--gray-600) !important;
    }
  }

  & .btn-close:hover,
  & .btn-close:active,
  & .btn-close:focus,
  & .dropdown button:hover:not([aria-disabled="true"]),
  & .dropdown button:active:not([aria-disabled="true"]),
  & .dropdown button:focus:not([aria-disabled="true"]) {
    background-color: black;
    color: var(--purple-400);
  }

  & .viewer-area .viewer header {
    & .btn-close:hover,
    & .btn-close:active,
    & .btn-close:focus,
    & .dropdown button:hover:not([aria-disabled="true"]),
    & .dropdown button:active:not([aria-disabled="true"]),
    & .dropdown button:focus:not([aria-disabled="true"]) {
      background-color: black;
      color: var(--purple-400);
    }
  }

  & .dropdown menu {
    background-color: var(--gray-900);
    border-color: black;
  }

  & .dropdown hr {
    background-color: var(--gray-700);
  }

  & .dropdown menu li a,
  & .dropdown menu li button {
    color: var(--gray-200);
  }

  & .dropdown menu li a[disabled],
  & .dropdown menu li a[aria-disabled="true"],
  & .dropdown menu li button[disabled],
  & .dropdown menu li button[aria-disabled="true"] {
    color: var(--gray-500);
  }

  & .dropdown menu li a:hover:not([aria-disabled="true"]),
  & .dropdown menu li button:hover:not([aria-disabled="true"]) {
    background-color: black;
    color: var(--purple-400);
  }

  & .dropdown menu li a[disabled]:hover,
  & .dropdown menu li button[disabled]:hover {
    color: var(--gray-500);
  }

  & .dropdown-divider {
    border-color: var(--gray-700);
  }

  & form footer a:not([class]):hover {
    color: var(--gray-200);
    text-decoration: underline;
  }

  & form select {
    background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23e5e7eb%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  }

  & form input,
  & form textarea {
    background-color: var(--gray-800);
    color: var(--gray-200);
  }

  & form input::placeholder,
  & form textarea::placeholder {
    color: var(--gray-400);
  }

  & form .hint {
    color: var(--gray-400);
  }

  & form input[type="email"],
  & form input[type="text"],
  & form input[type="datetime-local"],
  & form input[type="number"],
  & form input[type="tel"],
  & form input[type="password"],
  & form textarea {
    border-color: var(--gray-600);
  }

  & form input[type="email"]:focus,
  & form input[type="text"]:focus,
  & form input[type="datetime-local"]:focus,
  & form input[type="number"]:focus,
  & form input[type="tel"]:focus,
  & form input[type="password"]:focus,
  & form input[type="submit"]:focus,
  & form textarea:focus,
  & form button:focus-visible,
  & form a:focus-visible {
    outline-color: var(--scampi-700);
  }

  & form .url-field {
    border-color: var(--gray-600);
  }

  & form select {
    background-color: var(--gray-800);
    border-color: var(--gray-600);
    color: var(--gray-200);
  }

  & .choices__item.choices__item--choice.is-selected.choices__item--selectable {
    background-color: var(--gray-900);
  }

  & .choices .choices__inner,
  & .choices .choices__list--dropdown,
  & .choices .choices__list[aria-expanded],
  & .choices[data-type*="select-one"] .choices__input {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
  }

  & .choices__list--dropdown .choices__item--selectable.is-highlighted,
  .choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
    background-color: var(--gray-700);
  }

  & .choices[data-type*="select-one"]::after {
    border-color: var(--gray-200) transparent transparent;
  }

  .editor-with-sidebar {
    --border-color: var(--gray-600);
  }

  & .hint {
    color: var(--gray-400);
  }

  & hr {
    background-color: rgba(0 0 0 / 0.5);
  }

  & .html-preview {
    background-color: var(--gray-800);
  }

  & .main-nav {
    border-color: var(--gray-700);
  }

  & .main-nav footer {
    border-color: var(--gray-600);
  }

  & .main-nav main a {
    color: var(--gray-200);
  }

  & .main-nav main a[aria-disabled="true"] {
    color: var(--gray-500);
  }

  & .main-nav main a:hover:not([aria-disabled="true"]) {
    background-color: var(--gray-800);
  }

  & .main-nav main a:visited {
    color: var(--gray-200);
  }

  & .main-nav main a.current {
    color: var(--purple-300);
  }

  & footer.pagination {
    border-color: var(--gray-700);
  }

  & footer.pagination nav {
    border-color: var(--gray-900);
  }

  & footer.pagination nav .page + .page {
    border-color: var(--gray-900);
  }

  & footer.pagination nav .page.active,
  & footer.pagination nav a.active {
    background-color: var(--purple-400);
    color: var(--gray-900);
  }

  & footer.pagination nav a:hover {
    background-color: var(--gray-900);
  }

  & .home {
    & .io-logo svg path {
      fill: var(--gray-200);
    }

    & form {
      background: var(--gray-800);
    }

    & form .is-required::after {
      color: var(--gray-400);
    }

    & form svg.squiggle {
      opacity: 1;
    }

    & form input,
    & form textarea {
      color: var(--gray-900);
    }
  }

  & .hint .liquid-variable {
    border-color: transparent;
  }

  & .html-preview .devices a {
    background-color: transparent;
    border: 1px solid transparent;
  }

  & .html-preview .devices a:hover,
  & .html-preview .devices a:active,
  & .html-preview .devices a:focus {
    background-color: black;
  }

  & .html-preview .devices a.active {
    border: 1px solid var(--purple-400);
  }

  p.info {
    color: var(--yellow-900);
  }

  & .liquid-variable {
    background-color: var(--gray-800);
    border-color: black;
    color: var(--gray-200);
  }

  & .list-dropdown {
    border-color: var(--gray-700);
  }

  & .list-dropdown:hover {
    border-color: var(--purple-400);
  }

  & .list-dropdown button:hover {
    background-color: var(--gray-800);
  }

  & .pac-container {
    background-color: var(--gray-700);
    border-color: var(--gray-900);
  }

  & .pac-container .pac-item {
    border-color: var(--gray-900);
  }

  & .pac-container .pac-item {
    color: var(--gray-400);
  }

  & .pac-container .pac-item:hover {
    background-color: var(--gray-900);
  }

  & .pac-container .pac-item-query {
    color: var(--gray-200);
  }

  & .pagination-info {
    background-color: var(--scampi-900);
    border-color: var(--scampi-900);
    color: var(--gray-200);
  }

  & .preview-wrapper .preview {
    color: var(--gray-700);
  }

  & .preview-wrapper .preview .btn.btn-primary,
  & .preview-wrapper .preview .btn.btn-primary:hover {
    background-color: var(--custom-accent-color, var(--scampi-700));
    border-color: var(--custom-accent-color, var(--scampi-700));
    color: var(--custom-accent-color-contrast, white);
  }

  & .preview-wrapper .preview .btn.btn-link {
    color: var(--custom-accent-color, var(--scampi-700));
    border-color: transparent;
  }

  & .preview-wrapper .preview .btn.btn-link:hover {
    background-color: transparent;
  }

  & .profile {
    background-color: var(--gray-800);
    border-color: var(--gray-900);
  }

  & .profile .phone-number-verification-field {
    background-color: var(--green-900);

    & .button-field input {
      border-color: var(--success-border);
    }

    & .button-field input[type="submit"] {
      background-color: var(--green-900);

      &:hover {
        background-color: var(--green-800);
        color: var(--green-100);
      }
    }
  }

  & .qr.padded {
    background-color: var(--gray-300);
    border-color: black;
  }

  & .scanner-setup-list a:hover {
    background-color: var(--gray-800);
  }

  & .search-sort-filter {
    border-color: var(--gray-700);
  }

  & .search-sort-filter.with-border {
    border-color: var(--gray-700);
  }

  & .star-form button {
    color: var(--gray-200);
  }

  & .star-form button:hover:not([aria-disabled="true"]) {
    background-color: var(--gray-900);
  }

  & table {
    background-color: transparent;
    border-color: var(--gray-700);
    color: var(--gray-200);
  }

  & table thead th,
  & table tfoot th {
    color: var(--gray-200);
    border-color: var(--gray-700);
  }

  & table th,
  & table td {
    border-color: var(--gray-700);
  }

  & table.table-checkins td {
    border-color: var(--gray-700);
  }

  & .template-editor div.editor div.alert {
    background-color: var(--gray-600);
    border-color: var(--gray-200);

    & svg {
      color: var(--gray-200);
    }

    & p.hint {
      color: var(--gray-200);

      & .liquid-variable {
        background-color: var(--gray-800);
      }
    }
  }

  & .terms,
  & .privacy {
    background-color: var(--gray-900);

    & h1,
    & h2,
    & h3,
    & p a {
      color: var(--scampi-400);
    }

    & .terms-header h1 svg path {
      fill: var(--gray-100);
    }
  }

  & .terms h2 span,
  & .content > p span {
    color: var(--scampi-400);
  }

  & .test-mode-banner {
    background-color: var(--orange-400);
    color: var(--gray-900);

    & .btn {
      background-color: transparent;
      border-color: transparent;
      color: var(--gray-900);

      &:hover,
      &:focus,
      &:active {
        background-color: transparent;
        border-color: var(--gray-900);
        color: var(--gray-900);
      }
    }
  }

  & .test-mode-indicator {
    background: transparent;
    color: var(--orange-400);
    outline-color: var(--orange-400);
  }

  & .toggle-lookup-mode {
    color: var(--gray-200);
  }

  & .toggle-lookup-mode.test {
    color: var(--orange-400);
  }

  & .toggle-lookup-mode:hover {
    background-color: var(--gray-900);
  }

  & .theme-chooser .choices .choice:hover {
    outline-color: var(--gray-800);
  }

  & .text-green {
    color: var(--green-300);
  }

  & .text-red {
    color: var(--red-300);
  }

  & .text-yellow {
    color: var(--yellow-300);
  }

  & .text-muted {
    color: var(--gray-400);
  }

  & .text-warning {
    color: var(--orange-300) !important;
  }

  & .viewer-area {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
  }

  & .viewer-area section dl dd .btn-group form .btn:hover {
    border-color: var(--gray-700);
  }

  & .viewer-area .viewer .alert.alert--danger {
    background-color: var(--red-900);
    color: var(--red-100);
  }

  & .viewer-area .viewer section.main-metadata {
    border-color: var(--gray-700);
  }

  & .viewer-area .viewer section.section-link div.section-link--primary a {
    border-color: var(--gray-700);
  }

  & .viewer-area .viewer section.section-link div.section-link--primary a:hover,
  &
    .viewer-area
    .viewer
    section.section-link
    div.section-link--primary
    a:active,
  &
    .viewer-area
    .viewer
    section.section-link
    div.section-link--primary
    a:focus {
    border-color: var(--scampi-500);

    & .fa-chevron-right {
      color: var(--scampi-500);
    }
  }

  &
    .viewer-area
    .viewer
    section.section-link
    div.section-link--secondary
    a:hover,
  &
    .viewer-area
    .viewer
    section.section-link
    div.section-link--secondary
    a:active,
  &
    .viewer-area
    .viewer
    section.section-link
    div.section-link--secondary
    a:focus {
    & .fa-chevron-right {
      color: var(--scampi-500);
    }
  }

  & .viewer-area .viewer section.section-custom-domain ul li + li {
    border-color: var(--gray-700);
  }

  & .viewer-area .viewer pre {
    background-color: var(--scampi-900);
    border-color: var(--gray-700);
  }

  & .viewer-area .viewer header {
    border-color: var(--gray-700);
  }

  & .viewer-area .viewer header.subheader {
    border-color: var(--gray-700);
  }

  & .viewer-area .viewer section dl dt {
    color: var(--gray-400);
  }

  & .viewer-area .viewer-list li + li {
    border-color: var(--gray-700);
  }

  & .viewer-area .viewer--invite-stats data {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
  }

  & .viewer-area .viewer--invite-stats data.list-links ul li a {
    color: var(--gray-200);
  }

  & .viewer-area .viewer--invite-stats data.list-links ul li a:hover,
  & .viewer-area .viewer--invite-stats data.list-links ul li a:active,
  & .viewer-area .viewer--invite-stats data.list-links ul li a:focus {
    background-color: black;
  }

  & .viewer-area .viewer--invite-stats data > div {
    color: var(--gray-200);
  }

  & .viewer-area .viewer--invite-stats data > div a {
    color: var(--scampi-400);
  }

  & .viewer-area .viewer--invite-stats data > div b {
    color: var(--gray-200);
  }

  & .viewer-area .viewer section.section-guests ul li + li {
    border-color: var(--gray-700);
  }

  & .viewer-area .viewer section dl dd {
    & a:hover,
    & a:active,
    & a:focus {
      & .fa-chevron-right {
        color: var(--purple-400);
      }
    }
  }

  & .viewer-form {
    background-color: var(--gray-800);
    border-color: var(--gray-700);
  }

  & .viewer-form header {
    border-color: var(--gray-700);
  }

  & .viewer-form footer {
    border-color: var(--gray-700);
  }

  & .viewer-form section {
    border-color: var(--gray-700);
  }

  & .uppy-field {
    border-color: var(--gray-700);

    & .actions {
      border-color: var(--gray-700);

      & .btn:not(:last-child) {
        border-right-color: var(--gray-700);
      }
    }

    & .btn {
      background-color: var(--gray-800);
      border-color: var(--gray-700);
      border-left-color: var(--gray-700);
      border-bottom-color: var(--gray-700);
    }

    & .uppy-DragDrop-label {
      color: var(--gray-200);
    }

    & .uppy-DragDrop-note {
      color: var(--gray-400);
    }
  }

  & code[data-controller="clipboard"],
  & .liquid-variable-list pre {
    background-color: var(--gray-700);
  }

  & .liquid-variable-list code strong {
    color: var(--purple-400);
  }

  & .liquid-variable-list .example {
    background-color: var(--gray-800);
    border: 1px solid var(--gray-900);

    & code {
      background-color: var(--gray-900);
    }
  }

  & .search-filter-toggle {
    color: var(--gray-200);

    &:hover {
      background-color: black;
    }
  }

  & .show-import {
    & th.unrecognized-column,
    & td.unrecognized-column {
      background-color: #2c0b0e;
      color: var(--red);
    }
  }

  & .tooltip {
    background-color: var(--scampi-900);
  }

  & .import-column-list dt {
    border-top: 1px solid var(--gray-700);
  }

  & .new-event {
    & .onboarding-header {
      border-color: var(--gray-600);
    }
  }

  & .onboarding {
    background-color: var(--gray-700);

    & .onboarding-header {
      background-color: var(--gray-700);
      border-color: var(--gray-600);

      & .next-button.btn.btn-primary:hover {
        background-color: var(--scampi-600);
        border-color: var(--scampi-600);
        color: black;
      }
    }

    & .preview-pane {
      background-color: var(--gray-700);

      & .theme-settings-menu {
        & header {
          background-color: var(--gray-900);
          border-bottom: 1px solid var(--gray-700);
        }
      }

      & .preview-window {
        & header {
          background-color: var(--gray-800);
        }
      }
    }
  }

  & .preview-window {
    & header.email-preview-header {
      background-color: var(--gray-800) !important;
      border-color: var(--gray-700) !important;
    }
  }

  .customization {
    border-color: var(--gray-700);

    & a {
      color: white;
    }

    & p,
    & span {
      color: var(--gray-400);
    }

    & div.custom-template {
      &:hover {
        & div.iframe {
          border-color: var(--scampi-500);
        }
      }
    }

    & div.iframe {
      border: 1px solid var(--dark-gray);
    }
  }

  .list-and-editor {
    & .editor {
      border-color: var(--gray-700);

      & form {
        & footer {
          border-color: var(--gray-700);

          & .hint button {
            color: var(--scampi-600);
            font-weight: bold;

            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }

    & .file-list {
      & li {
        & a {
          color: var(--gray-400);

          &:hover {
            background-color: var(--gray-900);
          }

          &.active {
            background-color: black;
          }
        }
      }
    }
  }

  & .custom-template-editor {
    & .preview-pane {
      background-color: var(--gray-600);

      & .preview-window {
        & header.email-preview-header {
          background-color: var(--gray-800) !important;
          border-color: var(--gray-700) !important;
        }
      }
    }

    & > form {
      border-color: var(--gray-700);

      & footer {
        border-color: var(--gray-700);
      }
    }

    & .email-preview-header {
      color: var(--gray-200);
    }

    & header.web-preview-header {
      background-color: #343439;

      & input {
        background-color: #343439;
        border: 1px solid var(--gray-600);
        color: var(--gray-100);
      }
    }
  }

  & .billing {
    & .current-plan {
      border-color: var(--gray-600);

      & svg.svg--light {
        display: none;
      }

      & svg.svg--dark {
        display: block;
      }
    }

    & .interval-btn-group-wrapper {
      & .btn-group {
        border-color: var(--gray-900);
      }

      & .btn-group > .btn.active {
        color: var(--gray-200);
      }
    }
  }

  & .billing-plans {
    & .free > div,
    & .free > div dl div {
      border-color: var(--gray-600);
    }

    & .lite > div {
      background-color: var(--scampi-800);
      border-color: black;
      color: var(--gray-200);
    }

    & .lite > div dl div {
      border-color: var(--scampi-600);
    }

    & .billing-plan {
      & .btn.btn-primary {
        color: white;
      }

      & .btn.btn-current-plan {
        border-color: var(--gray-200);
        color: var(--gray-200);

        &:hover,
        &:active,
        &:focus {
          background-color: transparent;
        }
      }
    }
  }

  & .blank-state {
    & svg.svg--light {
      display: none;
    }

    & svg.svg--dark {
      display: block;
    }

    & p {
      color: var(--gray-200);
    }

    & a.docs-link {
      color: var(--scampi-400);
    }
  }

  & .dashboard-onboarding {
    outline-color: var(--gray-700);

    & dl div svg {
      &.svg--light {
        display: none;
      }

      &.svg--dark {
        display: block;
      }
    }

    & form {
      & .btn {
        &:hover,
        &:active,
        &:focus {
          border-color: transparent;
        }
      }
    }
  }

  & .help-and-support {
    & main {
      & a {
        border-color: var(--gray-700);

        &:hover,
        &:active,
        &:focus {
          background-color: var(--gray-800);
        }

        & span {
          color: var(--scampi-300);
        }
      }
    }
  }

  & .viewer-area section dl.cols-two.order-breakdown {
    & dt,
    & dd {
      border-color: var(--gray-700);
    }
  }

  & .integrations {
    & > div {
      border-color: var(--gray-700);
    }
  }

  & .viewer-area.empty article {
    & svg.svg--light {
      display: none;
    }

    & svg.svg--dark {
      display: block;
    }
  }

  & .customer-support {
    background-color: var(--yellow-950);

    & .main-nav footer {
      border-color: rgba(217 119 6 0.5);
    }

    & nav.main-nav {
      & .dropdown button:hover,
      & .dropdown button:active,
      & .dropdown button:focus {
        background-color: var(--yellow-800);
        color: white;
      }

      & main a:hover,
      & main a:active,
      & main a:focus {
        background-color: var(--yellow-800);
      }
    }
  }
}

html[data-color-scheme="system"].dark-mode
  .dropdown
  button.show-with-system-color-scheme {
  color: var(--purple-400);
}