.stencila-toast-container{
  align-items:center;
  box-sizing:border-box;
  display:flex;
  display:flex!important;
  flex-direction:column;
  height:100vh;
  left:0;
  padding:.5rem;
  pointer-events:none;
  position:fixed;
  top:0;
  width:100vw;
  z-index:50
}

.stencila-toast-container[position^=top]{
  justify-content:flex-start
}

.stencila-toast-container[position^=bottom]{
  justify-content:flex-end
}

.stencila-toast-container[position$=Start i]{
  align-items:flex-start
}

.stencila-toast-container[position$=End i]{
  align-items:flex-end
}

:host,stencila-toast{
  /** @prop --color: Text color of the Toast component */
  --color:var(--color-key,#000);
  /** @prop --background: Background color of the Toast component */
  --background:var(--color-stock,#fff)
}

:host,stencila-toast{
  --tw-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);
  border-radius:.375rem;
  box-shadow:0 0 #0000,0 0 #0000,var(--tw-shadow);
  box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);
  color:#fff;
  color:var(--color-stock,#fff);
  display:block;
  display:flex;
  flex-direction:row;
  flex-shrink:0;
  font-family:sans-serif;
  font-family:var(--font-family-body,sans-serif);
  font-size:1rem;
  line-height:1.5rem;
  line-height:1;
  margin-bottom:.25rem;
  margin-top:.25rem;
  max-width:65ch;
  overflow:hidden;
  pointer-events:auto;
  position:relative
}

:host,stencila-toast{
  background-color:var(--background);
  border:1px solid var(--color-neutral-200);
  color:var(--color);
  min-width:32ch
}

:host([data-enter]),stencila-toast[data-enter]{
  animation:fade-in .15s ease-in;
  animation-delay:0ms;
  animation-delay:calc(var(--i, 0)*50ms)
}

:host([data-exit]),stencila-toast[data-exit]{
  animation:fade-out .15s ease-out;
  animation-fill-mode:both
}

:host .toastAccent,stencila-toast .toastAccent{
  color:#fff;
  color:var(--color-stock,#fff);
  line-height:1;
  padding:1rem .5rem
}

:host .toastAccent stencila-icon,stencila-toast .toastAccent stencila-icon{
  --height:1.25rem;
  --width:1.25rem;
  border-radius:9999px;
  display:block;
  margin-top:-.125rem;
  padding:.25rem
}

:host([type=info]) .toastAccent,:host .toastAccent,stencila-toast .toastAccent,stencila-toast[type=info] .toastAccent{
  background-color:#cfd2e1;
  background-color:var(--color-neutral-100,#cfd2e1);
  color:#595f78;
  color:var(--color-neutral-600,#595f78)
}

:host([type=info]) .toastAccent stencila-icon,:host .toastAccent stencila-icon,stencila-toast .toastAccent stencila-icon,stencila-toast[type=info] .toastAccent stencila-icon{
  background-color:#e9eaf1;
  background-color:var(--color-neutral-50,#e9eaf1)
}

:host([type=primary]),stencila-toast[type=primary]{
  border-color:#a7b3ff;
  border-color:var(--color-primary-200,#a7b3ff)
}

:host([type=primary]) .toastAccent,stencila-toast[type=primary] .toastAccent{
  background-color:#cacfff;
  background-color:var(--color-primary-100,#cacfff);
  color:#2069f2;
  color:var(--color-primary-500,#2069f2)
}

:host([type=primary]) .toastAccent stencila-icon,stencila-toast[type=primary] .toastAccent stencila-icon{
  background-color:#ebecff;
  background-color:var(--color-primary-50,#ebecff)
}

:host([type=success]),stencila-toast[type=success]{
  border-color:#9dcaa9;
  border-color:var(--color-success-200,#9dcaa9)
}

:host([type=success]) .toastAccent,stencila-toast[type=success] .toastAccent{
  background-color:#9dcaa9;
  background-color:var(--color-success-200,#9dcaa9);
  color:#3c8455;
  color:var(--color-success-500,#3c8455)
}

:host([type=success]) .toastAccent stencila-icon,stencila-toast[type=success] .toastAccent stencila-icon{
  background-color:#edf6ef;
  background-color:var(--color-success-50,#edf6ef)
}

:host([type=warn]),stencila-toast[type=warn]{
  border-color:#ffde88;
  border-color:var(--color-warn-200,#ffde88)
}

:host([type=warn]) .toastAccent,stencila-toast[type=warn] .toastAccent{
  background-color:#ffde88;
  background-color:var(--color-warn-200,#ffde88);
  color:#ba8925;
  color:var(--color-warn-600,#ba8925)
}

:host([type=warn]) .toastAccent stencila-icon,stencila-toast[type=warn] .toastAccent stencila-icon{
  background-color:#fff3cc;
  background-color:var(--color-warn-50,#fff3cc)
}

:host([type=danger]),stencila-toast[type=danger]{
  border-color:#ffa6ae;
  border-color:var(--color-danger-200,#ffa6ae)
}

:host([type=danger]) .toastAccent,stencila-toast[type=danger] .toastAccent{
  background-color:#ffa6ae;
  background-color:var(--color-danger-200,#ffa6ae);
  color:#cf445e;
  color:var(--color-danger-500,#cf445e)
}

:host([type=danger]) .toastAccent stencila-icon,stencila-toast[type=danger] .toastAccent stencila-icon{
  background-color:#ffeff0;
  background-color:var(--color-danger-50,#ffeff0)
}

:host([position=topStart]),stencila-toast[position=topStart]{
  align-self:flex-start
}

:host([position=topEnd]),stencila-toast[position=topEnd]{
  align-self:flex-end
}

:host .content,stencila-toast .content{
  align-items:flex-start;
  display:flex;
  flex-direction:column;
  font-size:.875rem;
  justify-content:center;
  line-height:1.25rem;
  padding:1rem
}

:host [slot=title],stencila-toast [slot=title]{
  font-weight:700
}

:host [slot=actions]:not(:empty),stencila-toast [slot=actions]:not(:empty){
  display:flex;
  justify-content:flex-start;
  margin-top:.5rem;
  width:100%
}

:host [slot=actions]:not(:empty)>:not(:first-child),stencila-toast [slot=actions]:not(:empty)>:not(:first-child){
  padding-left:.5rem
}

:host([dismissable]),stencila-toast[dismissable]{
  padding-right:2rem
}

:host .closeButton,stencila-toast .closeButton{
  position:absolute;
  right:.325rem;
  top:.325rem
}

@keyframes fade-in{
  0%{
    opacity:0;
    transform:translateY(25%)
  }

  to{
    opacity:1;
    transform:translateY(0)
  }
}

@keyframes fade-out{
  0%{
    max-height:none;
    opacity:1;
    transform:translateY(0)
  }

  to{
    max-height:0;
    opacity:0;
    padding-bottom:0;
    padding-top:0;
    transform:translateY(25%)
  }
}

