.generator {
   height: 100%;
   width: fit-content;

   display: grid;
   grid-auto-flow: column;
   place-items: center;
   gap: 1vw;
   padding-inline: 1vw;

   >* {
      z-index: 2;
   }
}

.generator::before,
.generator::after {
   content: '';
   position: absolute;
   border-radius: 1rem;
   border: var(--brd);
   box-shadow: 0 0 1rem .5rem var(--dg) inset, 0 0 .5rem .25rem var(--bl);
   background: var(--greyHatch);
   z-index: 1;
}

.generator::after {
   width: 100%;
   height: 65%;
}

.generator::before {
   width: calc(100% + 2vw);
   height: 25%;
}

/* slot */

.gen-slot {
   height: calc(65% + 4px);
   width: calc(var(--cellHeight)/2 + 1.5rem);

   display: grid;
   place-items: center;

   border: var(--brd);
   border-block-color: var(--bl);
   background-color: rgba(0, 0, 0, 0.4);
   box-shadow: 0 0 1rem .5rem var(--bl) inset;

   .gen-cell {
      position: absolute;
   }
}

.gen-slot::before {
   position: absolute;
   content: 'STAFF';
   font-weight: bold;
   border: var(--brd);
   border-radius: .5rem;
   background-color: var(--bl);
   box-shadow: var(--shd);
   padding: .5rem;
   opacity: .5;
}

.unstaffed .gen-slot::before {
   cursor: pointer;
   opacity: 1;
}

/* cell */

.gen-cell {
   height: var(--cellHeight);
   aspect-ratio: 1/2;

   cursor: pointer;
   display: grid;
   justify-items: center;
   border-radius: .5em;
   border: var(--brd);
   background-color: var(--bl);
   box-shadow: 0 0 1em .5em var(--dg) inset, 0 0 .5em .1em var(--hl);
   transition: box-shadow ease-in-out .4s;
}

.gen-cell::before {
   content: '';
   height: 8%;
   width: 55%;
   margin-top: 15%;
   border: var(--brd);
   border-radius: .25em;
   box-shadow: 0 0 1em .5em var(--dg), 0 0 .5em .1em var(--hl) inset;
}

.gen-cell::after {
   content: attr(data-id);
   position: absolute;
   place-self: center;
   font-weight: bold;
   color: var(--dg);
   font-size: 1em;
   color: var(--w);
   text-shadow: var(--txt);
}

.orgasm .gen-cell {
   box-shadow: 0 0 1rem .5rem var(--dg) inset, 0 0 1rem .5rem var(--pk);
}

/* progress bar */

.gen-bar {
   width: 1.5rem;

   height: calc(var(--cellHeight) * 1.2);
   background-color: var(--bl);
   display: grid;
   place-items: center;
   border-radius: .5rem;
   box-shadow: var(--shd);
}

.gen-bar::after {
   content: '';
   position: absolute;
   height: 100%;
   width: 100%;
   border-radius: inherit;
   border: 2px solid;
   /* should have the glass effect! */
}

.gen-fill {
   width: 100%;
   place-self: end;
   background: linear-gradient(var(--pk), var(--pu));
   border-top: 2px solid var(--pk);
   box-shadow: 0 0 .5rem .25rem var(--pk);
   opacity: .5;
   transition: .2s ease;
}

/* buttons */

.gen-controls {
   display: flex;
   gap: .5rem;
}

.gen-controls button,
.side-floor button,
#toggle-floor {

   font-size: .85em;
   border: 1px solid;
   border-radius: .5em;
   padding: .25em;
   background-color: var(--vdg);
   box-shadow: 0 0 .25em .25em var(--bl), 0 0 .25em .25em var(--dg) inset;

}

.staff-button {
   display: none
}

.unstaffed .staff-button {
   display: revert;
}

[data-fill="full"] .staff-button {
   display: none;
}

[data-fill="empty"] .unstaff-button {
   display: none;
}

/* animations */
.slide-down {
   animation: slide-down .5s ease-in-out forwards;
}

@keyframes slide-down {
   0% {
      opacity: 0;
      margin-bottom: 6em;
   }

   100% {
      opacity: 1;
      margin-bottom: 0;
   }
}

.slide-up {
   animation: slide-up .5s ease-in-out forwards;
}

@keyframes slide-up {
   0% {
      opacity: 1;
      margin-bottom: 0;
   }

   100% {
      opacity: 0;
      margin-bottom: 6em;
   }
}

/* special */
.gen-shake {
   translate: 0 0;
   animation: gen-shake linear infinite 1s;
}

@keyframes gen-shake {
   5% {
      translate: 2px 0;
   }

   10% {
      translate: -3px 0;
   }

   20% {
      translate: 4px 0;
   }

   35% {
      translate: -2px 0;
   }

   50% {
      translate: 5px 0;
   }

   60% {
      translate: -1px 0;
   }

   75% {
      translate: 3px 0;
   }

   90% {
      translate: -2px 0;
   }

   100% {
      translate: 0 0;
   }
}

/* breakage and NT blocked */

i.gen-icon {
   font-size: 3rem;
   position: absolute;
   padding: 1rem;
   z-index: 15;
   pointer-events: none;
   filter: drop-shadow(0 0 .5rem var(--hl));
}

i.gen-repair {
   display: grid;
   place-items: center;
}

i.gen-repair::after {
   content: '';
   position: absolute;
   height: 100%;
   aspect-ratio: 1/1;
   border: .25em solid;
   border-inline-color: transparent;
   border-radius: 100%;
   animation: spin linear infinite 4s;
}

i.gen-icon {
   display: none;
}