.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: .75rem;
   border: var(--brd);
   background: var(--greyHatch);
   box-shadow: var(--shd), var(--grShd);
   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: rgb(10, 10, 10);

   .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: .35rem;
   opacity: .4;
   transition: .3s;
}

.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(--vdg);
   box-shadow: var(--pkShd);
   transition: box-shadow ease-in-out .4s;
}

.gen-cell::before {
   content: '';
   height: 8%;
   width: 55%;
   margin-top: 15%;
   border: var(--brd);
   border-radius: .25em;
   background-color: rgb(141, 27, 112);
   box-shadow: var(--shd) inset;
}

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

.orgasm .gen-cell {
   box-shadow: 0 0 .5rem .25rem var(--pk);
}

/* progress bar */

.gen-bar {
   width: .75rem;

   height: calc(var(--cellHeight) * 1.3);

   background-color: var(--bl);
   display: grid;
   place-items: center;
   border-radius: .5rem;
   border: var(--brd);
   box-shadow: var(--shd);
}

.gen-fill {
   width: 100%;
   border-radius: inherit;
   place-self: end;
   background-color: var(--pk);
   box-shadow: 0 0 .15em .1em var(--bl) inset;
   opacity: .5;
   transition: .2s ease;
}

/* buttons */

.side-floor button,
#toggle-floor {

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

   &:hover {

      box-shadow: var(--shd), var(--pkShd) inset;
   }

}


/* 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;
}

b.str-name {
   position: absolute;
   top: .5em;
   font-size: .7rem;
   opacity: .5;
}