html {
  box-sizing: border-box;
  --bgColorMenu: #eaeaea;
  --duration: .7s;
}

html *, html *::before, html *::after {
  box-sizing: inherit;
}

#tab-menu body {
  margin: 0;
  display: flex;
  height: 100vh;
  overflow: hidden;
  align-items: center !important;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background-color var(--duration);
}

#tab-menu a {
  text-decoration: none;
  margin: 3px;
}

.menu {
  margin-top: 20px !important;
  margin: 0;
  display: inline-flex;
  width: 100%;
  font-size: 1.5em;
  padding: 0 1em 0 1em;
  position: relative;
  align-items: center;
  justify-content: center;
  background-color: var(--bgColorMenu);
}

.menu__item {
  all: unset;
  flex-grow: 1;
  z-index: 100;
  display: flex;
  cursor: pointer;
  position: relative;
  border-radius: 50%;
  align-items: center;
  will-change: transform;
  justify-content: center;
  padding: 0.55em 0 0.85em;
  transition: transform var(--timeOut , var(--duration));
}

.menu__item::before {
  content: "";
  z-index: -1;
  width: 6.6em;
  height: 4em;
  border-radius: 40%;
  position: absolute;
  transform: scale(0);
  transition: background-color var(--duration), transform var(--duration);
}

.menu__item.active {
  transform: translate3d(0, -.8em , 0);
}

.menu__item.active span {
  display: inline-block;
  font-size: 9px;
}

.menu__item span {
  display: none;
}

.menu__item.active::before {
  transform: scale(1);
  background-color: #ffffff;
}

.icon {
  width: 2em;
  height: 2.4em;
  stroke: #0e9be2;
  fill: transparent;
  stroke-width: 1pt;
  stroke-miterlimit: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 400;
}

.menu__item.active .icon {
  width: 2.8em;
  animation: strok 1.5s reverse;
  /*animation: slide-left 14s ease;*/
}

@keyframes strok {
  100% {
    stroke-dashoffset: 400;
  }
}

@keyframes slide-left {
  from {
    margin-left: -100%;
  }
  to {
    margin-left: 0%;
  }
}

.menu__border {
  left: 0px;
  bottom: 65%;
  width: 6em;
  height: 3em;
  border-radius: 100%;
  position: absolute;
  clip-path: url(#menu);
  will-change: transform;
  background-color: var(--bgColorMenu);
  transition: transform var(--timeOut , var(--duration));
}

@media screen and (max-width: 50em) {
  .menu {
    font-size: .8em;
  }
}

#tab-menu button, select {
  text-transform: none;
  margin-right: 20px !important;
}

@media (min-width: 576px) {
  #tab-menu button, select {
    text-transform: none;
    margin-right: 50px !important;
  }
}