/*
  Font family is Nunito Sans. Its fallback is Helvetica
*/
/*
  Font sizes have been converted to rem considering a base size of 16px.
*/
/*
*  Z-Index
*  
*  The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. 
*  Overlapping elements with a larger z-index cover those with a smaller one.
*  
*  REF: https://developer.mozilla.org/en-US/docs/Web/CSS/z-index
*  REF: https://www.smashingmagazine.com/2019/04/z-index-component-based-web-application/  
*/
/**
 * Define media query values
 */
:host .show,
:host .hide {
  display: flex;
}
:host .show {
  opacity: 1;
}
:host .show--top-right, :host .show--bottom-right {
  animation: toastAnimationFadeInFromRight 1s;
}
:host .show--top-left, :host .show--bottom-left {
  animation: toastAnimationFadeInFromLeft 1s;
}
:host .hide {
  transition: all 1s;
  animation: toastAnimationFadeOut 0.5s;
}

.toast {
  display: none;
  position: relative;
  box-sizing: border-box;
  border-radius: 8px;
  box-shadow: 0px 8px 12px var(--color-shadow-1, rgba(0, 0, 0, 0.16)), 0px 0px 4px var(--color-shadow-1, rgba(0, 0, 0, 0.16));
  color: var(--color-content-default, #454545);
  opacity: 0;
  margin-top: 16px;
  overflow: hidden;
  gap: 16px;
}
.toast--action--icon {
  min-width: 440px;
  max-width: 440px;
  padding: 8px 16px;
}
.toast--action--icon bds-icon-button {
  height: 32px;
}
@media (max-width: 780px) {
  .toast--action--icon {
    min-width: 220px;
    width: 95%;
    margin: 16px auto 0px auto;
  }
}
.toast--action--button {
  min-width: 440px;
  max-width: 456px;
  padding: 8px 16px;
}
@media (max-width: 780px) {
  .toast--action--button {
    min-width: 220px;
    width: 95%;
    margin: 16px auto 0px auto;
  }
}
.toast--system {
  background: var(--color-system, #B2DFFD);
}
.toast--error {
  background: var(--color-error, #f99f9f);
}
.toast--success {
  background: var(--color-success, #84ebbc);
}
.toast--warning {
  background: var(--color-warning, #fde99b);
}
.toast--undo {
  background-color: var(--color-system, #B2DFFD);
}
.toast--redo {
  background-color: var(--color-system, #B2DFFD);
}
.toast--notification {
  background-color: var(--color-surface-1, #F6F6F6);
}
.toast bds-icon {
  display: flex;
  align-items: center;
  padding: 8px 0;
}
.toast__ballon {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
}
.toast__content {
  height: 100%;
  width: 100%;
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 8px 0;
}
.toast__action {
  display: flex;
  align-items: flex-start;
}
.toast__action bds-button-icon, .toast__action bds-button {
  position: relative;
}
.toast__action bds-button-icon::before, .toast__action bds-button::before {
  content: "";
  position: absolute;
  inset: -4px;
  border: 2px solid transparent;
  border-radius: 4px;
}
.toast__action bds-button-icon:focus-visible, .toast__action bds-button:focus-visible {
  outline: none;
}
.toast__action bds-button-icon:focus-visible::before, .toast__action bds-button:focus-visible::before {
  border-color: var(--color-focus, #c226fb);
}
.toast__action__button {
  white-space: nowrap;
}

@keyframes toastAnimationFadeInFromRight {
  0% {
    opacity: 0;
    right: -200px;
  }
  50% {
    opacity: 0.9;
    right: 1px;
  }
  100% {
    opacity: 1;
  }
}
@keyframes toastAnimationFadeInFromLeft {
  0% {
    opacity: 0;
    left: -200px;
  }
  50% {
    opacity: 0.9;
    left: 1px;
  }
  100% {
    opacity: 1;
  }
}
@keyframes toastAnimationFadeOut {
  0% {
    opacity: 1;
  }
  30% {
    max-height: 60px;
  }
  80% {
    opacity: 0;
    max-height: 30px;
  }
  100% {
    max-height: 0px;
  }
}