.toast__wrapper {
  width: 380px;
  position: fixed;
  z-index: 1;
  top: var(--medium);
  right: var(--medium);
}

.toast {
  width: 100%;
  padding: var(--medium);
  background-color: #ffffff;
  border-radius: 7px;
  display: grid;
  grid-template-columns: 1.3fr 6fr 0.5fr;
  align-items: center;
  box-shadow: 0 15px 30px rgba(0,0,0,0.08);

  &.success, &.notice {
    border-left: var(--small) solid #47D764;
  }

  &.error {
    border-left: var(--small) solid #ff355b;
  }

  &.info {
    border-left: var(--small) solid #2F86EB;
  }

  &.warning {
    border-left: var(--small) solid #FFC021;
  }

  .toast__icon svg {
    width: var(--large);
    height: var(--large);
  }

  &.success .toast__icon, &.notice .toast__icon {
    color: #47D764;
  }

  &.error .toast__icon {
    color: #ff355b;
  }

  &.info .toast__icon {
    color: #2F86EB;
  }

  &.warning .toast__icon {
    color: #FFC021;
  }

  &.dismiss {
    opacity: 0;
    transition: opacity 0.3s ease;
  }
}

.toast__title {
  font-weight: 600;
}

.toast__message {
  font-size: var(--medium);
}

.toast__close {
  font-size: var(--large);
  align-self: flex-start;
  background-color: transparent;
  border: none;
  line-height: 0;
  cursor: pointer;
}