@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-alert{
  box-sizing:border-box;
  display:flex;
  position:relative;
  flex-direction:row;
  align-items:center;
  cursor:pointer;
  padding-block:0.75rem;
  padding-inline:1rem;
  inline-size:-moz-fit-content;
  inline-size:fit-content;
  min-block-size:48px;
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  font-size:1rem;
  line-height:1.5;
  color:hsl(0, 0%, 100%);
  background-color:hsl(200, 100%, 4.7%);
  box-shadow:0 0.75rem 0.75rem 0 hsla(200, 100%, 24.5%, 0.1);
  border-radius:4px;
  z-index:500;
  outline:0;
}

.vtmn-alert_content{
  display:flex;
  flex-direction:column;
  position:relative;
  inline-size:100%;
}

.vtmn-alert_content-title{
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  font-weight:700;
  font-size:1rem;
  line-height:1.25rem;
  inline-size:100%;
  display:flex;
  flex-direction:row;
  justify-content:space-between;
  align-items:center;
}

.vtmn-alert_content-description{
  -webkit-margin-before:0.5rem;
          margin-block-start:0.5rem;
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  font-weight:400;
  font-size:1rem;
  line-height:1.5rem;
  align-self:flex-start;
}

.vtmn-alert_variant--info,
.vtmn-alert_variant--success,
.vtmn-alert_variant--danger,
.vtmn-alert_variant--warning{
  -webkit-padding-start:3.5rem;
          padding-inline-start:3.5rem;
}

.vtmn-alert_variant--info::before,
.vtmn-alert_variant--success::before,
.vtmn-alert_variant--warning::before,
.vtmn-alert_variant--danger::before{
  position:absolute;
  inset-block-start:calc(50% - 0.75rem);
  inset-inline-start:1rem;
  inline-size:1.5rem;
  block-size:1.5rem;
  content:'';
}

.vtmn-alert_variant--info::before{
  background-color:hsl(200, 100%, 36.9%);
  -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-alert_variant--success::before{
  background-color:hsl(134, 65.7%, 40%);
  -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='M8 14.667A6.666 6.666 0 1 1 8 1.334a6.666 6.666 0 0 1 0 13.333zm0-1.334A5.333 5.333 0 1 0 8 2.667a5.333 5.333 0 0 0 0 10.666zM4.507 7.838l2.828 2.829 4.714-4.714-.943-.943-3.77 3.771-1.887-1.886-.942.943z'/%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='M8 14.667A6.666 6.666 0 1 1 8 1.334a6.666 6.666 0 0 1 0 13.333zm0-1.334A5.333 5.333 0 1 0 8 2.667a5.333 5.333 0 0 0 0 10.666zM4.507 7.838l2.828 2.829 4.714-4.714-.943-.943-3.77 3.771-1.887-1.886-.942.943z'/%3E%3C/svg%3E");
}

.vtmn-alert_variant--warning::before{
  background-color:hsl(21, 100%, 52%);
  -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 0zm-4.666 2v1.333H7.333V10h1.334zm0-1.333v-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 0zm-4.666 2v1.333H7.333V10h1.334zm0-1.333v-4H7.333v4h1.334z'/%3E%3C/svg%3E");
}

.vtmn-alert_variant--danger::before{
  background-color:hsl(357, 77.1%, 52%);
  -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 0zm-4.666 2v1.333H7.333V10h1.334zm0-1.333v-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 0zm-4.666 2v1.333H7.333V10h1.334zm0-1.333v-4H7.333v4h1.334z'/%3E%3C/svg%3E");
}

.vtmn-alert .vtmn-btn{
  -webkit-margin-start:0.75rem;
          margin-inline-start:0.75rem;
  -webkit-margin-before:-0.375rem;
          margin-block-start:-0.375rem;
  -webkit-margin-after:-0.375rem;
          margin-block-end:-0.375rem;
}

.vtmn-alert .vtmn-btn span[class^='vtmx-']{
  font-size:1rem;
}

.vtmn-alert.show{
  display:flex;
  position:fixed;
  inset-block-start:2rem;
  inset-inline-end:1rem;
  margin-left:1rem;
  animation:fade-in 0.2s ease-in forwards, slide-left 0.2s ease-in forwards, slide-right 0.2s 7.5s ease-in forwards;
}

.vtmn-alert.animate-delay{
  animation-delay:0s, 0s, 7.5s;
}

@media screen and (max-width: 599px){
  .vtmn-alert{
    max-inline-size:90%;
    margin-block:0;
    margin-inline:auto;
  }
  .vtmn-alert.show{
    inset-block-start:initial;
    inset-inline-end:1rem;
    inset-block-end:2rem;
    inset-inline-start:1rem;
    animation:fade_in 0.2s ease-in forwards, slide-up 0.2s ease-in forwards, slide-down 0.2s 7.5s ease-in forwards;
  }
}