/* Chrome for the <message-bubble> component. Mirrors the .message rules in content.css,
   rewritten for the shadow root (:host instead of .message). */

:host {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  border-radius: var(--unit);
  padding: 0;
  font-size: 16px;
  text-align: left;
  overflow: hidden;
  background: white;
  margin-bottom: calc(var(--unit) * 3);
}

.icon {
  padding: 11px 13px;
  min-width: 30px;
  align-items: center;
  display: flex;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 30px 30px;
  width: 30px;
}

.content {
  /* inherited by slotted content, incl. bare text nodes that ::slotted() cannot match */
  font-weight: 500;
  padding: calc(var(--unit) * 2);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  flex-grow: 1;
  gap: var(--unit);
}

.content slot[name=button]::slotted(*) {
  font-weight: normal;
}

/* closing button, shown only when the bubble has a dismiss-key. Mirrors .close in dialog.css, at half size */
.dismiss {
  align-self: flex-start;
  margin: 8px;
  border: none;
  background: transparent;
  padding: 2px;
  border-radius: 3px;
  line-height: 0;
  cursor: pointer;
}

.dismiss:hover { background-color: var(--lightGrayHover); }

.dismiss img { height: 11px; width: 11px; }

.dismiss[hidden] { display: none; }

@container (width < 400px) {
  .icon, .content { padding: var(--unit); }
}

/* type colours */
:host([type=success]) { border: 1px solid var(--green); color: #1c8046ff; }
:host([type=success]) .icon { background-color: var(--green); background-image: url(https://www.umimeto.org/asset/global/img/icons-umime/icon-infobox-success-white.svg); }

:host([type=error]) { border: 1px solid var(--red); color: #992d22ff; }
:host([type=error]) .icon { background-color: var(--red); background-image: url(https://www.umimeto.org/asset/global/img/icons-umime/icon-infobox-error-white.svg); }

:host([type=warning]) { border: 1px solid var(--orange); color: #8c4c12; }
:host([type=warning]) .icon { background-color: var(--orange); background-image: url(https://www.umimeto.org/asset/global/img/icons-umime/icon-infobox-warning-white.svg); }

:host([type=info]) { border: 1px solid var(--blue); color: #1a4866; }
:host([type=info]) .icon { background-color: var(--blue); background-image: url(https://www.umimeto.org/asset/global/img/icons-umime/icon-infobox-info-white.svg); }