@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-toast{
  display:flex;
  flex-direction:row;
  align-items:center;
  padding:0.5rem 1rem;
  min-block-size:3rem;
  inline-size:-moz-fit-content;
  inline-size:fit-content;
  justify-content:space-between;
  font-family:var(--vtmn-typo_font-family);
  font-size:var(--vtmn-typo_text-2-font-size);
  line-height:var(--vtmn-typo_text-2-line-height);
  color:var(--vtmn-semantic-color_content-primary-reversed);
  background-color:var(--vtmn-semantic-color_background-primary-reversed);
  box-shadow:var(--vtmn-shadow_200);
  border-radius:var(--vtmn-radius_100);
  z-index:var(--vtmn-z-index_toast);
  box-sizing:border-box;
  outline:0;
}

.vtmn-toast.show{
  position:fixed;
  inset-inline-end:50%;
  inset-block-end:0;
  transform:translate(50%, -50%);
  animation:var(--vtmn-animation_overlay);
}

.vtmn-toast--with-icon-info > .vtmn-toast_content::before{
  display:inline-block;
  vertical-align:middle;
  white-space:nowrap;
  inline-size:1.5rem;
  block-size:1.5rem;
  content:'';
  background-color:var(--vtmn-semantic-color_content-primary-reversed);
  -webkit-margin-end:1rem;
          margin-inline-end:1rem;
  -webkit-mask:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.333 8a6.666 6.666 0 1 0 13.333 0A6.666 6.666 0 0 0 1.333 8zm12 0A5.333 5.333 0 1 1 2.667 8a5.333 5.333 0 0 1 10.666 0zM8.667 4.667V6H7.333V4.667h1.334zm0 6.666v-4H7.333v4h1.334z'/%3E%3C/svg%3E");
          mask:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.333 8a6.666 6.666 0 1 0 13.333 0A6.666 6.666 0 0 0 1.333 8zm12 0A5.333 5.333 0 1 1 2.667 8a5.333 5.333 0 0 1 10.666 0zM8.667 4.667V6H7.333V4.667h1.334zm0 6.666v-4H7.333v4h1.334z'/%3E%3C/svg%3E");
}

.vtmn-toast .vtmn-btn{
  -webkit-margin-start:0.75rem;
          margin-inline-start:0.75rem;
  -webkit-margin-before:-6px;
          margin-block-start:-6px;
  -webkit-margin-after:-6px;
          margin-block-end:-6px;
}

.vtmn-toast .vtmn-btn span[class^='vtmx-']{
  font-size:var(--vtmn-typo_text-2-font-size);
}

.vtmn-toast.animate-delay{
  animation-delay:0s, 0s, var(--vtmn-animation_overlay-duration), var(--vtmn-animation_overlay-duration);
}

@media screen and (min-width: 600px) and (max-width: 899px){
}

@media screen and (min-width: 900px) and (max-width: 1199px){
}

@media screen and (min-width: 1200px) and (max-width: 1799px){
}

@media screen and (min-width: 1800px){
}

@media screen and (max-width: 599px){
  .vtmn-toast{
    inline-size:90%;
    margin:0 auto;
  }
}
