notification.css

:host {
  --addons-notification-font-size: var(
    --readthedocs-notification-font-size,
    var(--readthedocs-font-size, 1rem)
  );
}

:host > div {
  margin: 1rem 0rem;
  padding-top: var(--addons-notification-font-size);
  padding-bottom: var(--addons-notification-font-size);
  overflow: auto;
  border-radius: 0.5rem;
  font-family: var(
    --readthedocs-notification-font-family,
    "Lato",
    "proxima-nova",
    "Helvetica Neue",
    "Arial",
    "sans-serif"
  );
  font-size: var(--addons-notification-font-size);
  color: var(--readthedocs-notification-color, rgb(64, 64, 64));
  background-color: var(
    --readthedocs-notification-background-color,
    rgb(234, 234, 234)
  );
}

:host(.floating) > div {
  position: fixed;
  top: 2rem;
  left: 20%; /* (100 - width) / 2 */
  width: 60%;
  z-index: 1750;
}

:host(.toast) > div {
  position: fixed;
  padding-top: calc(var(--addons-notification-font-size) * 0.75);
  padding-bottom: calc(var(--addons-notification-font-size) * 0.75);
  margin: 0.75rem 0rem;
  top: 2rem;
  right: 2rem;
  z-index: 1750;
  font-size: var(
    --readthedocs-notification-toast-font-size,
    calc(var(--addons-notification-font-size) * 0.85)
  );
  width: 35rem;
  max-width: calc(100vw - 4rem);
}

@media (max-width: 640px) {
  :host(.toast) > div {
    right: 0.5rem;
  }

  :host(.floating) > div {
    width: 95%;
    left: 2%;
  }
}

:host(.raised) > div {
  box-shadow:
    0 2px 4px 0 rgba(34, 36, 38, 0.12),
    0 2px 10px 0 rgba(34, 36, 38, 0.15);
}

:host(.titled) > div {
  padding: 0rem;
  text-align: center;
}

:host > div > svg.header.icon {
  height: calc(var(--addons-notification-font-size) * 2);
  padding: 0.5rem 1.5rem;
  float: left;
}

:host(.toast) > div > svg.header.icon {
  height: calc(var(--addons-notification-font-size) * 1.5);
}

:host(.titled) > div > svg.header.icon {
  display: none;
}

:host(.inverted) > div {
  color: var(--readthedocs-notification-color, rgb(234, 234, 234));
  background-color: var(
    --readthedocs-notification-background-color,
    rgb(64, 64, 64)
  );
}

:host > div a {
  color: var(--readthedocs-notification-link-color, rgb(8, 140, 219));
  text-decoration: none;
}

:host(.inverted) > div a {
  color: var(--readthedocs-notification-link-color, rgb(134, 203, 243));
}

:host > div > .title {
  padding: 0.25rem var(--addons-notification-font-size);
  margin-bottom: 0.25rem;
  line-height: var(--addons-notification-font-size);
  font-weight: bold;
}
:host > div > div.content {
  line-height: var(--addons-notification-font-size);
  font-size: calc(var(--addons-notification-font-size) * 0.85);
  padding: 0 calc(var(--addons-notification-font-size) * 1.5);
}

:host(.toast) > div > .title {
  padding: 0rem var(--addons-notification-font-size);
}

:host(.titled) > div > .title {
  display: block;
  margin: 0rem;
  padding: 0.1rem var(--addons-notification-font-size);
  line-height: calc(var(--addons-notification-font-size) * 2);
  border-radius: 0.5rem 0.5rem 0 0;
  color: var(--readthedocs-notification-title-color, rgb(96, 96, 96));
  background-color: var(
    --readthedocs-notification-title-background-color,
    rgb(224, 224, 224)
  );
  vertical-align: middle;
  font-weight: bold;
}
:host(.titled) > div > div.content {
  margin-top: 1rem;
  margin-bottom: 1rem;
  padding: 0rem 0.65rem 0rem 0.65rem;
}

:host(.inverted) > div > .title {
  color: var(--readthedocs-notification-title-color, rgba(255, 255, 255, 0.9));
}

:host(.inverted.titled) > div > .title {
  background-color: var(
    --readthedocs-notification-title-background-color,
    rgb(48, 48, 48)
  );
}

:host > div > .title > .right {
  float: right;
}

:host > div > .title > .right > svg {
  display: inline-block;
  height: var(--addons-notification-font-size);
  vertical-align: middle;
  cursor: pointer;
  color: var(--readthedocs-notification-title-color, rgba(96, 96, 96));
  font-weight: normal;
}

:host(.inverted) > div > .title > .right > svg {
  color: var(--readthedocs-notification-title-color, rgba(255, 255, 255, 0.9));
}
:host(.titled) > div > .title > .right > svg {
  margin: 0.5rem 0rem;
}