// Set default customise component variables here,
// Override it in theme variables files

$x-toast-spacing: map_get($spacers, 3) !default;
$x-toast-box-shadow: $modal-content-box-shadow-xs !default; // Same Box Shadow with Modal

// Position
.toast-top-left {
  top: $x-toast-spacing;
  left: $x-toast-spacing;
  .toast {
    transform-origin: top left;
  }
}

.toast-top-right {
  top: $x-toast-spacing;
  right: $x-toast-spacing;
  .toast {
    transform-origin: top right;
  }
}

.toast-bottom-left {
  bottom: $x-toast-spacing;
  left: $x-toast-spacing;
  .toast {
    transform-origin: bottom left;
  }
}

.toast-bottom-right {
  bottom: $x-toast-spacing;
  right: $x-toast-spacing;
  .toast {
    transform-origin: bottom right;
  }
}

.toast-container {
  @extend .position-fixed;
  z-index: 999999;

  .toast {
    @extend .p-3,
            .mt-3,
            .border,
            .bg-white,
            .border-light,
            .overflow-hidden,
            .position-relative;
    @include box-shadow($x-toast-box-shadow);
    @include border-radius(map_get($spacers, 2));
    @include size(25rem, auto);
  }

  .toast-title {
    @extend .mb-0,
            .flex-auto,
            .font-weight-bold,
            .text-uppercase,
            .text-truncate;
  }

  .x-toast-message-container {
    @extend .mt-3,
            .d-flex;
  }

  .x-toast-icon {
    @extend .mr-3;
  }

  .toast-message {
    @extend %font-size-sm,
            .align-self-center,
            .text-grey;
  }

  .toast-progress {
    @extend .position-absolute;
    left: 0;
    bottom: 0;
    height: 4px;
    opacity: 0.3;
  }

}

// Styles

.toast {
  &.success {
    .toast-title,
    .x-toast-icon {
      @extend .text-success;
    }
    .toast-progress {
      background-color: theme-color-level('success', -3);
    }
  }

  &.error {
    .toast-title,
    .x-toast-icon {
      @extend .text-danger;
    }
    .toast-progress {
      background-color: theme-color-level('danger', -3);
    }
  }

  &.loading,
  &.info {
    .toast-title,
    .x-toast-icon {
      @extend .text-primary;
    }
    .toast-progress {
      background-color: theme-color-level('primary', -3);
    }
  }

  &.warning {
    .toast-title,
    .x-toast-icon {
      @extend .text-warning;
    }
    .toast-progress {
      background-color: theme-color-level('warning', -3);
    }
  }
}