deployer-toast-notification {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
  box-shadow: 0 0 #0000, 0 0 #0000, 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  padding: var(--deployer-toast-notification-padding);
  border-radius: var(--deployer-toast-notification-border-radius);
  gap: var(--deployer-toast-notification-padding);
  align-items: center;
  min-width: var(--deployer-toast-notification-min-width);
  width: max-content;
  max-width: calc(100% - 4rem);
  display: flex;
  justify-content: space-between;
  z-index: var(--deployer-toast-notification-z-index);
  left: 50%;
  top: 100%;
  transform: translateX(-50%) translateY(0%);
  position: fixed;

  &.active {
    transform: translateX(-50%) translateY(calc(-100% - 20px));
  }

  .icon-container {
    width: var(--deployer-toast-notification-icon-size);
    height: var(--deployer-toast-notification-icon-size);

    svg {
      width: 100%;
      height: 100%;
    }
  }

  .icon-success,
  .icon-error,
  .icon-warning,
  .icon-info {
    display: none;
  }

  &.success {
    background-color: var(--deployer-toast-notification-background-color--success);
    color: var(--deployer-toast-notification-color--success);

    .icon-success {
      display: block;
    }
  }

  &.error {
    background-color: var(--deployer-toast-notification-background-color--error);
    color: var(--deployer-toast-notification-color--error);

    .icon-error {
      display: block;
    }
  }

  &.warning {
    background-color: var(--deployer-toast-notification-background-color--warning);
    color: var(--deployer-toast-notification-color--warning);

    .icon-warning {
      display: block;
    }
  }

  &.info {
    background-color: var(--deployer-toast-notification-background-color--info);
    color: var(--deployer-toast-notification-color--info);

    .icon-info {
      display: block;
    }
  }
}