// 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 * 5;
  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);
    }
  }
}