body {
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   overflow: hidden;
   height: 100vh;
   font-family: 'Roboto', sans-serif;
   transition: .25s;
   background: #CFCFCF;
}

.navbar {
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   z-index: 1;
}

.options {
   display: flex;
   flex-direction: row;
   align-items: stretch;
   overflow: hidden;
   min-width: 600px;
   max-width: 900px;
   width: calc(100% - 100px);
   height: 400px;
   margin-top: 60px;
   margin-bottom: 20px;

}

.option-dark {
   color: #343a40;
}

.option {
   position: relative;
   overflow: hidden;

   min-width: 60px;
   margin: 10px;
   border: 0px solid --defaultColor;

   background: var(--optionBackground, var(--defaultBackground, #E6E9ED));
   background-size: auto 120%;
   background-position: center;

   cursor: pointer;

   transition: .5s cubic-bezier(0.05, 0.61, 0.41, 0.95);

   @for $i from 1 through length($optionDefaultColours) {
      &:nth-child(#{$i}) {
         --defaultBackground:#{nth($optionDefaultColours, $i)};
      }
   }

   &.active {
      flex-grow: 10000;
      transform: scale(1);

      max-width: 600px;
      margin: 0px;
      border-radius: 40px;

      background-size: auto 100%;

      .shadow {
         box-shadow: inset 0 -120px 120px -120px black, inset 0 -120px 120px -100px black;
      }

      .label {
         bottom: 20px;
         left: 20px;

         .info>div {
            left: 0px;
            opacity: 1;
         }
      }

      /*&:active {
               transform:scale(0.9);
            }*/
   }

   &:not(.active) {
      flex-grow: 1;

      border-radius: 30px;

      .shadow {
         bottom: -40px;
         box-shadow: inset 0 -120px 0px -120px black, inset 0 -120px 0px -100px black;
      }

      .label {
         bottom: 10px;
         left: 10px;

         .info>div {
            left: 20px;
            opacity: 0;
         }
      }
   }

   .shadow {
      position: absolute;
      bottom: 0px;
      left: 0px;
      right: 0px;

      height: 120px;

      transition: .5s cubic-bezier(0.05, 0.61, 0.41, 0.95);
   }

   .label {
      display: flex;
      position: absolute;
      right: 0px;

      height: 40px;
      transition: .5s cubic-bezier(0.05, 0.61, 0.41, 0.95);

      .icon {
         display: flex;
         flex-direction: row;
         justify-content: center;
         align-items: center;

         min-width: 40px;
         max-width: 40px;
         height: 40px;
         border-radius: 100%;

         background-color: white;
         color: var(--defaultBackground);
      }

      .info {
         display: flex;
         flex-direction: column;
         justify-content: center;

         margin-left: 10px;

         color: white;

         white-space: pre;

         >div {
            position: relative;

            transition: .5s cubic-bezier(0.05, 0.61, 0.41, 0.95), opacity .5s ease-out;
         }

         .main {
            font-weight: bold;
            font-size: 1.2rem;
         }

         .sub {
            transition-delay: .1s;
         }
      }
   }
}