/* We don't use 2xl, 3xl, 4xl map keys because in some Intellij configurations, these keys are reformatted */
:host {
  --snackbar-bottom-space: var(--joy-core-spacing-8);
  --snackbar-color-links: var(--joy-color-secondary-50);
  --snackbar-content-color: default;
  --snackbar-width: 350px;
  --snackbar-transition-timing: var(--joy-transition-duration-long);
  display: block;
  position: fixed;
  bottom: var(--snackbar-bottom-space);
  right: var(--snackbar-bottom-space);
  z-index: var(--joy-core-z-index-snackbar);
  width: auto;
  font-weight: var(--joy-font-weight-normal);
  font-size: var(--joy-font-size-primary-300);
  line-height: var(--joy-line-height-large);
  font-family: var(--joy-font-family-base);
  width: var(--snackbar-width);
  max-width: calc(100% - var(--joy-core-spacing-6) * 2);
}

:host(.joy-snackbar__position___relative) {
  --snackbar-transition-timing: 0.01ms !important;
  position: relative;
  bottom: 0;
  z-index: 1;
  left: 0;
  transform: none;
}

@keyframes showAnimation {
  0% {
    transform: translateX(120%);
  }
  100% {
    transform: translateX(0);
  }
}
:host(.joy-snackbar--hiding) {
  animation: showAnimation var(--snackbar-transition-timing) forwards;
  animation-direction: reverse;
}

.joy-snackbar {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: var(--joy-core-spacing-4);
  overflow: hidden;
  border-radius: var(--joy-core-radius-3);
  text-align: left;
  background-color: white;
  color: inherit;
  animation: showAnimation var(--snackbar-transition-timing);
  max-width: calc(100% - var(--joy-core-spacing-4) * 2);
  width: calc(100% - var(--joy-core-spacing-4) * 2);
  margin: auto;
  box-shadow: var(--joy-core-elevation-3);
}
.joy-snackbar:before {
  position: absolute;
  display: block;
  content: "";
  bottom: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background-color: var(--snackbar-content-color);
}
.joy-snackbar__heading {
  font-weight: var(--joy-font-weight-bold);
  font-size: var(--joy-font-size-primary-600);
  line-height: var(--joy-line-height-large);
  font-family: var(--joy-font-family-base);
}
.joy-snackbar__heading + * {
  margin-bottom: var(--joy-core-spacing-4);
}
.joy-snackbar__actions,
.joy-snackbar > button {
  align-self: center;
}
.joy-snackbar__img {
  display: inline-flex;
  margin-right: var(--joy-core-spacing-4);
}
.joy-snackbar__img joy-icon {
  color: var(--snackbar-content-color);
}
.joy-snackbar__content {
  flex-grow: 1;
  padding-right: var(--joy-core-spacing-5);
  color: var(--joy-color-neutral-50);
  overflow-wrap: break-word;
  max-width: 100%;
}
.joy-snackbar__content strong {
  display: block;
  width: 100%;
  font-weight: var(--joy-font-weight-bold);
}
.joy-snackbar__content a {
  color: var(--snackbar-color-links);
}
.joy-snackbar__close-icon {
  --icon-size: var(--joy-core-spacing-4);
  cursor: pointer;
}
.joy-snackbar__trigger___action {
  display: block;
  width: 100%;
  margin: var(--joy-core-spacing-4) 0 0 0;
  color: var(--joy-color-secondary-30);
  cursor: pointer;
}
.joy-snackbar__trigger___action:hover {
  text-decoration: underline;
}
.joy-snackbar_info {
  --snackbar-content-color: var(--joy-color-information-50);
}
.joy-snackbar_warning {
  --snackbar-content-color: var(--joy-color-warning-50);
}
.joy-snackbar_error {
  --snackbar-content-color: var(--joy-color-error-50);
}
.joy-snackbar_success {
  --snackbar-content-color: var(--joy-color-success-50);
}