/* Inspired by https://github.com/Hargne/jest-html-reporter */

[data-theme="light"] {
  --body-color: #333;
  --body-bg: #fff;
  --strong-color: #000;
  --feature-bg: #eee;
  --feature-color: #777;
  --duration-color: rgb(49, 49, 49);
  --summary-passed: #4f8a10;
  --summary-passed-border: #4f8a10;
  --summary-failed: #d8000c;
  --summary-failed-border: #d8000c;
  --summary-undefined: #945901;
  --summary-undefined-border: #ffdf61;
  --summary-skipped: #76adff;
  --summary-skipped-border: #76adff;
  --passed-bg: #dff2bf;
  --passed-step-bg: #c6dba3;
  --passed-border: #b4cc8c;
  --failed-bg: #f5c9cd;
  --failed-step-bg: #ea868f;
  --failed-border: #dd7a82;
  --undefined-bg: #ffdf61;
  --undefined-step-bg: #f1cb32;
  --undefined-border: #917400;
  --skipped-bg: #eef5ff;
  --skipped-step-bg: #cfe2ff;
  --skipped-border: #b8c9e4;
  --commentary-bg: #b9b9b9;
  --table-bg-odd: #fff;
  --table-bg-even: #eee;
  --button-bg: #666;
  --button-color: #eee;
  --button-bg-active: #898989;
  --button-color-active: #fff;
}

[data-theme="dark"] {
  --body-color: #ddd;
  --body-bg: #000;
  --strong-color: #fff;
  --feature-bg: #222;
  --feature-color: #aaa;
  --duration-color: rgb(206, 206, 206);
  --passed-bg: #42630a;
  --passed-step-bg: #697e41;
  --passed-border: #91a86b;
  --failed-bg: #69272d;
  --failed-step-bg: #a8666c;
  --failed-border: #df888f;
  --undefined-bg: #665a2a;
  --undefined-step-bg: #b6940d;
  --undefined-border: #dbb20e;
  --skipped-bg: #345381;
  --skipped-step-bg: #3d659e;
  --skipped-border: #6981a8;
  --commentary-bg: #5c5c5c;
  --table-bg-odd: #555;
  --table-bg-even: #444;
  --button-bg: #555;
  --button-color: #cdcdcd;
  --button-bg-active: #898989;
  --button-color-active: #fff;
}

/* GENERAL CONTENT */

html,
body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 1rem;
  margin: 0;
  padding: 0;
  color: var(--body-color);
  background: var(--body-bg);
}

body {
  padding: 1rem 1rem;
  font-size: 0.85rem;
}

pre,
pre * {
  margin: 0;
}

/* ARROWS */
.embed_button::after,
.scenario-name::after {
  position: absolute;
  top: -0.5em;
  left: -0.2em;
  content: "\2304";
  font-size: 1.8em;
  transition: all 0.2s linear;
}

.embed_button.collapse::after,
.collapse .scenario-name::after {
  top: -0.29em;
  left: -0.5em;
  transform: rotate(-90deg);
  -moz-transform: rotate(-90deg);
  -webkit-transform: rotate(-90deg);
  -ms-transform: rotate(-90deg);
  -o-transform: rotate(-90deg);
}

.embed_button,
.scenario-name {
  padding-left: 1.2em;
  position: relative;
}

/*FEATURE CONTENT*/

.feature-title {
  font-size: 1rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  background-color: var(--feature-bg);
  color: var(--feature-color);
  padding: 0.5em 1rem;
  margin-bottom: 5px;
}

.feature-icon {
  height: 1.2em;
  display: inline-block;
  margin-right: 0.3em;
  text-align: center;
  vertical-align: middle;
}

.feature-icon.contrast {
  display: none;
}

.feature-title.contrast {
  font-weight: bold;
  font-size: 1.25rem;
  background-color: #000;
  color: #fff;
}

.feature-summary-commentary {
  border-left: 0.4rem solid var(--feature-color);
  background-color: var(--commentary-bg);
  color: var(--strong-color);
  word-wrap: break-word;
  max-width: 40%;
  margin-right: 1rem;
  margin-top: 0.2rem;
  margin-left: 0.2rem;
  padding: 0.5rem;
  white-space: pre-wrap
}

.feature-summary-commentary.contrast {
  background-color: rgb(36, 35, 35);
  color: rgb(248, 248, 248);
  font-size: 1rem;
}

.feature-summary-container {
  display: flex;
  flex-wrap: wrap;
  padding: 5px;
  padding-right: 1rem;
  margin-bottom: 5px;
  background-color: var(--feature-bg);
  color: var(--feature-color);
  justify-content: start;
  font-size: 0.8rem;
}

