// 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;
  margin-left: $x-toast-spacing;
  .toast {
    transform-origin: bottom right;
  }
}


// Component
.toast-container {
  @extend .position-fixed;
  z-index: $zindex-popover;

  .toast {
    @extend .p-3,
            .mt-3,
            .border,
            .position-relative,
            .overflow-hidden,
            .w-100,
            .d-flex;
    @include box-shadow($x-toast-box-shadow);
    @include border-radius(map_get($spacers, 2));
    @include size(25rem, auto);
    max-width: 30rem !important;
  }

  .toast-title {
    @extend .flex-auto,
            .mb-0;
    text-transform: uppercase;
    font-weight: 700;
  }

  .x-toast-message-container {
    @extend .d-flex,
            .overflow-hidden,
            .w-100;
  }

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

  .toast-message {
    @extend %font-size-sm,
            .align-self-center,
            .pr-5,
            .overflow-hidden,
            .text-white;
    text-overflow: ellipsis;
    max-width: 24.750rem;
    max-height: calc(1.313rem * 6);
  }

  .x-toast-btn-group {
    @extend .btn-group,
            .position-absolute,
            .ml-auto;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0.5rem;
    right: 0.5rem;
  }

  .x-toast-btn-close {
    @extend .text-white;
  }

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

}

// Styles
.toast {
  &.success,
  &-success {
    @extend .bg-success;
  }
  &.error,
  &-error {
    @extend .bg-danger;
  }
  &.loading,
  &.info,
  &-loading,
  &-info {
    @extend .bg-info;
  }
  &.warning,
  &-warning {
    @extend .bg-warning;
  }
}