:root, .neeto-ui-theme--light, .neeto-ui-theme--dark {
  // Container
  --neeto-ui-toastr-min-width: 320px;
  --neeto-ui-toastr-max-width: 640px;
  --neeto-ui-toastr-z-index: 100000;

  // Styles
  --neeto-ui-info-toastr-bg-color: rgb(var(--neeto-ui-info-600));
  --neeto-ui-error-toastr-bg-color: rgb(var(--neeto-ui-error-600));
  --neeto-ui-success-toastr-bg-color: rgb(var(--neeto-ui-success-600));
  --neeto-ui-warning-toastr-bg-color: rgb(var(--neeto-ui-warning-600));

  // Toastr
  --neeto-ui-toastr-min-height: 48px;
  --neeto-ui-toastr-padding-x: 1rem;
  --neeto-ui-toastr-padding-y: 0.75rem;
  --neeto-ui-toastr-margin-x: 0;
  --neeto-ui-toastr-margin-y: 1rem;
  --neeto-ui-toastr-box-shadow: none;
  --neeto-ui-toastr-border-radius: var(--neeto-ui-rounded-md);
  --neeto-ui-toastr-icon-size: 24px;
  --neeto-ui-toastr-gap: 12px;
  --neeto-ui-toastr-color: rgb(var(--neeto-ui-white));
  --neeto-ui-toastr-font-size: var(--neeto-ui-text-sm);
  --neeto-ui-toastr-font-weight: var(--neeto-ui-font-normal);

  // Close Button
  --neeto-ui-toastr-close-btn-color: rgb(var(--neeto-ui-white));
  --neeto-ui-toastr-close-btn-margin-y: auto;
  --neeto-ui-toastr-close-btn-margin-right: 0px;
  --neeto-ui-toastr-close-btn-margin-left: 8px;
}

body {
  .Toastify__toast-container {
    z-index: var(--neeto-ui-toastr-z-index);
    padding: 0;

    width: auto;
    max-width: var(--neeto-ui-toastr-max-width);
    min-width: var(--neeto-ui-toastr-min-width);

    .Toastify__toast.Toastify__toast--info {
      background-color: var(--neeto-ui-info-toastr-bg-color);
    }

    .Toastify__toast.Toastify__toast--error {
      background-color: var(--neeto-ui-error-toastr-bg-color);
    }

    .Toastify__toast.Toastify__toast--success {
      background-color: var(--neeto-ui-success-toastr-bg-color);
    }

    .Toastify__toast.Toastify__toast--warning {
      background-color: var(--neeto-ui-warning-toastr-bg-color);
    }

   &.Toastify__toast-container--bottom-left{
      bottom: 12px;
      left: 12px;
    }

    .Toastify__toast, .neeto-ui-toastr{
      min-height: var(--neeto-ui-toastr-min-height);
      padding: var(--neeto-ui-toastr-padding-y) var(--neeto-ui-toastr-padding-x);
      margin: var(--neeto-ui-toastr-margin-y) var(--neeto-ui-toastr-margin-x);
      box-shadow: var(--neeto-ui-toastr-box-shadow);
      border-radius: var(--neeto-ui-toastr-border-radius);

      font-family: var(--neeto-ui-body-font-family) !important;

      @include viewport(xs-mob) {
        max-width: calc(100% - 24px);
      }

      &::after {
        visibility: hidden;
      }

      .Toastify__toast-icon {
        margin: 0;

        svg {
          width: var(--neeto-ui-toastr-icon-size);
          height: var(--neeto-ui-toastr-icon-size);
        }
      }

      .Toastify__toast-body {
        margin: 0;
        padding: 0;
        gap: var(--neeto-ui-toastr-gap);
        color: var(--neeto-ui-toastr-color);

        div {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          align-items: center;
          gap: var(--neeto-ui-toastr-gap);

          p {
            font-size: var(--neeto-ui-toastr-font-size);
            font-weight: var(--neeto-ui-toastr-font-weight);
            word-break: break-word;
          }
        }

        .toastr-message-container__btn-wrapper {
          display: flex;
          align-items: center;
        }
      }

      .neeto-ui-toastr__close-button {
        opacity: 0.8;
        margin: var(--neeto-ui-toastr-close-btn-margin-y) var(--neeto-ui-toastr-close-btn-margin-right) var(--neeto-ui-toastr-close-btn-margin-y) var(--neeto-ui-toastr-close-btn-margin-left);
        flex-shrink: 0;
        color: var(--neeto-ui-toastr-close-btn-color);
        transition: var(--neeto-ui-transition);

        &:hover,
        &:focus,
        &:active {
          opacity: 1;
        }
      }
    }
  }
}

.neetix-toastr {
  --neeto-ui-info-toastr-bg-color: rgb(var(--neeto-ui-gray-800));
  --neeto-ui-error-toastr-bg-color: rgb(var(--neeto-ui-gray-800));
  --neeto-ui-success-toastr-bg-color: rgb(var(--neeto-ui-gray-800));
  --neeto-ui-warning-toastr-bg-color: rgb(var(--neeto-ui-gray-800));
}
