@keyframes fade-in{
  from{
    opacity:0;
  }
  to{
    opacity:1;
  }
}

@keyframes slide-left{
  from{
    transform:translateX(120%);
  }
  to{
    transform:translateX(0);
  }
}

@keyframes slide-right{
  from{
    transform:translateX(0);
  }
  to{
    transform:translateX(120%);
  }
}

@keyframes slide-down{
  from{
    transform:translateY(0);
  }
  to{
    transform:translateY(120%);
  }
}

@keyframes slide-up{
  from{
    transform:translateY(120%);
  }
  to{
    transform:translateY(0);
  }
}

@keyframes show-up{
  from{
    bottom:0;
  }
  to{
    bottom:15px;
  }
}

@keyframes fade-out{
  from{
    opacity:1;
  }
  to{
    opacity:0;
  }
}

@keyframes vanish{
  from{
    bottom:15px;
  }
  to{
    bottom:0;
  }
}

@keyframes linear-indeterminate{
  0%{
    transform:translateX(-100%);
  }
  60%{
    transform:translateX(105%);
  }
  100%{
    transform:translateX(105%);
  }
}

@keyframes circle-indeterminate{
  0%{
    stroke-dashoffset:400;
    transform:rotate(-0.25turn);
  }
  50%{
    transform:rotate(0.75turn);
    stroke-dashoffset:0;
  }
  100%{
    stroke-dashoffset:400;
    transform:rotate(2.75turn);
  }
}

@keyframes circle-indeterminate-small{
  0%{
    stroke-dashoffset:200;
    transform:rotate(-0.25turn);
  }
  50%{
    transform:rotate(0.75turn);
    stroke-dashoffset:0;
  }
  100%{
    stroke-dashoffset:200;
    transform:rotate(2.75turn);
  }
}

@keyframes shimmer{
  from{
    transform:translateX(-100%);
  }
  to{
    transform:translateX(100%);
  }
}

.vtmn-tooltip{
  position:relative;
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  font-size:0.875rem;
  font-weight:400;
  outline:0;
}

.vtmn-tooltip::before{
  z-index:100;
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  font-size:0.875rem;
  font-weight:400;
  line-height:1.42;
  box-shadow:0 0.75rem 0.75rem 0 hsla(200, 100%, 24.5%, 0.1);
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  position:absolute;
  display:none;
  content:'';
  border:0.5rem solid transparent;
}

.vtmn-tooltip::after{
  z-index:100;
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  font-size:0.875rem;
  font-weight:400;
  line-height:1.42;
  box-shadow:0 0.75rem 0.75rem 0 hsla(200, 100%, 24.5%, 0.1);
  -webkit-user-select:none;
     -moz-user-select:none;
          user-select:none;
  position:absolute;
  display:none;
  content:attr(data-tooltip);
  inline-size:-moz-fit-content;
  inline-size:fit-content;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  padding-block:0.5rem;
  padding-inline:0.75rem;
  block-size:2.25rem;
  border-radius:4px;
  background-color:hsl(200, 100%, 4.7%);
  color:hsl(0, 0%, 100%);
  box-sizing:border-box;
}

.vtmn-tooltip:focus-visible{
  outline:none;
  box-shadow:0 0 0 0.25rem hsl(210, 14.3%, 94.5%), 0 0 0 0.375rem hsl(200, 100%, 4.7%);
}

.vtmn-tooltip:focus-visible > *{
  outline:none;
  box-shadow:0 0 0 0.25rem hsl(210, 14.3%, 94.5%), 0 0 0 0.375rem hsl(200, 100%, 4.7%);
}

.vtmn-tooltip[data-tooltip='']::before,
.vtmn-tooltip[data-tooltip='']::after{
  display:none !important;
}

.vtmn-tooltip:not([data-position])::before{
  bottom:100%;
  border-bottom-width:0;
  border-top:0.5rem solid hsl(200, 100%, 4.7%);
  left:50%;
  transform:translate(-50%, -78%);
}

.vtmn-tooltip[data-position^='top']::before{
  bottom:100%;
  border-bottom-width:0;
  border-top:0.5rem solid hsl(200, 100%, 4.7%);
  left:50%;
  transform:translate(-50%, -78%);
}

.vtmn-tooltip:not([data-position])::after,
.vtmn-tooltip[data-position^='top']::after{
  bottom:calc(100% + 0.4375rem);
  left:50%;
  transform:translate(-50%, -0.5em);
}

.vtmn-tooltip:not([data-position])::after,
.vtmn-tooltip[data-position='top-left']::after{
  left:-0.625rem;
}

.vtmn-tooltip:not([data-position])::after,
.vtmn-tooltip[data-position='top-right']::after{
  transform:translate(-1.25rem, -0.5em);
}

.vtmn-tooltip[data-position^='bottom']::before{
  top:100%;
  border-top-width:0;
  border-bottom:0.5rem solid hsl(200, 100%, 4.7%);
  left:50%;
  transform:translate(-50%, 78%);
}

.vtmn-tooltip[data-position^='bottom']::after{
  top:calc(100% + 0.4375rem);
  left:50%;
  transform:translate(-50%, 0.5em);
}

.vtmn-tooltip[data-position='bottom-left']::after{
  left:-0.625rem;
}

.vtmn-tooltip[data-position='bottom-right']::after{
  transform:translate(-1.25rem, 0.5em);
}

.vtmn-tooltip[data-position^='left']::before{
  top:50%;
  border-right-width:0;
  border-left:0.5rem solid hsl(200, 100%, 4.7%);
  left:calc(0em - 0.5rem);
  transform:translate(-76%, -50%);
}

.vtmn-tooltip[data-position^='left']::after{
  top:50%;
  right:calc(100% + 0.4375rem);
  transform:translate(-0.5em, -50%);
}

.vtmn-tooltip[data-position^='right']::before{
  top:50%;
  border-left-width:0;
  border-right:0.5rem solid hsl(200, 100%, 4.7%);
  right:calc(0em - 0.5rem);
  transform:translate(76%, -50%);
}

.vtmn-tooltip[data-position^='right']::after{
  top:50%;
  left:calc(100% + 0.4375rem);
  transform:translate(0.5em, -50%);
}

@media screen and (min-width: 900px){
  .vtmn-tooltip:not([data-tooltip='']):hover::before{
    animation:fade-in 200ms ease-in-out forwards;
  }
  .vtmn-tooltip:not([data-tooltip='']):hover::after{
    animation:fade-in 200ms ease-in-out forwards;
  }
  .vtmn-tooltip:not([data-tooltip='']):focus-visible::before{
    animation:fade-in 200ms ease-in-out forwards;
  }
  .vtmn-tooltip:not([data-tooltip='']):focus-visible::after{
    animation:fade-in 200ms ease-in-out forwards;
  }
  .vtmn-tooltip:hover::before,
  .vtmn-tooltip:hover::after,
  .vtmn-tooltip:focus-visible::before,
  .vtmn-tooltip:focus-visible::after{
    display:flex;
    justify-content:center;
    align-items:center;
  }
}

@media screen and (max-width: 899px){
  .vtmn-tooltip:not([data-tooltip='']):focus::before{
    animation:fade-in 200ms ease-in-out forwards;
  }
  .vtmn-tooltip:not([data-tooltip='']):focus::after{
    animation:fade-in 200ms ease-in-out forwards;
  }
  .vtmn-tooltip:focus::before,
  .vtmn-tooltip:focus::after{
    display:flex;
    justify-content:center;
    align-items:center;
  }
}