@import url("https://fonts.googleapis.com/css2?family=Sono:wght@400&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Sora:wght@600&display=swap");

/* 
 *
 * 1px represents 0.0625rem 
 *
 */

.toast-container {
  position: fixed; /* Keeping it fixed to not disturbed by the scroll */
  margin: 0.625rem;
  width: 21.875rem;
  z-index:999999;
  /* For multiple toasts */
/*  display: flex;
  flex-direction: column;
  gap: 1rem;*/
}

/* 
 *
 *
 *
    .toast-container[data-position="top-right"] {
    top: 0;
    right: 0;

    Since we will be using all the positions, it's wise to break the styles to respective directions as below.
  *
  *
  *
} */

/* anything that starts with "top-" */
.toast-container[data-position^="top-"] {
  top: 0;
}

/* anything that starts with "bottom-" */
.toast-container[data-position^="bottom-"] {
  bottom: 0;
}

/* anything that ends with "-right" */
.toast-container[data-position$="-right"] {
  right: 0;
}

/* anything that ends with "-left" */
.toast-container[data-position$="-left"] {
  left: 0;
}

/* anything that ends with "-center" */
.toast-container[data-position$="-center"] {
  left: 50%;
  transform: translateX(-50%);
}

.toast {
  box-sizing: border-box;
  padding: 0.625rem;
  background-color: var(--toast_background);
  border-radius: 0.25em;
  box-shadow: 0 0.313rem 1.563rem rgba(0, 0, 0, 0.1);
  position: relative;
  width: 100%;
  height: 5rem;
  overflow: hidden; /* Hide overflowing progress bar */

  transition: transform 300ms ease-in-out;

  display: flex;
  align-items: center;
}

.toast-container[data-position$="-right"] .toast {
  transform: translateX(110%);
}

.toast-container[data-position$="-left"] .toast {
  transform: translateX(-110%);
}

.toast-container[data-position="top-center"] .toast {
  /* To make sure new toasts are always from the top */
  transform: translateY(-100vh);
}

.toast-container[data-position="bottom-center"] .toast {
  /* To make sure new toasts are always from the bottom, adding 100vh instead of 100% */
  transform: translateY(100vh);
}

/* Class is added via requestAnimationFrame to appky animation */
/* Adding `.toast-container` here to avoid the css specificity issues for animation. Without this, the animation won't work as expected since toast.show will have more specificity that the above styles of transform */
.toast-container .toast.show {
  transform: translateX(0);
}

/* can-close is added dynamically based on user input `canCloseOnClick` */
.toast.can-close::after {
    cursor: pointer;
    content: "\00D7";
    position: absolute;
    /*top: 0.313rem;*/
    top: 1rem;
    right: 0.625rem;
    color: var(--closeIconColor);
}

/* Progress bar */
.toast.progress::before {
  content: "";
  height: 0.25rem;

  /*
    1. calc() is a CSS function that performs mathematical calculations. It takes a mathematical expression as 
       its argument and returns the result of the calculation.
    2.100% is the full width of the element. This represents the maximum value that the progress can be.
    3. * is the multiplication operator.
    4. var(--progress, 0.5) is a CSS variable that represents the progress value of the element. 
       The --progress variable is defined with a default value of 0.5 if it is not set elsewhere. 
       This value is multiplied by the full width of the element to determine the width of the progress indicator.
    
    So, this code is essentially setting the width of an element to a percentage of its full width, 
    based on the value of a custom CSS variable. The variable --progress can be set to any value between 0 and 1 
    to represent the progress of the element, and the width of the element will adjust accordingly. 
    For example, if --progress is set to 0.75, the element will be 75% of its full width.
  */

  width: calc(100% * var(--progress, 0.5));
  /* background: radial-gradient(
    circle,
    rgba(238, 174, 217, 1) 19%,
    rgba(148, 151, 233, 0.9408555658591562) 83%
  ); */
  background: var(--progressBackground);

  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.toast_content {
  height: 100%;
  max-width: 95%;

  display: flex;
  align-items: center;
}

.toast_content .toast_type_asset {
  margin: 0 0.625rem;
  height: 1.875rem;
  width: 1.875rem;
  object-fit: contain;
}
.toast_content .toast_type_asset_span {
    margin: 0 0.625rem;
    width: 1.875rem;
    object-fit: contain;
}

.toast_content .toast_text h4 {
  margin-bottom: 0.125rem;
  font-size: 0.875rem;
  font-family: "Sora", sans-serif;
  color: var(--toast_title_color);
  /*margin-bottom:0.5rem;*/
}

.toast_content .toast_text p {
  font-size: 0.688rem;
  color: #b0b0b5;
  font-family: "Sono", sans-serif;
}

.toast_content .toast_text {
  width: 100%;
  vertical-align:middle;
}
.toast_content .ifa {
    background-color: var(--progressBackground) !important;
}