// @import "../bootstrap-core/toasts";
.toast {
  @include border-radius($toast-border-radius);
  @include transition($toast-transition);
  @include font-size($toast-font-size);
  position: relative;
  overflow: hidden;
  margin-bottom: $toast-margin-bottom;
  padding: $toast-padding;
  padding-left: 3rem;
  width: $toast-width;
  @include box-shadow($toast-box-shadow);
  pointer-events: auto;
  opacity: 0;
  @include border-radius($toast-border-radius);

  &:last-child {
    margin-bottom: 0;
  }

  &.showing {
    opacity: 1;
  }

  &.show {
    display: block;
    opacity: 1;
  }

  &.hide {
    display: none;
  }
}

.toast-close-button {
  opacity: 1;
  right: 0;
  top: 0;
  position: absolute;
  z-index: 1;
  &::before {
    content: '';
    background-repeat: no-repeat;
    width: 1rem;
    height: 1.125rem;
    display: block;
    background-size: .75rem;
    background-position: 50%;
    padding: 1.375rem;
    z-index: 1;
  }
  &:hover {
    opacity: 0.75;
  }
}

@each $color, $value in $theme-colors {

  // override the style of primary and info toast to match alerts
  @if ($color == 'primary') {
    $value: map-get($theme-colors, 'secondary');
  }

  .toast.toast-#{$color} {
    @include alert-variant($value, $value, theme-color-level($color, $alert-color-level));
    @if index("danger" "warning" "success" "info", $color) {
      @include alert-icon($value, $value, theme-color-level($color, $alert-color-level), $color);
    }
    &:hover {
      @include gradient-bg(lighten($value, 7.5%));
    }
    .toast-close-button {
      @include close($value, false);
    }
  }
}

.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;
}

.toast-body {
  padding: $toast-padding-x; // apply to both vertical and horizontal
}