@import "settings.global";

@mixin toasts {
  display: block;
  position: absolute;
  width: $toasts-width;
  max-height: 100%;
  overflow-y: auto;
  background-color: $toasts-background-color;
  z-index: $toasts-z-index;
}

@mixin toasts--topleft {
  top: 0;
  left: 0;
}

@mixin toasts--topright {
  top: 0;
  right: 0;
}

@mixin toasts--bottomleft {
  bottom: 0;
  left: 0;
}

@mixin toasts--bottomright {
  bottom: 0;
  right: 0;
}

@mixin toast--color($background-color: $toast-background-color, $color: $toast-color) {
  background-color: $background-color;
  color: $color;
}

@mixin toast {
  display: block;
  position: relative;
  padding: $toast-padding;
  margin: $toast-margin;
  @include toast--color;
  border-radius: $toast-border-radius;
  cursor: pointer;
}

@mixin toast--primary {
  @include toast--color($toast-primary-background-color, $toast-primary-color);
}

@mixin toast--secondary {
  @include toast--color($toast-secondary-background-color, $toast-secondary-color);
}

@mixin toast--success {
  @include toast--color($toast-success-background-color, $toast-success-color);
}

@mixin toast--error {
  @include toast--color($toast-error-background-color, $toast-error-color);
}