.cyberdeck button[type="roll"].swn,
button[type="roll"].wwn,
button[type="roll"].cwn {
  display: none;
}

$systems: (
  "swn": "revised",
  "wwn": "wwn",
  "cwn": "cwn",
  "neither": "neither",
);

@each $name, $value in $systems {
  .#{$name} {
    display: none;
  }

  input[name="attr_system"][value="#{$value}"] ~ div .#{$name},
  input[name="attr_system"][value="#{$value}"] ~ button[type="roll"].#{$name} {
    display: block;
  }

  input[name="attr_system"][value="#{$value}"] ~ div .flex.#{$name} {
    display: flex;
  }

  input[name="attr_system"][value="#{$value}"] ~ div .grid.#{$name} {
    display: grid;
  }
}

$subSystems: "space_magic", "magic", "psionics", "cyberware", "cyberdeck",
  "magical_arts", "legate", "invoker", "graced";

@each $name in $subSystems {
  .#{$name} {
    display: none;
  }
}

@each $name in $subSystems {
  input[name="attr_subsystem_#{$name}"][value="#{$name}"] ~ div .#{$name},
  input[name="attr_subsystem_#{$name}"][value="#{$name}"]
    ~ button[type="roll"].#{$name} {
    display: block;
  }

  input[name="attr_subsystem_#{$name}"][value="#{$name}"] ~ div .flex.#{$name} {
    display: flex;
  }

  input[name="attr_subsystem_#{$name}"][value="#{$name}"] ~ div .grid.#{$name} {
    display: grid;
  }
}

input[name="attr_subsystem_invoker"][value="invoker"] ~ div .magic,
input[name="attr_subsystem_invoker"][value="invoker"]
  ~ button[type="roll"].magic {
  display: block;
}

input[name="attr_subsystem_invoker"][value="invoker"]
  ~ div
  .magic
  .spell-slots {
  display: none;
}