@import '../../scss/variables.scss';

// #variables
$s-toast-font-size: $s-font-size !default;
$s-toast-width: $s-toast-font-size * 9 !default;
$s-toast-not-text-min-height: $s-toast-font-size * 9 !default;
$s-toast-padding-x: $s-toast-font-size !default;
$s-toast-padding-y: $s-toast-font-size !default;
$s-toast-border-radius: $s-border-radius-lg !default;
$s-toast-color: $s-white !default;
$s-toast-bg: $s-mask-dark !default;

$s-toast-text-max-width: 80vw !default;
$s-toast-text-padding-y: 10px !default;

$s-toast-icon-margin-bottom: 8px !default;
$s-toast-icon-font-size: 36px !default;

$s-toast-title-font-size: $s-toast-font-size !default;
$s-toast-title-line-height: $s-line-height !default;

// #endvariables

.s-toast {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  width: $s-toast-width;
  padding: $s-toast-padding-y $s-toast-padding-x;
  border-radius: $s-toast-border-radius;
  color: $s-toast-color;
  background-color: $s-toast-bg;

  &:not(.s-toast-text) {
    min-height: $s-toast-not-text-min-height;
  }
  &.s-toast-text {
    width: auto;
    max-width: $s-toast-text-max-width;
    padding-top: $s-toast-text-padding-y;
    padding-bottom: $s-toast-text-padding-y;
    white-space: normal;
    word-break: break-all;
  }
}
.s-toast-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1em;
  height: 1em;
  margin-bottom: $s-toast-icon-margin-bottom;
  font-size: $s-toast-icon-font-size;
  text-align: center;
}
.s-toast-title {
  font-size: $s-toast-title-font-size;
  line-height: $s-toast-title-line-height;
  text-align: center;
}