.toast {

max-width: $toast-max-width;
overflow: hidden; // cheap rounded corners on nested items
font-size: $toast-font-size; // knock it down to 14px
background-color: $toast-background-color;
background-clip: padding-box;
border: $toast-border-width solid $toast-border-color;
border-radius: $toast-border-radius;
box-shadow: $toast-box-shadow;
backdrop-filter: blur(10px);
opacity: 0;

&:not(:last-child) {
  margin-bottom: $toast-padding-x;
}

&.showing {
  opacity: 1;
}

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

&.hide {
  display: none;
}

}

.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

}