/* Cypress v3 */
:root {
  --background: #222426;
  --dark-background: #171717;
  --lighter-background: #3a3a3a;
  --light-element: #444648;
  --active-button: #292c2e;
  --active-color: #ffa22f;
  --url-color: #dd5911;
  --url-hover-color: #dd3611;
  --runner-shadow: inset 0 0 10px #f88d09;
  --wrap-shadow: 0 3px 6px #f88d09;
  --button-border: 1px solid #3a3a3a;
  --command-border: 1px solid #606060;
  --command-important-border: 1px solid #888888;
  --active-command-border: 1px solid #707070;
  --highlighted-text: #dddddd;
  --pinned-command-background-color: #432001;
  --pinned-command-background-color-hover: #e87816;
  --icons-color: #a55704;
  --icons-hover-color: #d26e03;
  /* passed and failed commands */
  --failed-command-background-color: inherit;
  --state-failed-background-color: #9900c2;
  --state-failed-color: #db57ff;
  /* other misc stuff */
  --header-color: #ee7205;
  --header-shadow: 0 1px 3px #f88d09;
  --header-border: solid 1px #f88d09;
  /* main passing, failing, skipped colors */
  --failed-color: #c900ff;
  --passed-color: #ff9a00;
  --pending-color: #9b9b9b;
  /* assert "badge" in front of passing or failing assertion */
  --assert-passed-background-color: #a55704;
  --assert-passed-color: #ff9a00;
}
.reporter {
  background-color: var(--background);
}
.reporter .runnable-header {
  background-color: var(--background);
  box-shadow: var(--header-shadow);
  -webkit-box-shadow: var(--header-shadow);
}

.runner header {
  background-color: var(--background);
  box-shadow: var(--header-shadow);
  -webkit-box-shadow: var(--header-shadow);
}
.runner .url {
  color: var(--header-color);
  background-color: var(--background);
  border: var(--header-border);
}
.runner .url:hover,
.runner .url:focus,
.runner .url:active {
  color: var(--header-color);
}
.runner .highlighted .url {
  background-color: var(--light-element);
}
.runner .url:focus {
  background-color: var(--light-element);
}

.runner .url:hover {
  color: var(--url-hover-color) !important;
}

.runner .loading-container {
  color: var(--header-color);
  background-color: var(--background);
  border: var(--header-border);
}

.runner .viewport-info button {
  text-shadow: none;
}
.runner .viewport-info button:hover {
  color: var(--active-color);
}
.runner {
  background-image: none;
  background-color: var(--lighter-background);
  box-shadow: var(--runner-shadow);
  -webkit-box-shadow: var(--runner-shadow);
}

.reporter .wrap {
  box-shadow: var(--wrap-shadow);
  -webkit-box-shadow: var(--wrap-shadow);
}

.reporter .container {
  border: none;
}

.runner .selector-playground-toggle:hover {
  background: none;
  color: var(--active-color);
}

.reporter header {
  background-color: var(--background);
  color: var(--active-color);
  box-shadow: var(--header-shadow);
  -webkit-box-shadow: var(--header-shadow);
}
.reporter header button {
  background-color: var(--background);
}
.reporter header button:hover {
  background-color: var(--background);
  color: var(--active-color);
}

.reporter a {
  color: var(--url-color);
}
.reporter a:hover {
  color: var(--url-hover-color);
}

.reporter .runnable {
  background-color: var(--background);
}
.reporter .runnable:hover {
  background-color: var(--background);
}
.reporter .command-wrapper {
  background-color: var(--background);
}
.reporter .commands-container {
  background-color: var(--active-button);
}
.reporter .command-wrapper:hover {
  background-color: var(--active-button);
  color: var(--highlighted-text);
  box-shadow: none;
  -webkit-box-shadow: none;
}
.reporter .focus-tests button {
  border-right: var(--button-border);
}
.reporter .stats .duration {
  border-left: var(--button-border);
  border-right: var(--button-border);
}
.reporter .controls > span:last-child button {
  border-right: var(--button-border);
}

.reporter .command-state-pending > span > .command-wrapper {
  background-color: var(--lighter-background);
}
.reporter .command-type-parent {
  border-top: var(--command-border);
}
.reporter .command-type-parent:hover {
  border-top: var(--active-command-border);
}

.runner .aut-iframe {
  background-color: var(--background);
}

.reporter .runnable.suite > div > .runnable-wrapper .runnable-title {
  color: var(--active-color);
}

.reporter .hooks-container .hook-name:hover {
  color: var(--highlighted-text);
}

