.flipdown {
    /* Sizes */
    --rotor-base: 100px;
  
    --rotor-width: calc(var(--rotor-base) * 0.5);
    --rotor-height: calc(var(--rotor-base) * 0.8);
    --rotor-gap: calc(var(--rotor-base) * 0.05);
    --rotor-3d-perspective: calc(var(--rotor-base) * 2);
    --rotor-border-radius: calc(var(--rotor-base) * 0.04);
    --rotor-font-size: calc(var(--rotor-base) * 0.64);
    --rotor-heading-height: calc(var(--rotor-base) * 0.3);
    --rotor-heading-font-size: calc(var(--rotor-base) * 0.16);
  
    --rotor-group-gap: calc(var(--rotor-base) * 0.3);
    --rotor-colon-size: calc(var(--rotor-base) * 0.1);
  
    /* Colors */
    --flip-base: 0, 0%;
    --flip-l: 0%;
  
    --flip-dark-1: hsl(var(--flip-base), var(--flip-l)); /*#000000*/
    --flip-dark-2: hsl(var(--flip-base), calc(var(--flip-l) + 8%)); /*#141414*/
    --flip-dark-3: hsl(var(--flip-base), calc(var(--flip-l) + 13%)); /*#222222*/
    --flip-dark-4: hsl(var(--flip-base), calc(var(--flip-l) + 20%)); /*#333333*/
  
    --flip-light-1: hsl(var(--flip-base), calc(var(--flip-l) + 100%)); /*#ffffff*/
    --flip-light-2: hsl(var(--flip-base), calc(var(--flip-l) + 94%)); /*#efefef*/
    --flip-light-3: hsl(var(--flip-base), calc(var(--flip-l) + 87%)); /*#dddddd*/
  }
  
  .flipdown {
    display: inline-flex;
  }
  
  .flipdown .rotor-group {
    display: flex;
    flex-wrap: wrap;
    width: calc(var(--rotor-width) * 2 + var(--rotor-gap));
    position: relative;
    margin-right: var(--rotor-group-gap);
  }
  
  .flipdown .rotor-group:last-child {
    margin-right: 0;
  }
  
  .flipdown .rotor-group-heading {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: var(--rotor-heading-height);
    font-size: var(--rotor-heading-font-size);
  }
  
  .flipdown .rotor-group-heading:before {
    content: attr(data-before);
  }
  
  .flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):before,
  .flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):after {
    content: "";
    position: absolute;
    right: calc((var(--rotor-group-gap) / -2 + var(--rotor-colon-size) / -2));
    width: var(--rotor-colon-size);
    height: var(--rotor-colon-size);
    border-radius: 50%;
  }
  
  .flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):before {
    bottom: calc(var(--rotor-height) * 0.75 - var(--rotor-colon-size));
  }
  
  .flipdown .rotor-group:nth-child(n + 2):nth-child(-n + 3):after {
    bottom: calc(var(--rotor-height) * 0.25);
  }
  
  .flipdown .rotor {
    position: relative;
    width: var(--rotor-width);
    height: var(--rotor-height);
    margin-right: var(--rotor-gap);
    border-radius: var(--rotor-border-radius);
    font-size: var(--rotor-font-size);
    text-align: center;
    perspective: var(--rotor-3d-perspective);
  }
  
  .flipdown .rotor:last-child {
    margin-right: 0;
  }
  
  .flipdown .rotor-top,
  .flipdown .rotor-bottom,
  .flipdown .rotor-leaf-front,
  .flipdown .rotor-leaf-rear {
    overflow: hidden;
    position: absolute;
    width: var(--rotor-width);
    height: calc(var(--rotor-height) / 2);
  }
  
  .flipdown .rotor-leaf {
    z-index: 1;
    position: absolute;
    width: var(--rotor-width);
    height: var(--rotor-height);
    transform-style: preserve-3d;
    transition: transform 0s;
  }
  
  .flipdown .rotor-leaf.flipped {
    transform: rotateX(-180deg);
    transition: all 0.5s ease-in-out;
  }
  
  .flipdown .rotor-leaf-front,
  .flipdown .rotor-leaf-rear {
    margin: 0;
    transform: rotateX(0deg);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
  
  .flipdown .rotor-top,
  .flipdown .rotor-leaf-front {
    line-height: var(--rotor-height);
    border-radius: var(--rotor-border-radius) var(--rotor-border-radius) 0 0;
  }
  
  .flipdown .rotor-bottom,
  .flipdown .rotor-leaf-rear,
  .flipdown .rotor:after {
    border-radius: 0 0 var(--rotor-border-radius) var(--rotor-border-radius);
  }
  
  .flipdown .rotor-leaf-rear {
    line-height: 0;
    transform: rotateX(-180deg);
  }
  
  .flipdown .rotor-bottom {
    bottom: 0;
    line-height: 0;
  }
  
  .flipdown .rotor:after {
    content: "";
    z-index: 2;
    position: absolute;
    bottom: 0;
    left: 0;
    width: var(--rotor-width);
    height: calc(var(--rotor-height) / 2);
  }
  
  /* THEMES */
  
  /********** Theme: dark **********/
  
  /* Font styles */
  .flipdown.flipdown__theme-dark {
    font-family: sans-serif;
    font-weight: bold;
  }
  /* Rotor group headings */
  .flipdown.flipdown__theme-dark .rotor-group-heading:before {
    color: var(--flip-dark-1);
  }
  /* Delimeters */
  .flipdown.flipdown__theme-dark
    .rotor-group:nth-child(n + 2):nth-child(-n + 3):before,
  .flipdown.flipdown__theme-dark
    .rotor-group:nth-child(n + 2):nth-child(-n + 3):after {
    background-color: var(--flip-dark-2);
  }
  /* Rotor tops */
  .flipdown.flipdown__theme-dark .rotor,
  .flipdown.flipdown__theme-dark .rotor-top,
  .flipdown.flipdown__theme-dark .rotor-leaf-front {
    color: var(--flip-light-1);
    background-color: var(--flip-dark-2);
  }
  /* Rotor bottoms */
  .flipdown.flipdown__theme-dark .rotor-bottom,
  .flipdown.flipdown__theme-dark .rotor-leaf-rear {
    color: var(--flip-light-2);
    background-color: var(--flip-dark-3);
  }
  /* Hinge */
  .flipdown.flipdown__theme-dark .rotor:after {
    border-top: solid 1px var(--flip-dark-2);
  }
  
  /********** Theme: light **********/
  
  /* Font styles */
  .flipdown.flipdown__theme-light {
    font-family: sans-serif;
    font-weight: bold;
  }
  /* Rotor group headings */
  .flipdown.flipdown__theme-light .rotor-group-heading:before {
    color: var(--flip-light-2);
  }
  /* Delimeters */
  .flipdown.flipdown__theme-light
    .rotor-group:nth-child(n + 2):nth-child(-n + 3):before,
  .flipdown.flipdown__theme-light
    .rotor-group:nth-child(n + 2):nth-child(-n + 3):after {
    background-color: var(--flip-light-3);
  }
  /* Rotor tops */
  .flipdown.flipdown__theme-light .rotor,
  .flipdown.flipdown__theme-light .rotor-top,
  .flipdown.flipdown__theme-light .rotor-leaf-front {
    color: var(--flip-dark-3);
    background-color: var(--flip-light-3);
  }
  /* Rotor bottoms */
  .flipdown.flipdown__theme-light .rotor-bottom,
  .flipdown.flipdown__theme-light .rotor-leaf-rear {
    color: var(--flip-dark-4);
    background-color: var(--flip-light-2);
  }
  /* Hinge */
  .flipdown.flipdown__theme-light .rotor:after {
    border-top: solid 1px var(--flip-dark-3);
  }
  
  /* END OF THEMES */