/* override to add noscript styles */

/* Make sure unregistered custom elements don't hide their contents */
:not(:defined) {
  opacity: 1 !important;
}

inline-notification {
  padding: 0.1rem 1.5rem;
  border-left-width: 0.5rem;
  border-left-style: solid;
  margin: 1rem 0;
  display: block;
  opacity: 1 !important;
}

inline-notification::before {
  content: attr(type);
  font-weight: 600;
  font-size: 1.17em;
  margin-top: 24px;
  margin-bottom: 7px;
  display: block;
  text-transform: uppercase;
}

inline-notification[type='tip'] {
  background-color: var(--inline-notification-tip-background-color, rgba(221, 221, 221, 0.3));
  border-color: var(--inline-notification-tip-border-color, #42b983);
}

inline-notification[type='warning'] {
  background-color:
    var(
      --inline-notification-warning-background-color,
      rgba(255, 229, 100, 0.2)
    );
  border-color: var(--inline-notification-warning-border-color, #e7c000);
}

inline-notification[type='danger'] {
  background-color: var(--inline-notification-danger-background-color, rgba(192, 0, 0, 0.1));
  border-color: var(--inline-notification-danger-border-color, #c00);
}

inline-notification[type='warning']::before {
  color: var(--inline-notification-warning-heading-color, #b29400);
}

inline-notification[type='danger']::before {
  color: var(--inline-notification-danger-heading-color, #900);
}

inline-notification > p {
  line-height: 1.7;
}