#generator-wrapper::after,
#generator-wrapper::before {
   content: '';
   position: absolute;
   width: 100%;
   height: 1.5rem;
   z-index: 5;
}

#generator-wrapper::before {
   background: linear-gradient(var(--bl), transparent);
}

#generator-wrapper::after {
   bottom: 0;
   background: linear-gradient(transparent, var(--bl));
}


#floor-view {
   display: grid;
   place-items: center;
   align-items: baseline;
   height: 80vh;
   margin-left: 3rem;
   overflow: auto;
   padding-block: 1.5rem;
   scrollbar-width: none;
}




/* nav buttons */
#floor-menu[locked] {
   display: none;
}

#floor-menu {
   position: absolute;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   right: calc(100% - 6.5vw);
   padding: .5rem;
   gap: .5rem;
   z-index: 10;

   border: var(--brd);
   border-radius: 1rem;
   width: max-content;

}

#toggle-floor {
   position: absolute;
   top: -1rem;
   right: -1rem;
   z-index: 5;
}

#buy-floor {
   order: 15;
}

#buy-floor,
.floor-select {
   display: grid;
   place-items: center;
   padding: 0;
   height: 3rem;
   width: 3rem;
   border: var(--brd);
   border-radius: .5rem;
   background-color: var(--dg);
   transition: .3s ease-in-out;
}

.floor-select.active-icon {
   scale: 1.1;
   box-shadow: var(--pkShd);
}

/* floor */
.gen-floor {
   display: none;
   border: var(--brd);
   border-radius: 2rem;
   background-color: var(--vdg);
   box-shadow: 0 0 3rem 1rem var(--dg) inset, var(--shd);

}

.gen-floor::before {
   z-index: unset;
   font-size: 6rem;
}

.gen-floor.active-floor {
   display: grid;
}

.inner-floor {
   display: grid;
   padding-bottom: 5rem;
   gap: 1rem;
   padding: 1.5rem;
   width: 70vw;
   grid-template-rows: repeat(4, 1fr);
}

.gen-row {
   display: grid;
   grid-template-columns: repeat(12, 1fr);
   grid-template-rows: repeat(4, 1fr);
   height: 25vh;
   gap: 1rem;
   grid-auto-flow: column;
}

.det-view {
   display: none;
   position: absolute;
   top: 1rem;
   left: 1rem;
}

/* side-bar */




.side-floor {
   --s: 1rem;
   font-size: var(--s);

   position: absolute;
   left: 100%;
   top: 2em;

   display: flex;
   flex-direction: column;
   gap: .5em;

   border: var(--brd);
   border-radius: 0 1em 1em 0;
   border-left: 0;
   z-index: 1;

   padding: .5em;
   padding-left: .75em;

   .NT-bar {
      margin-left: .1em;
      margin-bottom: .1em;
      width: calc(var(--s) * 2);
   }


   .NT-bar::before,
   .NT-bar::after {
      border-radius: .5em;
   }
}


/* small view */

#floor-view.small-view {

   display: grid;
   grid-template-columns: repeat(3, 1fr);
   padding: 2rem;
   row-gap: 2rem;

   .gen-floor {
      display: grid !important;
      border-radius: 1rem;

      &::before {
         font-size: 2rem;

      }

      .side-floor {
         --s: .8rem
      }

      .det-view {
         display: grid;
      }
   }
}

#floor-view.small-view .inner-floor {
   padding: 1rem;
   width: 20vw;
   gap: .5rem;
   aspect-ratio: 1/1;
}

#floor-view.small-view .gen-row {
   height: 100%;
   gap: .5rem;

   .gen-base {
      border-radius: .5rem;
      box-shadow: 0 0 .25rem .1rem var(--hl);

      * {
         display: none;
      }
   }
}