//default toast
.react-toast-notifications__toast__dismiss-button {
  cursor: "pointer";
  flex-shrink: 0;
  opacity: 0.5;
  padding: 8px 12px;
  transition: "opacity 150ms";
}

.react-toast-notifications__toast__dismiss-button:hover {
  opacity: 1;
}

.react-toast-notifications__toast__content {
  flex-grow: 1;
  font-size: 14;
  line-height: 1.4;
  min-height: 40;
  padding: 8px 12px;
}

.react-toast-notifications__toast__dismiss-text {
  border: 0;
  clip: "rect(1px, 1px, 1px, 1px)";
  height: 1;
  overflow: "hidden";
  padding: 0;
  position: "absolute";
  white-space: "nowrap";
  width: 1;
}

//toast container
.react-toast-notifications__container {
  box-sizing: border-box;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 8px;
  position: fixed;
  z-index: 1000;
}

//toast countdown
@keyframes countdown {
  from {
    height: 100%;
  }
  to {
    height: 0%;
  }
}

.react-toast-notifications__toast__countdown_animation {
  background-color: rgba(0, 0, 0, 0.1);
  bottom: 0;
  height: 0;
  left: 0;
  position: absolute;
  width: 100%;
  animation-name: countdown;
}
//toast element
.react-toast-notifications__toast {
  display: flex;
  margin-bottom: 8px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.175);
  border-radius: 4px;
  width: 360px;
  &.react-toast-notifications__toast {
    &--success {
      background-color: #e3fcef;
      color: #006644;
    }

    &--error {
      background-color: #ffebe6;
      color: #bf2600;
    }

    &--info {
      background-color: #ffffff;
      color: #505f79;
    }

    &--warning {
      background-color: #fffae6;
      color: #ff8b00;
    }
  }
}

//toast-icon
.react-toast-notifications__toast__icon-wrapper {
  flex-shrink: 0;
  overflow: hidden;
  padding-bottom: 8px;
  padding-top: 8px;
  position: relative;
  text-align: center;
  width: 30px;
  border-bottom-left-radius: 4px;
  border-top-left-radius: 4px;

  &.react-toast-notifications__toast__icon-wrapper {
    &--error {
      background-color: #ff5630;
      color: #ffebe6;
    }

    &--success {
      background-color: #36b37e;
      color: #e3fcef;
    }

    &--warning {
      background-color: #ffab00;
      color: #fffae6;
    }

    &--info {
      background-color: #2684ff;
      color: #ffffff;
    }
  }
}
.react-toast-notifications__toast__icon {
  position: relative;
  z-index: 1;
}