- var categories = ['alkali-metals','alkaline-earth-metals','lanthanoids','actinoids','transition-metals','post-transition-metals','metalloids','other-nonmetals','noble-gasses','unknown']

// ELEMENT MIXIN TEMPLATE
mixin element(number, symbol, name, mass, weight, material, column, row)
  .element(class=material)(class='c'+column)(class='r'+row)
    input.activate(type='radio', name='elements')
    input.deactivate(type='radio', name='elements')
    .overlay
    .square
      .model
        each item in weight.reverse()
          .orbital
            - for (var i = 0; i < item; i++)
              .electron
      .atomic-number= number
      .label
        .symbol= symbol
        .name= name
      .atomic-mass= mass
      ul.atomic-weight
        each item in weight.reverse()
          li= item


// PLACEHOLDER MIXIN TEMPLATE
mixin placeholder(number, material, column, row)
  .placeholder(class=material)(class='c'+column)(class='r'+row)
    .square= number


.wrapper
  each item in categories
    input.category-toggle(type='radio', id=item, name='categories')
    input.category-cancel(type='radio', id='cancel' name='categories')
  .periodic-table
    +element(1, 'H', 'Hydrogen', 1.008, [1], 'other-nonmetal', 1, 1)
    +element(2, 'He', 'Helium', 4.0026, [2], 'noble-gas', 18, 1)
    +element(3, 'Li', 'Lithium', 6.94, [3], 'alkali-metal', 1, 2)
    +element(4, 'Be', 'Beryllium', 9.0122, [2,2], 'alkaline-earth-metal', 2, 2)
    +element(5, 'B', 'Boron', 10.81, [2,3], 'metalloid', 13, 2)
    +element(6, 'C', 'Carbon', 12.011, [2,4], 'other-nonmetal', 14, 2)
    +element(7, 'N', 'Nitrogen', 14.007, [2,5], 'other-nonmetal', 15, 2)
    +element(8, 'O', 'Oxygen', 15.999, [2,6], 'other-nonmetal', 16, 2)
    +element(9, 'F', 'Flourine', 18.998, [2,7], 'other-nonmetal', 17, 2)
    +element(10, 'Ne', 'Neon', 20.180, [2,8], 'noble-gas', 18, 2)
    +element(11, 'Na', 'Sodium', 22.990, [2,8,1], 'alkali-metal', 1, 3)
    +element(12, 'Mg', 'Magnesium', 24.305, [2,8,2], 'alkaline-earth-metal', 2, 3)
    +element(13, 'Al', 'Aluminium', 26.982, [2,8,3], 'post-transition-metal', 13, 3)
    +element(14, 'Si', 'Silicon', 28.085, [2,8,4], 'metalloid', 14, 3)
    +element(15, 'P', 'Phosphorus', 30.974, [2,8,5], 'other-nonmetal', 15, 3)
    +element(16, 'S', 'Sulfur', 32.06, [2,8,6], 'other-nonmetal', 16, 3)
    +element(17, 'Cl', 'Chlorine', 35.45, [2,8,7], 'other-nonmetal', 17, 3)
    +element(18, 'Ar', 'Argon', 39.948, [2,8,8], 'noble-gas', 18, 3)
    +element(19, 'K', 'Potassium', 39.098, [2,8,8,1], 'alkali-metal', 1, 4)
    +element(20, 'Ca', 'Calcium', 40.078, [2,8,8,2], 'alkaline-earth-metal', 2, 4)
    +element(21, 'Sc', 'Scandium', 44.956, [2,8,9,2], 'transition-metal', 3, 4)
    +element(22, 'Ti', 'Titanium', 47.867, [2,8,10,2], 'transition-metal', 4, 4)
    +element(23, 'V', 'Vanadium', 50.942, [2,8,11,2], 'transition-metal', 5, 4)
    +element(24, 'Cr', 'Chromium', 51.996, [2,8,13,1], 'transition-metal', 6, 4)
    +element(25, 'Mn', 'Manganese', 54.938, [2,8,13,2], 'transition-metal', 7, 4)
    +element(26, 'Fe', 'Iron', 55.845, [2,8,14,2], 'transition-metal', 8, 4)
    +element(27, 'Co', 'Cobalt', 58.933, [2,8,15,2], 'transition-metal', 9, 4)
    +element(28, 'Ni', 'Nickel', 58.693, [2,8,16,2], 'transition-metal', 10, 4)
    +element(29, 'Cu', 'Copper', 63.546, [2,8,18,1], 'transition-metal', 11, 4)
    +element(30, 'Zn', 'Zinc', 65.38, [2,8,18,2], 'transition-metal', 12, 4)
    +element(31, 'Ga', 'Gallium', 69.723, [2,8,18,3], 'post-transition-metal', 13, 4)
    +element(32, 'Ge', 'Germanium', 72.630, [2,8,18,4], 'metalloid', 14, 4)
    +element(33, 'As', 'Arsenic', 74.922, [2,8,18,5], 'metalloid', 15, 4)
    +element(34, 'Se', 'Selenium', 78.971, [2,8,18,6], 'other-nonmetal', 16, 4)
    +element(35, 'Br', 'Bromine', 79.904, [2,8,18,7], 'other-nonmetal', 17, 4)
    +element(36, 'Kr', 'Krypton', 83.798, [2,8,18,8], 'noble-gas', 18, 4)
    +element(37, 'Rb', 'Rubidium', 85.468, [2,8,18,8,1], 'alkali-metal', 1, 5)
    +element(38, 'Sr', 'Strontium', 87.62, [2,8,18,8,2], 'alkaline-earth-metal', 2, 5)
    +element(39, 'Y', 'Yttrium', 88.906, [2,8,18,9,2], 'transition-metal', 3, 5)
    +element(40, 'Zr', 'Zirconium', 91.224, [2,8,18,10,2], 'transition-metal', 4, 5)
    +element(41, 'Nb', 'Niobium', 92.906, [2,8,18,12,1], 'transition-metal', 5, 5)
    +element(42, 'Mo', 'Molybdenum', 95.95, [2,8,18,13,1], 'transition-metal', 6, 5)
    +element(43, 'Tc', 'Technetium', '(98)', [2,8,18,13,2], 'transition-metal', 7, 5)
    +element(44, 'Ru', 'Ruthenium', 101.07, [2,8,18,15,1], 'transition-metal', 8, 5)
    +element(45, 'Rh', 'Rhodium', 102.91, [2,8,18,16,1], 'transition-metal', 9, 5)
    +element(46, 'Pd', 'Palladium', 106.42, [2,8,18,18], 'transition-metal', 10, 5)
    +element(47, 'Ag', 'Silver', 107.87, [2,8,18,18,1], 'transition-metal', 11, 5)
    +element(48, 'Cd', 'Cadmium', 112.41, [2,8,18,18,2], 'transition-metal', 12, 5)
    +element(49, 'In', 'Indium', 114.82, [2,8,18,18,3], 'post-transition-metal', 13, 5)
    +element(50, 'Sn', 'Tin', 204.38, [2,8,18,18,4], 'post-transition-metal', 14, 5)
    +element(51, 'Sb', 'Antimony', 121.76, [2,8,18,18,5], 'metalloid', 15, 5)
    +element(52, 'Te', 'Tellurium', 127.60, [2,8,18,18,6], 'metalloid', 16, 5)
    +element(53, 'I', 'Iodine', 126.90, [2,8,18,18,7], 'other-nonmetal', 17, 5)
    +element(54, 'Xe', 'Xenon', 131.29, [2,8,18,18,8], 'noble-gas', 18, 5)
    +element(55, 'Cs', 'Caesium', 132.91, [2,8,18,18,8,1], 'alkali-metal', 1, 6)
    +element(56, 'Ba', 'Barium', 137.33, [2,8,18,18,8,2], 'alkaline-earth-metal', 2, 6)
    +element(57, 'La', 'Lanthanum', 138.91, [2,8,18,18,9,2], 'lanthanoid', 4, 9)
    +element(58, 'Ce', 'Cerium', 140.12, [2,8,18,19,9,2], 'lanthanoid', 5, 9)
    +element(59, 'Pr', 'Praseodymium', 140.91, [2,8,18,21,8,2], 'lanthanoid', 6, 9)
    +element(60, 'Nd', 'Neodymium', 144.24, [2,8,18,22,8,2], 'lanthanoid', 7, 9)
    +element(61, 'Pm', 'Promethium', 144.24, [2,8,18,23,8,2], 'lanthanoid', 8, 9)
    +element(62, 'Sm', 'Samarium', 150.36, [2,8,18,24,8,2], 'lanthanoid', 9, 9)
    +element(63, 'Eu', 'Europium', 151.96, [2,8,18,25,8,2], 'lanthanoid', 10, 9)
    +element(64, 'Gd', 'Gadolinium', 157.25, [2,8,18,25,9,2], 'lanthanoid', 11, 9)
    +element(65, 'Tb', 'Terbium', 158.93, [2,8,18,27,8,2], 'lanthanoid', 12, 9)
    +element(66, 'Dy', 'Dysprosium', 162.50, [2,8,18,28,8,2], 'lanthanoid', 13, 9)
    +element(67, 'Ho', 'Holmium', 164.93, [2,8,18,29,8,2], 'lanthanoid', 14, 9)
    +element(68, 'Er', 'Erbium', 167.26, [2,8,18,30,8,2], 'lanthanoid', 15, 9)
    +element(69, 'Tm', 'Thulium', 168.93, [2,8,18,31,8,2], 'lanthanoid', 16, 9)
    +element(70, 'Yb', 'Ytterbium', 173.05, [2,8,18,32,8,2], 'lanthanoid', 17, 9)
    +element(71, 'Lu', 'Lutetium', 174.97, [2,8,18,32,9,2], 'lanthanoid', 18, 9)
    +element(72, 'Hf', 'Hafnium', 178.49, [2,8,18,32,10,2], 'transition-metal', 4, 6)
    +element(73, 'Ta', 'Tantalum', 180.95, [2,8,18,32,11,2], 'transition-metal', 5, 6)
    +element(74, 'W', 'Tungsten', 183.84, [2,8,18,32,12,2], 'transition-metal', 6, 6)
    +element(75, 'Re', 'Rhenium', 186.21, [2,8,18,32,13,2], 'transition-metal', 7, 6)
    +element(76, 'Os', 'Osmium', 190.23, [2,8,18,32,14,2], 'transition-metal', 8, 6)
    +element(77, 'Ir', 'Iridium', 192.22, [2,8,18,32,15,2], 'transition-metal', 9, 6)
    +element(78, 'Pt', 'Platinum', 195.08, [2,8,18,32,17,1], 'transition-metal', 10, 6)
    +element(79, 'Au', 'Gold', 196.97, [2,8,18,32,18,1], 'transition-metal', 11, 6)
    +element(80, 'Hg', 'Mercury', 200.59, [2,8,18,32,18,2], 'transition-metal', 12, 6)
    +element(81, 'Tl', 'Thallium', 204.38, [2,8,18,32,18,3], 'post-transition-metal', 13, 6)
    +element(82, 'Pb', 'Lead', 207.2, [2,8,18,32,18,4], 'post-transition-metal', 14, 6)
    +element(83, 'Bi', 'Bismuth', 208.98, [2,8,18,32,18,5], 'post-transition-metal', 15, 6)
    +element(84, 'Po', 'Polonium', '(209)', [2,8,18,32,18,6], 'post-transition-metal', 16, 6)
    +element(85, 'At', 'Astatine', '(210)', [2,8,18,32,18,7], 'metalloid', 17, 6)
    +element(86, 'Rn', 'Radon', '(222)', [2,8,18,32,18,8], 'noble-gas', 18, 6)
    +element(87, 'Fr', 'Francium', '(223)', [2,8,18,32,18,8,1], 'alkali-metal', 1, 7)
    +element(88, 'Ra', 'Radium', '(226)', [2,8,18,32,18,8,2], 'alkaline-earth-metal', 2, 7)
    +element(89, 'Ac', 'Actinium', '(227)', [2,8,18,32,18,9,2], 'actinoid', 4, 10)
    +element(90, 'Th', 'Thorium', 232.04, [2,8,18,32,18,10,2], 'actinoid', 5, 10)
    +element(91, 'Pa', 'Protactinium', 231.04, [2,8,18,32,20,9,2], 'actinoid', 6, 10)
    +element(92, 'U', 'Uranium', 238.03, [2,8,18,32,21,9,2], 'actinoid', 7, 10)
    +element(93, 'Np', 'Neptunium', '(237)', [2,8,18,32,22,9,2], 'actinoid', 8, 10)
    +element(94, 'Pu', 'Plutonium', '(244)', [2,8,18,32,24,8,2], 'actinoid', 9, 10)
    +element(95, 'Am', 'Americium', '(243)', [2,8,18,32,25,8,2], 'actinoid', 10, 10)
    +element(96, 'Cm', 'Curium', '(247)', [2,8,18,32,25,9,2], 'actinoid', 11, 10)
    +element(97, 'Bk', 'Berkelium', '(247)', [2,8,18,32,27,8,2], 'actinoid', 12, 10)
    +element(98, 'Cf', 'Californium', '(251)', [2,8,18,32,28,8,2], 'actinoid', 13, 10)
    +element(99, 'Es', 'Einsteinium', '(252)', [2,8,18,32,29,8,2], 'actinoid', 14, 10)
    +element(100, 'Fm', 'Fermium', '(257)', [2,8,18,32,30,8,2], 'actinoid', 15, 10)
    +element(101, 'Md', 'Mendelevium', '(258)', [2,8,18,32,31,8,2], 'actinoid', 16, 10)
    +element(102, 'No', 'Nobelium', '(259)', [2,8,18,32,32,8,2], 'actinoid', 17, 10)
    +element(103, 'Lr', 'Lawrencium', '(266)', [2,8,18,32,32,8,3], 'actinoid', 18, 10)
    +element(104, 'Rf', 'Rutherfordium', '(267)', [2,8,18,32,32,10,2], 'transition-metal', 4, 7)
    +element(105, 'Db', 'Dubnium', '(268)', [2,8,18,32,32,11,2], 'transition-metal', 5, 7)
    +element(106, 'Sg', 'Seaborgium', '(269)', [2,8,18,32,32,12,2], 'transition-metal', 6, 7)
    +element(107, 'Bh', 'Bohrium', '(270)', [2,8,18,32,32,13,2], 'transition-metal', 7, 7)
    +element(108, 'Hs', 'Hassium', '(277)', [2,8,18,32,32,14,2], 'transition-metal', 8, 7)
    +element(109, 'Mt', 'Meitnerium', '(278)', [2,8,18,32,32,15,2], 'unknown', 9, 7)
    +element(110, 'Ds', 'Darmstadtium', '(281)', [2,8,18,32,32,17,1], 'unknown', 10, 7)
    +element(111, 'Rg', 'Roentgenium', '(282)', [2,8,18,32,32,17,2], 'unknown', 11, 7)
    +element(112, 'Cn', 'Copernicium', '(282)', [2,8,18,32,32,18,2], 'transition-metal', 12, 7)
    +element(113, 'Nh', 'Nihonium', '(286)', [2,8,18,32,32,18,3], 'unknown', 13, 7)
    +element(114, 'Fl', 'Flerovium', '(289)', [2,8,18,32,32,18,4], 'post-transition-metal', 14, 7)
    +element(115, 'Mc', 'Moscovium', '(290)', [2,8,18,32,32,18,5], 'unknown', 15, 7)
    +element(116, 'Lv', 'Livermorium', '(293)', [2,8,18,32,32,18,6], 'unknown', 16, 7)
    +element(117, 'Ts', 'Tennessine', '(294)', [2,8,18,32,32,18,7], 'unknown', 17, 7)
    +element(118, 'Og', 'Oganesson', '(294)', [2,8,18,32,32,18,8], 'unknown', 18, 7)
    
    +placeholder('57-71', 'lanthanoid', 3, 6)
    +placeholder('89-103', 'actinoid', 3, 7)
    
    .gap.c3.r8
    
    .key
      .row
        label.alkali-metal(for='alkali-metals') Alkali Metals
        label.alkaline-earth-metal(for='alkaline-earth-metals') Alkaline Earth Metals
        label.lanthanoid(for='lanthanoids') Lanthanoids
        label.actinoid(for='actinoids') Aktinoids
        label.transition-metal(for='transition-metals') Transition Metals
        label.post-transition-metal(for='post-transition-metals') Post-Transition Metals
        label.metalloid(for='metalloids') Metalloids
        label.other-nonmetal(for='other-nonmetals') Other Nonmetals
        label.noble-gas(for='noble-gasses') Noble Gasses
        label.unknown(for='unknown') Unknown