.feature-summary-container.collapse {
  display: none;
}

.feature-summary-container.contrast {
  background-color: #000;
  color: rgb(248, 248, 248);
  font-size: 1rem;
}

.feature-additional-info-container {
  padding: 5px;
  background-color: var(--feature-bg);
  color: var(--feature-color);
  justify-content: start;
  font-size: 0.8rem;
  flex-basis: 100%;
}

.contrast .feature-additional-info-container {
  background-color: #000;
  color: rgb(248, 248, 248);
  font-size: 1rem;
}

.feature-summary-stats {
  margin-top: 0.2em;
}

.feature-summary-stats .button {
  padding-left: 0.4em;
  padding-right: 0.4em;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  margin-bottom: 0.1em;
}

.feature-summary-row {
  color: var(--feature-color);
  border-left: 0.4rem solid var(--feature-color);
  padding-left: 0.5rem;
  padding-top: 0.1em;
  padding-bottom: 0.1em;
  margin-bottom: 0.1em;
}

.feature-summary-row.passed {
  color: var(--summary-passed);
  border-left: 0.4rem solid var(--summary-passed-border);
}

.feature-summary-row.failed {
  color: var(--summary-failed);
  border-left: 0.4rem solid var(--summary-failed-border);
}

.feature-summary-row.undefined {
  color: var(--summary-undefined);
  border-left: 0.4rem solid var(--summary-undefined-border);
}

.feature-summary-row.skipped {
  color: var(--summary-skipped);
  border-left: 0.4rem solid var(--summary-skipped-border);
}

.feature-summary-row.contrast {
  color: rgb(248, 248, 248);
  border-left: 0.4rem solid rgb(248, 248, 248);
}

.feature-container {
  margin-bottom: 2rem;
}

.feature-started {
  align-self: center;
  margin-left: auto;
  font-size: 0.75rem;
  font-style: italic;
}

.feature-started.contrast {
  font-size: 1.25rem;
  color: #fff;
}


/*SCENARIO CONTENT*/
.scenario-capsule {
  padding: 1rem;
  padding-right: 0.5rem;
  padding-top: 0.3rem;
  margin-bottom: 1rem;
  color: var(--strong-color);
}

.scenario-header {
  padding: 1rem;
  padding-bottom: 0;
  margin-top: 0;
  margin-bottom: 0;
  color: var(--strong-color);
}

.scenario-capsule:last-child {
  border: 0;
}

.scenario-capsule {
  background-color: var(--feature-bg);
}

.scenario-header.passed {
  background-color: var(--passed-step-bg);
}

.scenario-header.failed {
  background-color: var(--failed-step-bg);
}

.scenario-header.undefined {
  background-color: var(--undefined-step-bg);
}

.scenario-header.skipped {
  background-color: var(--skipped-step-bg);
}

.scenario-header.contrast,
.scenario-capsule.contrast {
  background-color: #000;
  color: #fff;
}

.scenario-info {
  display: flex;
  flex-wrap: wrap;
  font-size: 1.25rem;
}

.scenario-name {
  cursor: pointer;
  font-weight: bold;
  padding-bottom: 0.5em;
}

.scenario-duration {
  align-self: center;
  margin-left: auto;
  font-size: 0.75rem;
  font-style: italic;
  padding: 0 0.5em 0.5em 0;
}

.scenario-duration.contrast {
  font-size: 1.25rem;
  color: #fff;
}

.scenario-tags {
  color: var(--body-color);
  font-weight: bold;
  font-size: 0.75rem;
  margin: 0.1rem 0.8em 0.5rem 0;
  display: inline-block;
}

.scenario-tags.contrast {
  color: white;
  font-weight: bold;
  font-size: 1rem;
  margin: 0.1rem 1em 0.5rem 0;
}


/*STEP CONTENT*/
.step-capsule {
  margin: 2px 0 2px 2px;
  padding: 0.5rem;
  color: var(--strong-color);
  display: flex;
  flex-wrap: wrap;
  font-size: 0.75rem;
}

.step-capsule.passed {
  background-color: var(--passed-step-bg);
  border: 1px solid var(--passed-border);
}

.step-capsule.failed {
  background-color: var(--failed-step-bg);
  ;
  border: 1px solid var(--failed-border);
}

.step-capsule.undefined {
  background-color: var(--undefined-step-bg);
  border: 1px solid var(--undefined-step-bg);
}

.step-capsule.skipped {
  background-color: var(--skipped-step-bg);
  border: 1px solid var(--skipped-border);
}

