@import 'variables';
@import 'theme-colors';

// Toaster - Bootstrap
.bs-toast-wrapper {
  box-shadow: var(--default-box-shadow) !important;
  position: fixed !important;
  margin: $default-padding-margin !important;
  z-index: 1000 !important;

  &.toast-top-right {
    top: 70px;
    right: 0;
  }

  &.toast-bottom-right {
    bottom: 0;
    right: 0;
  }

  &.toast-top-left {
    top: 70px;
    left: 0
  }

  &.toast-bottom-left {
    left: 0;
    bottom: 0;
  }

  .toast {
    background-color: var(--default-card-bg) !important;
    border: none !important;

    .toast-header {
      background-color: var(--default-card-bg) !important;
      border-bottom-color: var(--default-border-color) !important;

      .close {
        padding: 0;
        margin: 0;
        color: var(--default-font-color);

        &:focus {
          outline: none;
        }

        svg {
          width: 24px;
          height: 24px;
          padding: 0.3125rem;

          &:hover {
            border-radius: 50%;
            background-color: var(--icon-hover-bg);
          }
        }
      }
    }
  }
}

// Toaster - Toastr JS
#toast-container {
  &.toast-top-full-width, &.toast-bottom-full-width {
    .toast {
      max-width: 100% !important;
    }
  }

  .toast {
    opacity: 0.9 !important;

    &.toast-info {
      background-color: $info-color;
    }

    &.toast-success {
      background-color: $success-color;
    }

    &.toast-warning {
      background-color: $warning-color;
    }

    &.toast-error {
      background-color: $danger-color;
    }
  }
}
