[feature] toast-header .close

Created by: zjbarg

Modal has padding and margin for the close button (.close)

.modal-header {
  display: flex;
  align-items: flex-start; // so the close btn always stays on the upper right corner
  justify-content: space-between; // Put modal header elements (title and dismiss) on opposite ends
  padding: $modal-header-padding;
  border-bottom: $modal-header-border-width solid $modal-header-border-color;
  @include border-top-radius($modal-content-border-radius);

  .close {
    padding: $modal-header-padding;
    // auto on the left force icon to the right even when there is no .modal-title
    margin: (-$modal-header-padding-y) (-$modal-header-padding-x) (-$modal-header-padding-y) auto;
  }
}

I suggest we add the same thing to toasts

.toast-header {
  display: flex;
  align-items: center;
  padding: $toast-padding-y $toast-padding-x;
  color: $toast-header-color;
  background-color: $toast-header-background-color;
  background-clip: padding-box;
  border-bottom: $toast-border-width solid $toast-header-border-color;

// add this ----->
  .close {
    padding: $toast-padding-y $toast-padding-x;
    margin-right: auto;
  }
}

Maybe add a $toast-header-padding, $toast-header-padding-x, $toast-header-padding-y variables and margin?

The main thing is the margin-right or something that does its job.