.toast {
    background-color: #{$bg-hover};
    overflow: hidden;
    border: 1px solid #{$border};
    box-shadow: 0 0.5rem 1rem #{$shadow-color} !important;
    backdrop-filter: blur(10px);
    opacity: 0;

  &:not(:last-child) {
    margin-block-end: 0.75rem;
  }

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

  .toast-header {
    color: #{$color};
    border-block-end: 1px solid #{$border};
    background-color: #{$bg-hover};

    .close {
      font-weight: 300;
    }
  }
  
  .toast-body {
    padding: 0.75rem;
    color: #{$default-color};
  }
}