// Toast

.Toast {

display: flex;
margin: $spacer-2;
color: var(--color-toast-text);
background-color: var(--color-toast-bg);
border-radius: $border-radius;
box-shadow: inset 0 0 0 1px var(--color-toast-border), var(--color-toast-shadow);

@include breakpoint(sm) {
  width: max-content;
  max-width: 450px;
  margin: $spacer-3;
}

}

.Toast-icon {

display: flex;
align-items: center;
justify-content: center;
width: $spacer-3 * 3;
flex-shrink: 0;
color: var(--color-toast-icon); // stylelint-disable-line primer/colors
background-color: var(--color-toast-icon-bg);
border: $border-width $border-style var(--color-toast-icon-border);
border-right: 0;
border-top-left-radius: inherit;
border-bottom-left-radius: inherit;

}

.Toast-content {

padding: $spacer-3;

}

.Toast-dismissButton {

max-height: 54px; // keeps button aligned to the top
padding: $spacer-3;
color: inherit;
background-color: transparent;
border: 0;

&:focus,
&:hover {
  outline: none;
  opacity: 0.7;
}

&:active {
  opacity: 0.5;
}

}

// Modifier

.Toast–loading {

color: var(--color-toast-loading-text);
box-shadow: inset 0 0 0 1px var(--color-toast-loading-border), var(--color-toast-shadow);

.Toast-icon {
  color: var(--color-toast-loading-icon); // stylelint-disable-line primer/colors
  background-color: var(--color-toast-loading-icon-bg);
  border-color: var(--color-toast-loading-icon-border);
}

}

.Toast–error {

color: var(--color-toast-danger-text);
box-shadow: inset 0 0 0 1px var(--color-toast-danger-border), var(--color-toast-shadow);

.Toast-icon {
  color: var(--color-toast-danger-icon); // stylelint-disable-line primer/colors
  background-color: var(--color-toast-danger-icon-bg);
  border-color: var(--color-toast-danger-icon-border);
}

}

.Toast–warning {

color: var(--color-toast-warning-text);
box-shadow: inset 0 0 0 1px var(--color-toast-warning-border), var(--color-toast-shadow);

.Toast-icon {
  color: var(--color-toast-warning-icon); // stylelint-disable-line primer/colors
  background-color: var(--color-toast-warning-icon-bg);
  border-color: var(--color-toast-warning-icon-border);
}

}

.Toast–success {

color: var(--color-toast-success-text);
box-shadow: inset 0 0 0 1px var(--color-toast-success-border), var(--color-toast-shadow);

.Toast-icon {
  color: var(--color-toast-success-icon); // stylelint-disable-line primer/colors
  background-color: var(--color-toast-success-icon-bg);
  border-color: var(--color-toast-success-icon-border);
}

}

// Animations

.Toast–animateIn {

animation: Toast--animateIn 0.18s cubic-bezier(0.22, 0.61, 0.36, 1) backwards;

}

@keyframes Toast–animateIn {

0% {
  opacity: 0;
  transform: translateY(100%);
}

}

.Toast–animateOut {

animation: Toast--animateOut 0.18s cubic-bezier(0.55, 0.06, 0.68, 0.19) forwards;

}

@keyframes Toast–animateOut {

100% {
  pointer-events: none;
  opacity: 0;
  transform: translateY(100%);
}

}

.Toast–spinner {

animation: Toast--spinner 1000ms linear infinite;

}

@keyframes Toast–spinner {

from { transform: rotate(0deg); }
to { transform: rotate(360deg); }

}