.charsheet {
  background-color: $gray-50;
  color: $gray-900;

  textarea,
  input[type="text"],
  input[type="number"],
  h2,
  select {
    color: $gray-900;
  }

  h1 {
    background-color: $gray-500;
  }

  .repcontrol button,
  button[type="roll"].btn {
    background: $blue-700;
  }

  button[type="roll"].invisible-button:hover ~ div:not(.no-highlight) {
    color: $blue-700;
    border-color: $blue-700;
  }

  .editmode[value="1"] ~ {
    .content,
    .header,
    .settings,
    .tabs {
      border-color: $yellow-300;
    }

    div .edit-button {
      background-color: $yellow-300;
    }
  }

  .core-box-text,
  .core-box,
  .grey-box,
  .grey-box-bordered,
  .api,
  .editmode[value="0"] ~ .ship-defenses,
  .editmode[value="0"] ~ .ship-fitting {
    background-color: $gray-100;
  }

  .focusinfo .details {
    background-color: $gray-50;
  }

  button[type="roll"].btn:hover,
  .header .npc-chooser input:not(:checked) ~ .pc-label,
  .header .npc-chooser input:checked ~ .npc-label,
  .tabs input:checked + span {
    background-color: $blue-900;
  }

  h1::after,
  .header .npc-chooser input:checked ~ .pc-label,
  .header .npc-chooser input:not(:checked) ~ .npc-label,
  .tabs input + span,
  .chevron {
    background-color: $blue-700;
  }

  .skill .skill-points .name {
    background-color: $gray-900;
  }

  .weapons .repitem:nth-child(odd) .display,
  .repcontainer[data-groupname="repeating_skills"] .repitem {
    &:nth-of-type(4n + 1),
    &:nth-of-type(4n + 2) {
      background-color: $gray-300;
    }
  }

  .skill-container div:nth-of-type(4n + 1) .skill,
  .skill-container div:nth-of-type(4n + 2) .skill {
    background-color: $gray-300;
  }

  h2,
  .display,
  .foci .class-ability .edit .name,
  .focusinfo .details,
  .footer,
  .grey-box-bordered,
  .simple-repsection .display .name,
  .spells > .flex,
  .table-header > div,
  .tabs,
  .text-input .label,
  .weapons .display {
    border-color: $gray-300;
  }

  .header .settings-gear input + span,
  .header .edit-button input + span,
  .text-input .label,
  .text-input.trio > span,
  .text-input.duo > span {
    color: $gray-900;
  }

  h3,
  .footer,
  .text-input,
  .table-header {
    color: $gray-600;
  }

  .header .settings-gear input:checked + span,
  .header .edit-button input:checked + span {
    color: $blue-700;
  }

  .text-input input[type="text"],
  .text-input input[type="number"],
  .text-input textarea,
  .text-input select {
    color: $blue-900;
  }

  h1,
  button[type="roll"].btn,
  .header .npc-chooser,
  .tabs label,
  .skill .skill-points .name,
  .repcontrol button {
    color: $gray-50;
  }

  .strain-above-max[value="1"] ~ div .total-strain,
  .ship .broken,
  .readied-stowed .input-gear-over[value="1"] + .text-input input:first-child,
  .ship .input-color-negative[value^="-"] + .text-input input:first-child {
    color: $red-700;
  }

  // WORLD WITHOUT NUMBER
  input[name="attr_system"][value="wwn"] ~ {
    .tabs input:checked + span,
    .tabs input:checked + span,
    .header .npc-chooser input:not(:checked) ~ .pc-label,
    .header .npc-chooser input:checked ~ .npc-label {
      background-color: $yellow-900;
    }

    .tabs input + span,
    .header .npc-chooser input:checked ~ .pc-label,
    .header .npc-chooser input:not(:checked) ~ .npc-label {
      background-color: $yellow-600;
    }

    .header .settings-gear input:checked + span,
    .header .edit-button input:checked + span {
      color: $yellow-600;
    }

    div {
      h1 {
        background-color: $green-950;
      }

      .repcontrol button,
      button[type="roll"].btn {
        background: $yellow-600;
      }

      button[type="roll"].invisible-button:hover ~ div:not(.no-highlight) {
        color: $yellow-900;
        border-color: $yellow-900;
      }

      button[type="roll"].btn:hover,
      .tabs input:checked + span,
      button[type="roll"].btn:hover,
      .tabs input:checked + span {
        background-color: $yellow-900;
      }

      h1::after,
      .tabs input + span,
      .chevron {
        background-color: $yellow-600;
      }

      .text-input input[type="text"],
      .text-input input[type="number"],
      .text-input textarea,
      .text-input select {
        color: $yellow-900;
      }
    }
  }

  // // CWN - Grey, Black, Purple
  input[name="attr_system"][value="cwn"] ~ {
    .tabs input:checked + span,
    .tabs input:checked + span,
    .header .npc-chooser input:not(:checked) ~ .pc-label,
    .header .npc-chooser input:checked ~ .npc-label {
      background-color: $purple-950;
    }

    .tabs input + span,
    .header .npc-chooser input:checked ~ .pc-label,
    .header .npc-chooser input:not(:checked) ~ .npc-label {
      background-color: $purple-600;
    }

    .header .settings-gear input:checked + span,
    .header .edit-button input:checked + span {
      color: $purple-600;
    }

    div {
      h1 {
        background-color: $gray-900;
      }

      .repcontrol button,
      button[type="roll"].btn {
        background: $purple-600;
      }

      button[type="roll"].invisible-button:hover ~ div:not(.no-highlight) {
        color: $purple-900;
        border-color: $purple-900;
      }

      button[name*="roll_save"] {
        @include hexagon;
      }

      button[type="roll"].btn:hover,
      .tabs input:checked + span {
        background-color: $purple-900;
      }

      h1::after,
      .tabs input + span,
      .chevron {
        background-color: $purple-600;
      }

      .text-input input[type="text"],
      .text-input input[type="number"],
      .text-input textarea,
      .text-input select {
        color: $purple-900;
      }

      .armor-grid {
        grid: auto / 40px 1fr repeat(4, 45px);
      }
    }
  }
}