.reporter .command-is-pinned > span > .command-wrapper {
  background-color: var(--pinned-command-background-color);
}
.reporter .command-is-pinned > span > .command-wrapper:hover {
  background-color: var(--pinned-command-background-color-hover);
}
.runner .message-controls {
  background-color: var(--background);
}
.runner .snapshot-controls.showing-selection .toggle-selection {
  background-color: var(--active-button);
}
.runner .snapshot-controls button:active {
  background-color: var(--active-button);
  color: var(--active-color);
}
.runner .snapshot-controls .snapshot-state-picker button.state-is-selected {
  background-color: #666565;
  color: yellow;
}
.runner .snapshot-controls button:hover {
  background-color: var(--active-button);
  color: var(--active-color);
}
.reporter .command-name-assert.command-state-passed .command-method span {
  background-color: var(--assert-passed-background-color);
  color: var(--assert-passed-color);
}

.reporter ::-webkit-scrollbar-thumb {
  background-color: var(--background);
}
.reporter ::-webkit-scrollbar-track {
  background-color: var(--dark-background);
}

.reporter .command-state-failed > span > .command-wrapper {
  background-color: var(--failed-command-background-color);
}
.reporter .command-state-failed > span > .command-wrapper:hover {
  background-color: var(--failed-command-background-color);
}
.reporter .command-name-assert.command-state-failed .command-method span {
  background-color: var(--state-failed-background-color);
  color: var(--state-failed-color);
}
.reporter .runnable pre {
  background-color: var(--background);
}
.reporter .runnable pre:hover {
  background-color: var(--lighter-background);
}
.reporter pre {
  border: var(--command-important-border);
}

.reporter .runnable-controls i {
  color: var(--icons-color);
}
.reporter .runnable-controls i:hover {
  color: var(--icons-hover-color);
}
.reporter
  .runnable.suite.runnable-failed
  > div
  > .runnable-wrapper
  .collapsible-more {
  margin-left: 5px;
}

/* icons in the reporter */
.reporter .runnable-state:hover {
  font-size: 130%;
}
.reporter .runnable.test.runnable-failed .runnable-state:before {
  content: '☠️';
}
.reporter .runnable.test.runnable-pending .runnable-state:before {
  content: '👻';
}
.reporter .runnable.test.runnable-passed .runnable-state:before {
  content: '🎃';
}
.reporter .runnable.test.runnable-active .runnable-state:before {
  content: '🕸';
}
/* test has not started yet */
.reporter .runnable.test.runnable-processing .runnable-state:before {
  content: '⚰️';
}
.reporter .command-state-pending .command-number i:before {
  content: '☠️';
}
/* top level test counters icons */
.fa-check:before,
.reporter .runnable.runnable-passed > .runnable-wrapper .runnable-state:before {
  content: '🎃';
}
.fa-times:before,
.reporter .runnable.test.runnable-failed .runnable-state:before {
  content: '☠️';
}
.fa-circle-o-notch:before,
.reporter
  .runnable.runnable-pending
  > .runnable-wrapper
  .runnable-state:before {
  content: '👻';
}

/* switch thumb tack icon to syringe */
.fa-thumb-tack:before {
  content: '💉';
}

.reporter .no-commands {
  background-color: var(--background);
  border: none;
  color: var(--pending-color);
}

.reporter .runnable.test.runnable-failed > .runnable-wrapper {
  border-left: 5px solid var(--failed-color);
}
.reporter .runnable.test.runnable-passed > .runnable-wrapper {
  border-left: 5px solid var(--passed-color);
}
.reporter .runnable.test.runnable-pending > .runnable-wrapper {
  border-left: 5px solid var(--pending-color);
}
.reporter .stats li.failed {
  color: var(--failed-color);
}
.reporter .stats li.passed {
  color: var(--passed-color);
}
.reporter .stats li.pending {
  color: var(--pending-color);
}
.reporter .runnable.runnable-passed > .runnable-wrapper .runnable-title {
  color: var(--passed-color);
}
.reporter .runnable.runnable-pending > .runnable-wrapper .runnable-title {
  color: var(--pending-color);
}
.reporter .runnable.runnable-failed > .runnable-wrapper .runnable-title {
  color: var(--failed-color);
}
.reporter .runnable.suite > div > .runnable-wrapper .runnable-title {
  color: 'inherit';
}
.reporter .runnable.suite.runnable-failed > div > .runnable-wrapper {
  border-left: 5px solid var(--failed-color);
}
.reporter .runnable.suite.runnable-passed > div > .runnable-wrapper {
  border-left: 5px solid var(--passed-color);
}
.reporter .runnable.suite.runnable-pending > div > .runnable-wrapper,
.reporter .runnable.test.runnable-pending > .runnable-wrapper {
  border-left: 5px solid var(--pending-color);
}
