.Toast {
  background: var(--dialog-bg);
  border-radius: $card-corner;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12), 0 0 1px rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  gap: $unit-2x;
  padding: $unit-3x;

  &[data-state='open'] {
    animation: slideLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  &[data-state='closed'] {
    animation: fadeOut 300ms cubic-bezier(0.16, 1, 0.3, 1);
  }

  &[data-swipe='move'] {
    transform: translateX(var(--radix-toast-swipe-move-x));
  }

  &[data-swipe='cancel'] {
    transform: translateX(0);
    transition: transform 200ms ease-out;
  }

  &[data-swipe='end'] {
    animation: slideRight 100ms ease-out;
  }

  .Header {
    align-items: center;
    display: flex;
    justify-content: space-between;

    h3 {
      font-size: $font-regular;
      font-weight: $medium;
    }

    button {
      background: none;
      border: none;
      font-size: $font-regular;
      font-weight: $bold;

      &:hover {
        cursor: pointer;
      }
    }
  }

  p {
    line-height: 1.3;

    strong {
      font-weight: $bold;
    }
  }
}