/* Base pop-up banner */
.cpr-notice {
  position: fixed;
  top: 2rem;
  left: 50%;
  transform: translateX(-50%) translateY(-20px);
  width: calc(100% - 2rem);
  max-width: 360px;

  display: flex;
  flex-direction: row;
  padding: 0.8rem 1rem;
  border-radius: 8px;

  font-size: var(--wp--preset--font-size--small);
  font-weight: 600;
  line-height: 1.5;

  background-color: white;
  border: 1px, solid, var(--wp--preset--color--separator);
  box-shadow: var(--wp--preset--shadow--natural);

  opacity: 0;
  z-index: 9999;

  animation: cprNoticeFadeIn 0.4s ease-out forwards;
}

/* Success + error variants */
.cpr-notice--success {
  color: #2f662f;
}

.cpr-notice--error {
  color: #7a1f1f;
}

.cpr-notice p {
  margin: 0;
}

/* Animation */
@keyframes cprNoticeFadeIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Base icon sizing */
.cpr-icon {
  width: 32px;
  height: 32px;
}

.cpr-notice__icon {
  margin-right: 0.75rem;
  flex-shrink: 0;
}

.cpr-icon--error .cpr-icon__triangle {
  fill: #ffd400;
  stroke: #000;
  stroke-width: 2;
}

.cpr-icon--error .cpr-icon__bar,
.cpr-icon--error .cpr-icon__dot {
  fill: #000;
}

/* Success circle */
.cpr-success__circle {
  fill: #2ecc71; /* green background */
  stroke: #000000; /* black outline */
  stroke-width: 2;
}

/* Tick mark */
.cpr-success__tick {
  fill: none;
  stroke: #ffffff; /* white tick */
  stroke-width: 6;
  stroke-linecap: round;
  stroke-linejoin: round;
}