.step-capsule.commentary {
  background-color: var(--commentary-bg);
  margin-left: 1rem;
}

.step-capsule.description {
  background-color: var(--commentary-bg);
  margin-left: 0rem;
}

.step-capsule.contrast {
  background-color: rgb(36, 35, 35);
  color: #fff;
  font-size: 1.25rem;
  border: none;
}

.step-status {
  display: none;
  padding: 0 1rem 0 0;
  font-weight: bold;
  font-size: 1.25rem;
}

.step-decorator {
  padding: 0;
  padding-right: 1.5rem;
}

.step-duration {
  color: var(--duration-color);
  font-style: italic;
  padding: 0;
  padding-right: 1.5rem;
}

.step-duration.contrast {
  color: rgb(248, 248, 248);
}

/*EMBED CONTENT*/
.messages {
  margin: 0 0 4px 1em
}

.scenario-capsule .messages:last-child {
  border-bottom: 1px dashed var(--strong-color);
}

.scenario-capsule .messages.contrast:last-child {
  border-bottom: 1px dashed #fff;
}

.embed-capsule {
  margin: 0.5em 0;
}

.embed_content {
  white-space: pre-wrap;
  word-wrap: break-word;
  font-size: 12px;
  margin: 0.5rem;
}

.embed_content.collapse {
  display: none;
}

.embed_button {
  cursor: pointer;
  margin: 0 1rem 0.5em 0;
  text-decoration: underline;
  color: var(--strong-color);
  font-size: 12px;
  width: max-content;
}

.embed_button.contrast {
  color: #fff;
  font-size: 20px;
}

/*TABLE FORMATTING*/
th,
td {
  padding: 6px;
}

thead {
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

table {
  color: var(--body-color);
  margin: 2px 1em 4px 1em;
  border-collapse: collapse;
  border: 1px solid #000;
  vertical-align: middle;
}

table.contrast {
  font-size: 1rem;
}

table tbody tr:nth-child(odd) {
  background-color: var(--table-bg-odd);
}

table tbody tr:nth-child(even) {
  background-color: var(--table-bg-even);
}

table tbody.collapse {
  display: none;
}

table.contrast tbody tr {
  background-color: #fff;
  color: #000;
  border: 1px solid #000;
}


/*IMAGE AND LINK FORMATTING*/
img,
video {
  max-width: 100%;
  max-height: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
  text-decoration-color: var(--strong-color);
}

.contrast a:hover {
  color: grey;
  text-decoration: underline;
  text-decoration-color: grey;
}

.scenario-header.collapse .scenario-tags,
.scenario-capsule.collapse {
  display: none;
}

.scenario-header.collapse {
  padding: 0.5rem 1rem 0 1rem;
  margin-bottom: 1rem;
}

/* BUTTONS andHELPER classes */
/* Should be at bottom, to override rules above */
.button {
  display: inline-block;
  color: var(--button-color);
  background-color: var(--button-bg);
  border-radius: 0.2em;
  font-weight: bold;
  text-decoration: none;
  padding: 0.5em 0.9em;
  text-align: center;
  cursor: pointer;
}

.button:hover {
  text-decoration: none;
  color: var(--button-color-active);
  background-color: var(--button-bg-active);
}

.contrast .button {
  color: #111;
  background-color: #eee;
}

.contrast .button:hover {
  text-decoration: none;
}

.display-flex {
  display: flex;
}

.display-block {
  display: block;
}

.display-inline {
  display: inline;
}

.display-block.display-inline {
  display: inline-block;
}

.flex-gap {
  column-gap: 1em;
  row-gap: 2px;
}

.flex-left-space {
  margin-left: auto;
}

.margin-top {
  margin-top: 15px;
}

.no-margin-top {
  margin-top: 0px;
}

.margin-bottom {
  margin-bottom: 15px;
}

/* SMALL SCREEN */
/* Should be at bottom, to override rules above */
@media only screen and (max-width: 750px) {
  .feature-title {
    flex-direction: column;
  }

  .feature-started {
    margin-left: unset;
  }

  .feature-summary-container {
    margin-left: 0;
    margin-top: 0.25rem;
    font-size: 1rem;
    display: block;
  }

  .feature-additional-info-container {
    margin-left: 0;
    margin-top: 0.25rem;
    font-size: 1rem;
  }

  .feature-summary-commentary {
    max-width: 100%;
    margin-right: 0;
  }

  .flex-left-space {
    margin-left: initial;
  }

  .feature-summary-stats {
    margin-left: 0.2rem;
  }

  .scenario-capsule {
    padding-right: 0rem;
  }

}