// 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;
    background-image: none !important;
  }

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

  .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 %x-flex-center,
            .btn-group,
            %position-absolute,
            %ml-auto;
    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 {
    @extend %bg-success;
  }
  &-error {
    @extend %bg-danger;
  }
  &-loading,
  &-info {
    @extend %bg-info;
  }
  &-warning {
    @extend %bg-warning;
  }
}