.toast { // Prevents from shrinking in IE11, when in a flex container // See https://github.com/twbs/bootstrap/issues/28341 flex-basis: $toast-max-width; max-width: $toast-max-width; @include font-size($toast-font-size); color: $toast-color; background-color: $toast-background-color; background-clip: padding-box; border: $toast-border-width solid $toast-border-color; box-shadow: $toast-box-shadow; opacity: 0; @include border-radius($toast-border-radius); &: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; @include border-top-radius(subtract($toast-border-radius, $toast-border-width)); } .toast-body { padding: $toast-padding-x; // apply to both vertical and horizontal }