/* THEMES */
.flipdown {
  --flip-color: #313131;
  --fore-color: #ffffff;
  color: #ffffff;
  color: var(--fore-color);
}
.flipdown .rotor-group-heading {
  color: #888888;
}
.flipdown .delimiter {
  color: #313131;
  color: var(--flip-color);
}
.flipdown .rotor .rotor-leaf-rear,
.flipdown .rotor .rotor-leaf-front,
.flipdown .rotor .rotor-top,
.flipdown .rotor .rotor-bottom {
  background-color: #313131;
  background-color: var(--flip-color);
}
.flipdown .rotor .rotor-top,
.flipdown .rotor .rotor-leaf-front {
  filter: brightness(0.95);
}
.flipdown .rotor:after {
  border-top: solid 1px #454545;
  border-top: solid 1px var(--flip-color);
  filter: saturate(1.5) opacity(0.5);
}
.flipdown.flipdown__theme-light {
  --flip-color: #f4f4f4;
  --fore-color: #000000;
}
.flipdown.flipdown__theme-red {
  --flip-color: #c03131;
  --fore-color: #ffffff;
}
.flipdown.flipdown__theme-yellow {
  --flip-color: #e9ec3d;
  --fore-color: #000000;
}
.flipdown.flipdown__theme-green {
  --flip-color: #2db027;
  --fore-color: #ffffff;
}
.flipdown {
  --corner-radius: 0.1em;
  --flip-speed: 0.4s;
  overflow: visible;
  display: flex;
  /* Font styles */
  font-family: sans-serif;
  font-size: 4em;
  font-weight: bold;
}
.flipdown .rotor:after {
  /* Hinge */
  content: '';
  position: absolute;
  z-index: 20;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
}
.flipdown.responsive .rotor-group {
  flex-grow: 4;
}
.flipdown .rotor-group.hidden + * {
  display: none;
}
.flipdown .rotor-group {
  position: relative;
  justify-content: center;
  flex-shrink: 1;
  display: flex;
  gap: 0.1em;
}
.flipdown .rotor-group.delimiter {
  padding: 0 0.1em;
}
.flipdown .rotor-group.top {
  margin-top: 2rem;
  margin-bottom: 0;
}
.flipdown .rotor-group.top .rotor-group-heading {
  bottom: 100%;
}
.flipdown .rotor-group.bottom {
  margin-top: 0;
  margin-bottom: 2rem;
}
.flipdown .rotor-group.bottom .rotor-group-heading {
  top: 100%;
}
.flipdown .rotor-group.top .rotor-group-heading,
.flipdown .rotor-group.bottom .rotor-group-heading {
  position: absolute;
}
.flipdown .rotor-group.right .rotor-group-heading {
  order: 10;
}
.flipdown .rotor-group.left .rotor-group-heading {
  order: -1;
}
.flipdown .rotor-group.right,
.flipdown .rotor-group.left {
  align-items: baseline;
}
.flipdown .rotor-group .rotor-group-heading {
  text-align: center;
  font-size: 1rem;
  padding: 0.4em;
}
.flipdown .rotor-group .rotor {
  flex-grow: 1;
  position: relative;
  justify-content: center;
  display: flex;
  border-radius: 0.1em;
  border-radius: var(--corner-radius);
  text-align: center;
  perspective: 200px;
}
.flipdown .rotor-group .rotor .digit {
  padding: 0.1em 0.2em;
}
.flipdown .rotor-group .rotor .rotor-leaf {
  z-index: 10;
  flex-grow: 1;
  transform-style: preserve-3d;
  transition: transform 0s;
}
.flipdown .rotor-group .rotor .rotor-leaf.flipped {
  transform: rotateX(-180deg);
  transition: all 0.4s ease-in-out;
  transition-duration: var(--flip-speed);
}
.flipdown .rotor-group .rotor .rotor-leaf-front,
.flipdown .rotor-group .rotor .rotor-leaf-rear {
  overflow: hidden;
  width: 100%;
  margin: 0;
  transform: rotateX(0deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.flipdown .rotor-group .rotor .rotor-leaf-front {
  position: absolute;
  top: 0;
  border-radius: 0.1em 0.1em 0px 0px;
  border-radius: var(--corner-radius) var(--corner-radius) 0px 0px;
  height: 50%;
}
.flipdown .rotor-group .rotor .rotor-leaf-rear {
  border-radius: 0px 0px 0.1em 0.1em;
  border-radius: 0px 0px var(--corner-radius) var(--corner-radius);
  transform: rotateX(180deg);
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0% 100%);
}
.flipdown .rotor-group .rotor .rotor-top,
.flipdown .rotor-group .rotor .rotor-bottom {
  overflow: hidden;
  position: absolute;
  width: 100%;
}
.flipdown .rotor-group .rotor .rotor-top {
  z-index: 9;
  height: 50%;
  border-radius: 0.1em 0.1em 0px 0px;
  border-radius: var(--corner-radius) var(--corner-radius) 0px 0px;
}
.flipdown .rotor-group .rotor .rotor-bottom {
  z-index: 8;
  border-radius: 0.1em;
  border-radius: var(--corner-radius);
}
@media (max-width: 550px) {
  .flipdown .rotor-group {
    font-size: 50%;
  }
}