@use '../../scss/base/mixins' as *;
@use '../../scss/base/variables' as var;

// Set default toast width and responsive breakpoints
.Toastify {
  --toastify-toast-width: calc(100vw - 40px);
}

// Increase specificity to override default toastify styles
.Toastify__toast-container .Toastify__toast {
  border: 1px solid;
  border-radius: 4px;
  font-weight: var(--font-weight-semibold);
  font-family: 'Wix Madefor Display', sans-serif;
  min-height: auto;
  cursor: default;
  gap: 16px;
  padding: 16px;
  align-items: flex-start;
  width: fit-content;
  max-width: 520px;
  min-width: min-content;
  box-shadow: 0 4px 8px 0 var(--button-shadow-color);

  .Toastify__toast-icon {
    display: none;
  }

  .x {
    position: relative;
    top: 2px;
    cursor: pointer;
    opacity: 0.7;
    transition: all 0.25s ease-in-out;
    &:hover {
      opacity: 1;
    }
  }

  // On mobile, use a percentage width but still with max-width
  @media (max-width: var.$breakpoint-sm-max) {
    max-width: var(--toastify-toast-width);
  }
}

// Make the toast container fit the content of the toast
.Toastify__toast-container {
  width: fit-content;
  max-width: 100%;

  .Toastify__toast-body {
    margin: 0;
    padding: 0;
  }
}

@mixin toast-type($color, $light-color) {
  color: var(--#{$color});
  border-color: var(--#{$color});
  background: var(--#{$light-color});
  button {
    .x svg path {
      fill: var(--#{$color});
    }
    &:after {
      background-color: var(--#{$color});
    }
  }
}

// Increase specificity for toast types
.Toastify__toast-container .Toastify__toast--info {
  @include toast-type(dark-blue, light-blue);
}

.Toastify__toast-container .Toastify__toast--success {
  @include toast-type(dark-green, light-green);
}

.Toastify__toast-container .Toastify__toast--warning {
  @include toast-type(dark-yellow, light-yellow);
}

.Toastify__toast-container .Toastify__toast--error {
  @include toast-type(dark-red, light-red);
}

.toast-list {
  max-height: 500px;
  overflow-y: auto;
  line-height: 18px;
  padding: 0 14px;
}

// Override mobile styles from toastify
@media only screen and (max-width: var.$breakpoint-sm-max) {
  .Toastify__toast-container {
    top: 20px;
    transform: translateX(-50%);
    left: 50%;
  }
}