$optionDefaultColours: #ED5565,#FC6E51,#FFCE54,#2ECC71,#5D9CEC,#AC92EC;

​

body {

   display:flex;

   flex-direction:row;

   justify-content:center;

   align-items:center;

   overflow:hidden;

   height:100vh;

   font-family: 'Roboto', sans-serif;

   transition:.25s;

   @include dark {

      background: #232223;

      color:white;

   }

   .credit {

      position: absolute;

      bottom:20px;

      left:20px;

      color:inherit;

   }

   .options {

      display:flex;

      flex-direction:row;

      align-items:stretch;

      overflow:hidden;

​

      min-width:600px;

      max-width:900px;

      width:calc(100% - 100px);

      height:400px;

      @for $i from 1 through 4 {

         @media screen and (max-width:798px - $i*80) {

            min-width:600px - $i*80;

            .option:nth-child(#{6-$i}) {

               display:none;

            }

         }

      }

      .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;

               }

            }

         }

      }

   }

}

$(".option").click(function(){

   $(".option").removeClass("active");

   $(this).addClass("active");

});

​