/* Basic picocss alerts */

/* simple picocss alerts */
.alert {
  --font-size: 1.5rem;
  margin-bottom: var(--pico-spacing);
  padding: var(--pico-spacing) var(--pico-spacing);
  border-radius: var(--border-radius);
  color: var(--color);
  background-color: var(--background-color);
  border: 1px solid var(--background-color);

  /* icon */
  background-image: var(--icon);
  background-position: center left var(--pico-spacing);
  background-size: calc(var(--font-size) * 1.5) auto;
  padding-left: calc(
    var(--pico-spacing) * 2 +
    calc(var(--font-size) * 1.5)
  );
}

.alert-danger {
  --background-color: #ffebee;
  --icon: url('data:image/svg+xml,<%3Fxml version="1.0" %3F><svg fill="%23dd1c1c" viewBox="0 0 52 52" data-name="Layer 1" id="Layer_1" xmlns="http://www.w3.org/2000/svg"><path d="M26,0A26,26,0,1,0,52,26,26,26,0,0,0,26,0Zm0,48A22,22,0,1,1,48,26,22,22,0,0,1,26,48Z"/><path d="M28.83,26l8.58-8.59a2,2,0,0,0-2.82-2.82L26,23.17l-8.58-8.58a2,2,0,0,0-2.83,2.82L23.17,26l-8.58,8.58a2,2,0,1,0,2.82,2.83L26,28.83l8.59,8.58A2,2,0,0,0,36,38a2,2,0,0,0,1.42-.59,2,2,0,0,0,0-2.82Z"/></svg>');
  --color: #b71c1c;
}

.alert-warning {
  --background-color: #fff8e1;
  --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23cc5700' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  --color: #b34f00;
}

.alert-success {
  --background-color: #e8f5e9;
  --icon: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="utf-8"%3F><svg fill="%231b9020" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg"><title>checkmark1</title><path d="M21.82 13.030l-1.002-1.002c-0.185-0.185-0.484-0.185-0.668 0l-6.014 6.013-2.859-2.882c-0.186-0.185-0.484-0.185-0.67 0l-1.002 1.003c-0.185 0.185-0.185 0.484 0 0.668l4.193 4.223c0.185 0.184 0.484 0.184 0.668 0l7.354-7.354c0.186-0.185 0.186-0.484 0-0.669zM16 3c-7.18 0-13 5.82-13 13s5.82 13 13 13 13-5.82 13-13-5.82-13-13-13zM16 26c-5.522 0-10-4.478-10-10 0-5.523 4.478-10 10-10 5.523 0 10 4.477 10 10 0 5.522-4.477 10-10 10z"></path></svg>');
  --color: #1b5e20;
}