Duffer Derek

.toast {
  margin: 0px !important;
  &.success {
    &::after {
      background-image: url("../../../images/check_green.svg");
      @apply bg-[rgba(87,177,97,0.1)] content-[''] absolute top-0 left-0 w-[41px] h-full bg-no-repeat bg-center;
    }
    @apply border-[rgba(87,177,97,0.5)] shadow-[2px_2px_4px_0px_rgba(87,177,97,0.08)];
  }

  &.failed {
    &::after {
      background-image: url("../../../images/error.svg");
      @apply bg-[rgba(227,6,19,0.1)] content-[''] absolute top-0 left-0 w-[41px] h-full bg-no-repeat bg-center;
    }
    @apply border-[rgba(227,6,19,0.4)] shadow-[2px_2px_4px_0px_rgba(227,6,19,0.08)];
  }

  &.warning {
    &::after {
      background-image: url("../../../images/warning.svg");
      @apply bg-[rgba(228,114,0,0.1)] content-[''] absolute top-0 left-0 w-[41px] h-full bg-no-repeat bg-center;
    }
    @apply border-[rgba(228,114,0,0.4)] shadow-[2px_2px_4px_0px_rgba(228,114,0,0.08)];
  }
  &.static {
    position: relative;
  }
  @apply fixed top-[30px] left-1/2 z-[999999999] flex w-[calc(100%-20px)] max-w-[507px] p-[8px_14px_9px_57px] mb-[0] border border-[#000] rounded-[8px] justify-between text-left bg-white transform -translate-x-1/2;

  p {
    @apply w-[calc(100%-20px)] m-0 font-[Montserrat] text-[12px] font-medium normal-case leading-[20px] text-[#111];
  }

  .close {
    @apply w-[20px] h-[20px] ml-[15px] cursor-pointer;
  }
}