@import "./scss/variables";
@import "./scss/global";
@import "./scss/mixins";
@import "./scss/roll_template";
@import "./scss/show_hide";

.charsheet {
  .hider[value="0"] {
    + div,
    + label,
    + button,
    + span {
      display: none;
    }
  }

  .hider[value=""] + button {
    display: none;
  }

  .editmode[value="0"] ~ .content .empty-hider[value=""] + div {
    display: none;
  }

  .details-button {
    position: relative;
    z-index: 2;
  }

  .header,
  .settings {
    padding: 10px 5px;
  }

  /* tab wrappers and type chooser */
  input[name="attr_npc"][value="0"] ~ .tabs .npc-tab,
  input[name="attr_npc"][value="1"] ~ .tabs .pc-tab,
  input[name="attr_npc"][value="0"] ~ .drones .npc-show,
  input[name="attr_npc"][value="1"] ~ .drones .pc-show {
    display: none;
  }

  $characters: "character", "ship", "drones", "npc", "mount", "vehicle";
  @each $name in $characters {
    input[name="attr_tab"]:not([value="#{$name}"]) ~ .#{$name} {
      display: none;
    }
  }

  .content {
    min-width: 800px;
    display: grid;
    grid-gap: 5px;
  }

  /* editmode */
  .editmode[value="0"] ~ .content .edit,
  .editmode[value="0"] ~ .content .repcontrol,
  .editmode[value="1"] ~ .content .display {
    display: none;
  }

  /** edit mode highlighting **/
  .editmode[value="1"] ~ {
    .content {
      border-style: solid;
      border-width: 0 2px 2px 2px;
    }

    .header {
      border-bottom: 2px solid;
    }

    .tabs,
    .settings {
      border-style: solid;
      border-width: 0 2px 0 2px;
    }

    div .edit-button {
      height: 29px;
      padding: 0 5px 0 5px;
      margin: 0 0 0 15px;
      display: flex;
      align-items: center;
    }
  }

  .editmode[value="1"] ~ div .edit-button input {
    align-self: center;
  }

  /* dice icons */
  .dice-icon {
    background: transparent url($dice) no-repeat 80px 3px !important;
    background-size: 15px 15px !important;
  }

  /* header */
  .header {
    input {
      opacity: 0;
      position: absolute;
    }

    .logo {
      width: 480px;
    }

    .npc-chooser {
      cursor: pointer;
      margin-left: auto;
      span {
        padding: 3px 6px;
      }
    }

    .edit-button {
      margin: 0 5px 0 20px;
    }

    .settings-gear,
    .edit-button {
      cursor: pointer;
      font-size: 16px;
      //noinspection CssNoGenericFontName | There is no generic to a picture font.
      font-family: pictos;
    }
  }

  @import "./scss/footer";

  /* tab environment */
  @import "./scss/tabs";

  /* organisation */
  @import "./scss/utility";

  /* containers */
  .grey-box,
  .grey-box-bordered {
    padding: 4px;
  }

  .grey-box-bordered {
    border: 1px solid;
  }

  .core-box {
    padding: 8px;
  }

  .core-box-text {
    padding: 8px 3px 3px 8px;
  }

  input[type="text"].inherit {
    background: transparent;
    border-radius: 0;
    border: none;
    box-shadow: none;
    color: inherit;
    font: inherit;
    padding: 0;
  }

  .inline-input {
    padding: 0 3px;
    position: relative;
    vertical-align: baseline;
    z-index: 2;
  }

  .text-input {
    line-height: 1;
    padding-right: 5px;

    .label {
      border-top: 1px solid;
      font-size: 0.9em;
      line-height: 14px;
      text-align: inherit;

      input[type="checkbox"] {
        height: 14px;
        margin: 0 3px 0 0;
      }
    }

    input[type="text"],
    input[type="number"],
    textarea {
      background: transparent;
      border-radius: 0;
      border: none;
      box-shadow: none;
      font-weight: inherit;
      padding: 1px 0;
      text-align: inherit;
      width: 100%;

      &[readonly="readonly"] {
        cursor: default;
      }
    }

    input[type="text"],
    input[type="number"] {
      font-size: 1.1em;
    }

    textarea {
      height: 20px;
      min-height: 20px;
    }

    > input[type="checkbox"] {
      height: 14px;
      margin: 3px 0;
    }

    select {
      background: transparent;
      border: none;
      height: 20px;
      width: 100%;
    }

    &.important {
      font-weight: bold;
      font-size: 1.1em;
    }

    &.duo {
      display: grid;
      text-align: center;
      grid: auto / 3px 1fr 5px 1fr 3px;
      align-items: center;
      align-content: start;
      grid-column-gap: 0;

      > span {
        font-size: 16px;
      }

      .label {
        grid-column: 1/5;
      }
    }

    &.trio {
      display: grid;
      text-align: center;
      grid: auto / 3px 1fr 5px 1fr 5px 1fr 3px;
      align-items: center;
      align-content: start;
      grid-column-gap: 0;

      > span {
        font-size: 16px;
      }

      .label {
        grid-column: 1/7;
      }
    }

    button[type="roll"].btn {
      width: 100%;
    }
  }

  .table-header {
    font-size: 0.9em;

    > div {
      padding-left: 2px;
      border-bottom: 1px solid;
    }
  }

  .focusinfo {
    position: relative;

    .details {
      border-radius: 8px;
      border: 1px solid;
      left: calc(50% - 125px);
      opacity: 1;
      padding: 5px;
      position: absolute;
      top: 22px;
      transition: all 0.3s;
      width: 250px;
      z-index: 1;
    }

    input:not(:focus) ~ .details {
      visibility: hidden;
      opacity: 0;
    }
  }

  /* inline styling */
  .space-before::before,
  .space-after::after {
    content: " ";
  }

  .colon-after::after {
    content: ":";
  }

  .hide-empty[value=""] + span {
    display: none;
  }

  .add-plus:not([value^="-"]) + span::before {
    content: "+";
  }

  .api {
    border-radius: 5px;
    font-size: 0.8em;
    line-height: 1;
    padding: 1px;
    vertical-align: super;
  }

  /* force repeating row behavior */
  @import "./scss/repeating_sections";

  /* repeating section controls */

  /* global settings */
  .skills-query:not([value="hover"]) ~ div .skills-query-hover,
  .skills-query[value="query"] ~ div .skills-query-display,
  .skills-query[value="query"] ~ div .skills-query-ask {
    display: none;
  }

  .skills-query-display {
    $attrs: "str", "dex", "con", "int", "wis", "cha";
    @each $name in $attrs {
      input:not([value*="#{$name}"]) ~ .#{$name} {
        display: none;
      }
    }
  }

  .skills-query[value="hover"] ~ div .skill:hover .skills-query-display,
  .skill .display .query:focus + .skills-query-display {
    display: none;
  }

  /* Section visibility toggling */
  /* In the past, Github hosting didn't seem to work for some reason. Backup url: https://svgshare.com/i/aQ0.svg */
  /* Note: svgshare urls are apparently not stable more than about 3 years. */
  .section-toggle-header {
    position: relative;

    input {
      cursor: pointer;
      height: 100%;
      opacity: 0;
      position: absolute;
      right: 0;
      width: 22px;
      z-index: 2;

      + h1::after {
        background-image: url($chevron);
      }

      &:not(:checked) + h1::after {
        transform: rotate(180deg);
      }
    }

    + input + div {
      margin-top: 5px;
    }
  }

  /* Settings */
  .settings {
    label {
      font-weight: bold;

      span {
        margin-right: 4px;
      }
    }

    select {
      display: inline-block;
      width: 120px;

      &.wide {
        width: 170px;
      }
    }

    .subsystems {
      grid: auto / 1fr 1fr;
    }
  }

  /* Character core */
  .core {
    display: grid;
    grid-column-gap: 5px;

    &.core-info {
      grid: auto / 2.5fr 1fr 0.8fr;

      .info {
        align-items: start;
        flex-wrap: wrap;
        padding-right: 3px;

        .important {
          width: calc(60% - 22px);
        }

        .level {
          width: 44px;
        }

        .level-rest {
          width: calc(40% - 22px);
        }
      }
    }

    &.core-stats {
      grid: auto / minmax(310px, 1.2fr) minmax(260px, 1fr) minmax(220px, 0.8fr);
    }

    .main-content {
      margin-top: 3px;
      display: grid;
      grid: auto / repeat(3, 1fr);

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

    button[name="roll_HP"].btn {
      font-size: 0.9em;
    }
  }

  /* Saves */
  .saves .flex {
    margin-top: 4px;
  }

  .saves {
    button[type="roll"].btn {
      height: 35px;
      width: 35px;
    }
  }

  /* menus */
  .menus-content {
    align-items: center;
    display: grid;
    grid: auto / 1fr 1fr;
  }

  .menus button[type="roll"].btn {
    .character & {
      margin-right: auto;
    }
  }

  /* Attributes */
  .attributes {
    font-size: 1.1em;
    line-height: 1.2;
    margin-top: 0px;
    margin-bottom: 0px;

    .attr-grid {
      grid-template-columns: 1fr 3.5em 3.5em 20px 3.5em 20px;
    }

    .attr-display-grid {
      grid-template-columns: 1.5fr repeat(3, 5em);
    }

    .mod {
      font-size: 1.1em;
    }

    span[name*="_mod"]::before {
      content: "+";
    }
  }

  /* Resources */
  .editmode[value="0"] ~ .content .resources .repcontainer {
    grid: auto / 1fr 1fr;
  }

  .resources {
    .credits {
      margin-left: auto;
    }

    .repcontainer {
      display: grid;
      grid-row-gap: 3px;
      margin-top: 3px;
    }

    input[type="text"] {
      margin-right: auto;
      width: calc(100% - 8em);
    }

    .slash {
      margin: 0 2px;
    }
  }

  .money,
  .wealth {
    textarea {
      height: 100px;
      min-height: 100px;
    }
  }

  /* Shells */

  .shells {
    .shells-grid {
      grid: auto / 40px 35px 35px 35px 45px 1fr;
    }
  }

  .transhuman-setting:not([value="transhuman"]) ~ .column .transhuman-enabled,
  .transhuman-setting[value="transhuman"] ~ .core .transhuman-disabled {
    display: none;
  }

  /* Weapons */
  .weapons {
    .edit {
      justify-content: space-between;
      padding-right: 1px;

      .name {
        width: 138px;
      }

      .ab {
        width: 45px;
      }

      .ammo,
      .weapon-skill {
        width: 80px;
      }

      .range,
      .damage,
      .attribute {
        width: 60px;
      }

      .burst {
        width: 65px;
      }

      .shock-damage,
      .shock-ac {
        width: 55px;
      }

      .skill-to-damage {
        width: 30px;
      }

      .enc {
        width: 40px;
      }
    }

    .text-input {
      padding-right: 3px;
    }

    .repitem {
      margin-bottom: 3px;
    }

    .display {
      font-size: 1.1em;
      border: 1px solid;
      text-indent: -10px;
      padding: 2px 4px 2px 14px;

      .name {
        font-weight: bold;
      }
    }
  }

  /* Skills */
  .skill-container,
  .skills-repeating .repcontainer {
    display: grid;
    grid: auto / 1fr 1fr;
    grid-gap: 4px 1%;
  }

  .skill {
    position: relative;

    .display,
    .edit {
      border: 1px solid;
      padding: 2px 4px;
      height: 100%;
    }

    .display {
      font-weight: bold;
      font-size: 1.1em;

      .dice[value="3d6d1"] + .name::after {
        content: "3d6";
      }

      .dice[value="4d6d2"] + .name::after {
        content: "4d6";
      }

      .name {
        margin-right: auto;
      }

      .name::after {
        font-size: 0.7em;
        font-weight: normal;
        margin-left: 2px;
        vertical-align: super;
      }

      .query {
        background: transparent;
        border-color: transparent;
        color: inherit;
        flex-shrink: 0;
        height: 18px;
        line-height: 16px;
        margin: 0 2px;
        outline: none;
        padding: 0;
        position: relative;
        width: 55px;
        z-index: 2;
      }
    }

    &:not(:hover) .display .query:not(:focus) {
      display: none;
    }

    .skills-query-display {
      margin: 0 3px;
      flex-shrink: 0;
      font-weight: normal;
    }

    .edit {
      input[type="text"].name {
        width: 100%;
        margin-bottom: 2px;
      }

      div.name {
        flex-grow: 1;
        width: 0;
        padding: 1px 2px;
      }

      .level {
        margin: 0 2px;
        padding: 1px 2px;
        width: 40px;
      }

      .query {
        width: 50px;
      }

      .dice {
        width: 35px;
      }

      &.flex-wrap {
        select,
        input {
          flex-grow: 1;
        }
      }
    }

    &.skill-points {
      margin-top: 4px;

      .display {
        font-size: 1.1em;
        font-weight: bold;
        width: 100%;
      }

      .name {
        flex-grow: 0;
        margin-right: auto;
        width: auto;
        padding: 0 4px;
      }

      .edit .level {
        margin: 0;
      }
    }
  }

  .skill-blurb {
    font-style: italic;
    margin-top: 3px;
    text-align: center;
  }

  /* name + desc sections */
  .input-details:not([value="0"]) ~ div .notdetails {
    display: none;
  }

  /* Psionics */
  .psionics-effort {
    align-items: center;
    display: grid;
    grid-column-gap: 4px;
    grid: auto/ auto 45px 45px 45px 45px 80px;
    margin-top: 5px;

    h3 {
      line-height: 1;
    }
  }

  .techniques {
    .display .discipline {
      margin-left: auto;
    }

    .edit .discipline {
      margin-left: 5px;
      width: 90px;
    }
  }

  /* Space Magic */

  .magic-effort {
    display: grid;
    grid: auto/ auto repeat(4, 45px) 80px;
    align-items: center;
    grid-column-gap: 4px;
    margin-top: 5px;

    h3 {
      line-height: 1;
    }
  }

  .invoker {
    grid-template-columns: 1fr 50%;
  }

  .spells {
    .spells-header {
      grid-template-columns: 2fr repeat(3, 1fr);
    }

    .spell-grid {
      grid-template-columns: 1fr repeat(3, 5em);

      .damage,
      .level,
      .prepared {
        text-align: center;
      }
    }

    .edit {
      input {
        width: 100%;
      }
    }

    .display {
      .name {
        padding-right: 25px;
        padding-bottom: 1px;
      }

      span.prepared {
        margin: 0 4px 0 auto;
      }

      input[type="number"].prepared {
        padding: 0 4px;
        position: relative;
        z-index: 2;
      }
    }
  }

  .spell-slots {
    align-items: center;
    display: grid;
    grid-column-gap: 4px;
    grid: auto/ auto repeat(5, 55px);
    margin-top: 5px;

    h3 {
      line-height: 1;
    }
  }

  .magic-type {
    &:not([value="adept"]) ~ div .adept,
    &:not([value="magister"]) ~ div .magister,
    &:not([value="arcanist"]) ~ div .arcanist,
    &[value="adept"] ~ div .spellcaster {
      display: none;
    }
  }

  .magical-arts {
    .effort-grid {
      grid-template-columns: 3em repeat(4, 1fr);
    }
  }

  .space-magic,
  .magic {
    .spells .display .name {
      grid-template-columns: 1fr auto auto;
    }
  }

  /* AI */
  .ai-processing {
    display: grid;
    grid: auto/ auto 45px 45px 45px 45px 80px;
    align-items: center;
    grid-column-gap: 4px;

    h3 {
      line-height: 1;
    }
  }

  .ai-processing-nodes {
    .nodes-grid {
      grid: auto / 65px 65px 1fr;
    }
  }

  .ai-setting:not([value="ai"]) ~ .ai-enabled,
  .ai-setting[value="ai"] ~ .core .ai-disabled {
    display: none;
  }

  .ai-setting[value="ai"] ~ .column .ai-enabled {
    display: block;
  }

  /* Foci */
  .foci-loc {
    &[value="left"] ~ .column .foci-right,
    &[value="right"] ~ .column .foci-left {
      display: none;
    }
  }

  .foci,
  .edge {
    .details-button {
      position: relative;
      z-index: 2;
    }

    .class-ability {
      position: relative;

      .edit .name {
        font-weight: bold;
        font-size: 1.1em;
        border-bottom: 1px solid;
      }

      .name,
      .edit textarea,
      .display {
        margin-bottom: 3px;
      }
    }

    .edit {
      .name {
        flex-grow: 1;
      }

      .level {
        margin-left: 3px;
        width: 60px;
      }
    }

    .display .level {
      margin-left: auto;
    }
  }

  /* Gear */
  .armor {
    input[name="attr_armor_active"] {
      left: 35%;
      position: absolute;
      z-index: 10;
    }

    .armor-grid {
      grid: auto / 40px 1fr 40px;
    }

    .details div,
    .details label {
      grid-column: 2 / -1;
    }

    .details .display {
      line-height: 1.3;
    }
  }

  .readied-stowed {
    display: grid;
    align-items: center;
  }

  .cyberdeck {
    .cyberdeck-grid {
      grid-template-columns: 1fr repeat(4, 40px);
    }
  }

  .cyberware {
    h3 {
      margin: 5px 0;
    }

    .edit {
      flex-wrap: wrap;

      > span {
        margin: 0 3px;
      }

      .name-row {
        grid-template-columns: 2fr 1fr;
      }
    }
  }

  .equipment {
    input[name="attr_gear_bundled"] {
      position: absolute;
      z-index: 10;
    }

    .repcontainer[data-groupname="repeating_weapons"] + .repcontrol {
      display: none;
    }

    .gear-grid {
      grid: auto / 40px minmax(130px, 1fr) 40px 70px 40px;
    }

    .other h3 {
      margin-bottom: 5px;
    }

    .other-gear {
      height: 100px;
    }
  }

  /* Misc */
  .misc {
    .text-input input {
      padding-left: 2px;
    }

    .repitem {
      margin-bottom: 2px;
    }

    .goal {
      grid-template-columns: 1fr 15%;
    }

    .xp {
      width: 50px;
    }

    .goal-lang,
    .proj-ally {
      grid-template-columns: 2fr 1fr;
    }

    .projects,
    .lifestyle {
      .name {
        grid-template-columns: 1fr 15%;
      }
    }

    .allies {
      .subheaders {
        grid-template-columns: 2fr 1.5fr 1fr;
      }
    }
  }

  /* Ship tab */
  .ship {
    margin-top: -20px;
    grid: auto/ 4fr 3fr 2fr;

    .menus {
      h3 {
        line-height: 1;
      }

      button[type="roll"].btn {
        font-size: 0.9em;
        line-height: 1;
      }
    }

    .type {
      padding: 5px 8px;

      h3 {
        line-height: 1;
      }

      select {
        background: transparent;
        height: 20px;
        width: 80px;
      }
    }

    .info {
      flex-wrap: wrap;

      .text-input {
        margin-bottom: 3px;
      }
    }

    .data {
      display: grid;
      grid: auto / repeat(6, 1fr);

      .text-input,
      .text-input input[type="number"] {
        text-align: center;
      }

      .duo {
        grid-column-start: 1;
        grid-column-end: 3;
      }
    }

    .trio {
      grid-column-start: 3;
      grid-column-end: 7;
      grid: auto / 0 1fr 5px 1fr 5px 1fr 0;
    }

    .duo {
      grid: auto / 0 1fr 5px 1fr 0;
    }

    .stats {
      display: grid;
      grid: auto / 1fr 1fr;
    }

    .repcontainer {
      display: grid;
      grid-row-gap: 3px;
    }

    .repitem {
      &,
      .edit,
      .display {
        width: 100%;
      }
    }

    .grey-box-bordered {
      padding-right: 0;
    }

    .ship-weapons {
      .edit {
        .name {
          width: calc(100% - 200px);
        }

        .damage {
          width: 65px;
        }

        .duo {
          width: 80px;
        }

        .qualities {
          width: calc(100% - 195px);
        }

        .range {
          width: 70px;
        }
      }

      .display {
        text-indent: -10px;
        padding-left: 14px;
      }
    }

    .ship-defenses,
    .ship-fitting {
      .edit {
        .name,
        .effect {
          flex: 1 1 auto;
          width: 0;
        }
      }

      .display {
        text-indent: -10px;
        padding: 2px 4px 2px 14px;
      }
    }

    .edit {
      .broken {
        width: 50px;
      }

      .number {
        width: 50px;
      }
    }

    .display {
      .name {
        font-weight: bold;
      }

      .broken {
        text-transform: uppercase;
      }

      .description {
        font-style: italic;
      }
    }

    .input-type[value="SHIP"] ~ div .vehicle-type:not(.vehicle-type-ship),
    .input-type[value="MECH"] ~ div .vehicle-type:not(.vehicle-type-mech),
    .input-type[value="VEHICLE"] ~ div .vehicle-type:not(.vehicle-type-custom) {
      display: none;
    }

    .editmode[value="0"] ~ & {
      .ship-defenses,
      .ship-fitting {
        padding: 3px 0;
      }
    }
  }

  /* NPC tab */
  .npc {
    grid: auto / 3fr 0.8fr 2.2fr;

    .input-individual-hide:not([value="1"]) ~ .rolls .individual-hide {
      display: none;
    }

    .menus {
      h3 {
        line-height: 1;
      }

      button[type="roll"].btn {
        line-height: 1;
      }
    }

    .npc-abilities {
      .name {
        grid-template-columns: 1.5fr 1fr;
      }
    }

    .individual-hide input[type="checkbox"] {
      margin-right: 2px;
    }

    .npc-rep-header {
      margin: 4px;
    }

    .rolls > :first-child {
      margin-bottom: 5px;
    }

    .npc-checkbox {
      font-size: 0.9em;

      span {
        vertical-align: middle;
        margin-right: 4px;
      }
    }

    .repcontainer {
      display: grid;
      grid-gap: 3px;
    }

    .full-attacks {
      margin: 0 6px 0 auto;
    }

    .grey-box-bordered {
      padding-right: 1px;
    }

    .npc-attacks {
      .edit {
        .name {
          grid-template-columns: 2fr repeat(3, 1fr);
        }
      }

      .display {
        font-size: 1.1em;
        font-weight: bold;
        padding: 4px 8px;

        .range[value="0"] + span {
          display: none;
        }

        .attacks[value="1"] + span {
          display: none;
        }

        .attacks {
          text-transform: lowercase;
        }
      }
    }

    .npc-abilities {
      .npc-checkbox {
        margin-left: auto;
      }

      .display {
        .name {
          font-weight: bold;
        }

        .description {
          font-style: italic;
        }
      }
    }
  }

  /* Drone tab */
  .drone {
    display: grid;
    grid: 86px 1fr / 1fr 1fr;
    grid-gap: 5px;
    align-items: start;
    border-top: 1px solid #555;
    padding: 2px 5px;

    .name-row {
      grid-template-columns: 2fr 1fr;
    }

    .fittings {
      .name {
        font-weight: bold;

        &:not(:empty)::after {
          content: ". ";
        }
      }

      .desc {
        font-style: italic;
      }

      .display {
        margin-bottom: 3px;
      }
    }

    .fitting-grid {
      grid: auto / 0.8fr 1.2fr;
    }

    .num-fittings {
      &[value="1"],
      &[value="2"],
      &[value="3"],
      &[value="4"] {
        ~ .fitting-5 {
          display: none;
        }
      }

      &[value="1"],
      &[value="2"],
      &[value="3"] {
        ~ .fitting-4 {
          display: none;
        }
      }

      &[value="1"],
      &[value="2"] {
        ~ .fitting-3 {
          display: none;
        }
      }

      &[value="1"] {
        ~ .fitting-2 {
          display: none;
        }
      }
    }

    .weapon-grid {
      grid: auto / 35px 1fr 50px 60px 35px 70px;
    }

    .weapon {
      position: relative;

      .name {
        font-weight: bold;
      }

      .display {
        margin-right: 4px;

        div::after {
          content: ",";
        }
      }
    }

    .editmode[value="0"] ~ .content & .drone-weapons {
      display: flex;
      flex-wrap: wrap;
    }
  }

  /* Vehicle tab */
  .vehicle {
    padding: 2px 5px;
  }

  @import "./scss/system_settings";
}

@import "./scss/theme.scss";