$bgColor: #101318
$gridGap: 5px

$alkaliMetalColor: #ecbe59
$alkalineEarthMetalColor: #dee955
$lanthanoidColor: #ec77a3
$actinoidColor: #c686cc
$transitionMetalColor: #fd8572
$postTransitionMetalColor: #4cddf3
$metalloidColor: #3aefb6
$otherNonmetalColor: #52ee61
$nobleGasColor: #759fff
$unknownColor: #cccccc

body
  background: $bgColor
  text-shadow: 0 0 0.4vw currentColor

.wrapper
  position: relative
  overflow: hidden
  padding: 2%
  
  > input
    -webkit-appearance: none
    position: fixed
    left: 0
    top: 0
    width: 100%
    height: 100%
    visibility: hidden
    opacity: 0
    pointer-events: none

.periodic-table
  display: grid
  grid-gap: $gridGap
  grid-template-columns: repeat(18, 1fr)



// --------------------------------------
// ELEMENT
.element
  position: relative
  font-size: 0.5vw
  padding-bottom: 100%
  cursor: pointer
  color: #fff
  transition: 500ms
  
  .overlay
    position: fixed
    z-index: 1
    left: 0
    right: 0
    top: 0
    bottom: 0
    background-color: $bgColor
    opacity: 0
    pointer-events: none
    transition: 500ms
  
  .square
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    border: 2px solid
    box-sizing: border-box
    background: $bgColor
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    transition-property: transform, z-index, left, right, top, bottom
    transition-duration: 100ms, 0ms, 200ms, 200ms, 200ms, 200ms
    transition-delay: 0ms, 100ms, 0ms, 0ms, 0ms, 0ms

  .atomic-number
    position: absolute
    left: 0
    top: 0
    padding: 2px

  .label
    text-align: center
    transition: 200ms

  .symbol
    font-size: 1.7vw

  .name
    font-size: 0.7vw

  .atomic-mass
    position: absolute
    left: 0
    right: 0
    bottom: 0
    padding: 2px
    text-align: center

  .atomic-weight
    position: absolute
    right: 0
    top: 0
    list-style: none
    margin: 0
    padding: 2px
    opacity: 0
    transition: 200ms
    text-align: right
  
  .model
    display: none
    position: absolute
    left: -500%
    right: -500%
    top: -500%
    bottom: -500%
    transform: scale(0.1)
    
    .orbital
      position: absolute
      left: 0
      right: 0
      top: 0
      bottom: 0
      border: 5px solid
      border-radius: 50%
      opacity: 0.25
      
      @for $i from 1 through 7
        &:nth-child(#{$i})
          margin: 10% + 5.5 * ($i - 1)
          animation-duration: 40s - 6 * ($i - 1)
      
      .electron
        position: absolute
        left: 0
        right: 0
        top: 0
        bottom: 0

        &::before
          content: ""
          position: absolute
          left: calc(50% - 0.7vw)
          top: -0.7vw
          width: 1.4vw
          height: 1.4vw
          background-color: currentColor
          border-radius: 50%
          opacity: 0.75

        @for $i from 1 through 32
          @for $a from 1 through $i
            &:nth-last-child(#{$i}):first-child ~ .electron:nth-child(#{$a})
              transform: rotate((360deg/$i)*($a - 1))

  input[type="radio"]
    -webkit-appearance: none
    position: absolute
    z-index: 2
    left: 0
    top: 0
    width: 100%
    height: 100%
    opacity: 0
    cursor: pointer
    outline: none
    
    &.activate
      &:hover ~ .square
        z-index: 2
        transform: scale(1.35)
        transition-delay: 0ms
        outline: none
        pointer-events: none
    
      &:checked + input[type="radio"].deactivate
        z-index: 3
        pointer-events: all
      
      &:checked ~ .overlay
        opacity: 0.75

      &:checked ~ .square
        z-index: 3
        transform: scale(3)
        transition-duration: 500ms, 0ms, 200ms, 200ms, 200ms, 200ms
        transition-delay: 0ms
        outline: none
        cursor: auto
        
        .label
          transition-duration: 500ms
          transform: scale(0.75)

        .atomic-weight
          opacity: 1
          transition: 500ms

        .model
          display: block
          animation: fade-in
          animation-duration: 1s
          
        .orbital
          animation-name: rotate
          animation-timing-function: linear
          animation-iteration-count: infinite
    
    &.deactivate
      position: fixed
      display: block
      z-index: 1
      opacity: 0
      pointer-events: none 
    
      &:checked ~ .square
        z-index: 1

        
// --------------------------------------
// PLACEHOLDER     
.placeholder
  position: relative
  z-index: -1
  font-size: 1vw
  padding-bottom: 100%
  color: #fff
  transition: 500ms
  
  .square
    position: absolute
    left: 0
    top: 0
    width: 100%
    height: 100%
    border: 2px solid
    box-sizing: border-box
    display: flex
    flex-direction: column
    justify-content: center
    align-items: center
    opacity: 0.5


// --------------------------------------
// GAP     
.gap
  position: relative
  padding-bottom: 100%
  transition: 500ms
  
  &::before
    content: ""
    position: absolute
    left: 50%
    top: 0
    width: 50%
    height: calc(200% + #{$gridGap} * 2 - 4px)
    border-width: 0 0 2px 2px
    border-style: solid
    margin-left: -1px
    color: #fff
    opacity: 0.2
    

  
// --------------------------------------
// COLORS
.alkali-metal
  color: $alkaliMetalColor

.alkaline-earth-metal
  color: $alkalineEarthMetalColor

.lanthanoid
  color: $lanthanoidColor

.actinoid
  color: $actinoidColor
  
.transition-metal
  color: $transitionMetalColor

.post-transition-metal
  color: $postTransitionMetalColor

.metalloid
  color: $metalloidColor

.other-nonmetal
  color: $otherNonmetalColor

.noble-gas
  color: $nobleGasColor

.unknown
  color: $unknownColor



// --------------------------------------
// ROWS & COLUMNS
@for $i from 1 through 10
  .r#{$i}
    grid-row: $i

@for $i from 1 through 18
  .c#{$i}
    grid-column: $i



// --------------------------------------
// SHIFT EDGE ELEMENTS ON ZOOM
.r1 input[type="radio"].activate:checked ~ .square
  top: 100%

.r10 input[type="radio"].activate:checked ~ .square
  top: -100%

.c1 input[type="radio"].activate:checked ~ .square
  left: 100%

.c18 input[type="radio"].activate:checked ~ .square
  left: -100%



// --------------------------------------
// ANIMATIONS
@keyframes rotate
  from
    transform: rotate(0deg)
  to
    transform: rotate(360deg)

@keyframes fade-in
  from
    opacity: 0
  to
    opacity: 1

@keyframes noise
  0%, 100%
    background-position: 0 0
  10%
    background-position: -5% -10%
  20%
    background-position: -15% 5%
  30%
    background-position: 7% -25%
  40%
    background-position: 20% 25%
  50%
    background-position: -25% 10%
  60%
    background-position: 15% 5%
  70%
    background-position: 0% 15%
  80%
    background-position: 25% 35%
  90%
    background-position: -10% 10%



// --------------------------------------
// KEY
.key
  position: relative
  z-index: 1
  grid-row: 1
  grid-column-start: 3
  grid-column-end: 17
  font-size: 0.8vw
  line-height: 1.5
  display: flex
  align-items: center
  pointer-events: none
  user-select: none
  
  .row
    position: relative
    display: flex
    width: 100%
    justify-content: space-between
    
    label
      opacity: 0.85
      cursor: pointer
      transition: 120ms
      pointer-events: all
      
      &:hover
        opacity: 1 !important


// --------------------------------------
// CATEGORY TOGGLES
#alkali-metals:checked ~ .periodic-table .element:not(.alkali-metal),
#alkaline-earth-metals:checked ~ .periodic-table .element:not(.alkaline-earth-metal),
#lanthanoids:checked ~ .periodic-table .element:not(.lanthanoid),
#actinoids:checked ~ .periodic-table .element:not(.actinoid),
#transition-metals:checked ~ .periodic-table .element:not(.transition-metal),
#post-transition-metals:checked ~ .periodic-table .element:not(.post-transition-metal),
#metalloids:checked ~ .periodic-table .element:not(.metalloid),
#other-nonmetals:checked ~ .periodic-table .element:not(.other-nonmetal),
#noble-gasses:checked ~ .periodic-table .element:not(.noble-gas),
#unknown:checked ~ .periodic-table .element:not(.unknown),
#alkali-metals:checked ~ .periodic-table .placeholder,
#alkaline-earth-metals:checked ~ .periodic-table .placeholder,
#lanthanoids:checked ~ .periodic-table .placeholder:not(.lanthanoid),
#actinoids:checked ~ .periodic-table .placeholder:not(.actinoid),
#transition-metals:checked ~ .periodic-table .placeholder,
#post-transition-metals:checked ~ .periodic-table .placeholder,
#metalloids:checked ~ .periodic-table .placeholder,
#other-nonmetals:checked ~ .periodic-table .placeholder,
#noble-gasses:checked ~ .periodic-table .placeholder,
#unknown:checked ~ .periodic-table .placeholder
  opacity: 0.15
  pointer-events: none

#alkali-metals:checked ~ .periodic-table .key label:not(.alkali-metal),
#alkaline-earth-metals:checked ~ .periodic-table .key label:not(.alkaline-earth-metal),
#lanthanoids:checked ~ .periodic-table .key label:not(.lanthanoid),
#actinoids:checked ~ .periodic-table .key label:not(.actinoid),
#transition-metals:checked ~ .periodic-table .key label:not(.transition-metal),
#post-transition-metals:checked ~ .periodic-table .key label:not(.post-transition-metal),
#metalloids:checked ~ .periodic-table .key label:not(.metalloid),
#other-nonmetals:checked ~ .periodic-table .key label:not(.other-nonmetal),
#noble-gasses:checked ~ .periodic-table .key label:not(.noble-gas),
#unknown:checked ~ .periodic-table .key label:not(.unknown)
  opacity: 0.65

.category-toggle:not(#lanthanoids):not(#actinoids):checked ~ .periodic-table .gap
  opacity: 0.5

.category-toggle:checked ~ .category-cancel
  visibility: visible
  pointer-events: all
  cursor: pointer

// ¯\_(ツ)_/¯