@use '../../variables' as *;

.notificationBox {
  --notification-background: var(--color-neutral-0);
  --notification-color: var(--color-accent-30);
  --notification-border: var(--color-surface-4);

  filter: var(--shadow-level-1);
  background: var(--notification-background);
  color: var(--color-neutral-100);
  border: 1px solid var(--notification-border);
  max-width: 1096px;

  &:not(.fluid) {
    width: 320px;
  }
  // Double class to override silke button
  .close.close.close {
    --silke-button-background: transparent;
    --silke-button-background-hover: transparent;
    --silke-button-background-pressed: transparent;

    --silke-button-color: var(--color-neutral-100);
    --silke-button-color-hover: var(--notification-color);
    --silke-button-color-pressed: var(--notification-color);

    --silke-button-border: none;
    --silke-button-border-hover: none;
    --silke-button-border-pressed: none;
    --silke-button-border-disabled: none;

    display: flex;
    justify-content: center;
  }

  .action.action.action {
    text-align: left;
    justify-content: start;
    align-items: flex-end;
    padding: 0;
    line-height: 18px;
    height: 18px;
    min-height: 18px;
    --silke-button-background: transparent;
    --silke-button-background-hover: transparent;
    --silke-button-background-pressed: transparent;

    --silke-button-color: var(--notification-color);
    --silke-button-color-hover: var(--notification-color);
    --silke-button-color-pressed: var(--notification-color);

    --silke-button-border: none;
    --silke-button-border-hover: none;
    --silke-button-border-pressed: none;
    --silke-button-border-disabled: none;
  }
}

.content {
  line-height: 18px;
  display: flex;
  justify-content: center;
}

.icon {
  color: var(--notification-color);
  font-size: 16px;
}

.warning {
  --notification-color: var(--color-warning-30);
}

.error {
  --notification-color: var(--color-error-30);
}

.success {
  --notification-color: var(--color-success-30);
}

.information {
  --notification-color: var(--color-support-secondary-40);
}

.confetti {
  --notification-color: var(--color-success-30);
}

.scale {
  opacity: 0;
  animation: scale 250ms 300ms cubic-bezier(0.45, 0.65, 0.62, 0.99) forwards;
  transform-origin: center center;
}

@keyframes scale {
  0% {
    opacity: 0;
    transform: scale(0);
  }
  70% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}