:host {
  --animation-duration: 350ms;
  --padding: 0.75rem;

  color: var(--manifold-text-color);
  font-family: var(--manifold-font-family);
}

@-webkit-keyframes collapse {
  0% {
    height: var(--height);
  }

  99% {
    position: static; /*  animate position on last frame so it doesn’t “jump” at the end */
  }

  100% {
    position: absolute; /* without this, surrounding margins won’t collapse (also we can’t animate display: none) */
    height: 0;
  }
}

@keyframes collapse {
  0% {
    height: var(--height);
  }

  99% {
    position: static; /*  animate position on last frame so it doesn’t “jump” at the end */
  }

  100% {
    position: absolute; /* without this, surrounding margins won’t collapse (also we can’t animate display: none) */
    height: 0;
  }
}

.toast {
  display: grid;
  box-sizing: border-box;
  margin-top: 0;
  margin-bottom: 0;
  color: var(--manifold-color-primary);
  line-height: 1;
  will-change: height

  /* hackiness below to vary the opacity of hex colors */
}

.toast::before,
  .toast::after {
    grid-row: 1;
    grid-column: 1;
    border-radius: var(--manifold-radius);
    content: '';
    pointer-events: none;
  }

.toast::before {
    background: var(--manifold-color-primary);
    opacity: 0.05;
  }

.toast::after {
    box-shadow: inset 0 0 0 1px var(--manifold-color-primary);
    opacity: 0.375;
  }

.toast a {
    color: inherit;
  }

.toast[data-alert-type='error'] {
    color: var(--manifold-color-error)
  }

.toast[data-alert-type='error']::before {
      background: var(--manifold-color-error);
    }

.toast[data-alert-type='error']::after {
      box-shadow: inset 0 0 0 1px var(--manifold-color-error);
    }

.toast[data-alert-type='success'] {
    color: var(--manifold-color-success)
  }

.toast[data-alert-type='success']::before {
      background: var(--manifold-color-success);
    }

.toast[data-alert-type='success']::after {
      box-shadow: inset 0 0 0 1px var(--manifold-color-success);
    }

.toast[data-alert-type='warning'] {
    color: var(--manifold-color-warn)
  }

.toast[data-alert-type='warning']::before {
      background: var(--manifold-color-warn);
    }

.toast[data-alert-type='warning']::after {
      box-shadow: inset 0 0 0 1px var(--manifold-color-warn);
      opacity: 0.6;
    }

.toast[data-dismissed] {
    overflow: hidden;
    visibility: hidden;
    -webkit-transition: visibility 0ms var(--animation-duration);
    transition: visibility 0ms var(--animation-duration);
    -webkit-animation-name: collapse;
            animation-name: collapse;
    -webkit-animation-duration: var(--animation-duration);
            animation-duration: var(--animation-duration);
    -webkit-animation-timing-function: var(--manifold-ease-out);
            animation-timing-function: var(--manifold-ease-out);
    -webkit-animation-fill-mode: forwards;
            animation-fill-mode: forwards;
    pointer-events: none;
  }

.grid {
  display: grid;
  grid-row: 1;
  grid-column: 1;
  grid-column-gap: calc(var(--padding) - 0.125rem);
  grid-template-columns: -webkit-min-content auto;
  grid-template-columns: min-content auto;
  -webkit-box-align: baseline;
          align-items: baseline;
  padding-top: var(--padding);
  padding-right: var(--padding);
  padding-bottom: var(--padding);
  padding-left: var(--padding)
}

.grid[data-dismissable] {
    position: relative;
    padding-right: 4rem;
  }

.grid .content {
    align-self: flex-start;
  }

.close {
  position: absolute;
  top: 1px; /* 1px border */
  right: 1px;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  box-sizing: border-box;
  width: calc(1rem + var(--padding) + var(--padding));
  height: calc(1rem + var(--padding) + var(--padding));
  padding: 0;
  color: currentColor;
  font-size: 1.125em;
  line-height: 1;
  background: none;
  border: none;
  border-top-right-radius: var(--manifold-radius);
  border-bottom-right-radius: var(--manifold-radius);
  -webkit-transition: background-color 150ms linear, -webkit-filter 150ms linear;
  transition: background-color 150ms linear, -webkit-filter 150ms linear;
  transition: background-color 150ms linear, filter 150ms linear;
  transition: background-color 150ms linear, filter 150ms linear, -webkit-filter 150ms linear;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none
}

.close:focus {
    background-color: var(--manifold-grayscale-05);
    outline: none;
    -webkit-filter: saturate(150%);
            filter: saturate(150%);
  }