oceanprotocol/market

.alert {
  composes: box from '../Box.module.css';
  max-width: 40rem;
  margin: auto;
  border-width: 0;
  border-left-width: 0.5rem;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  padding-top: calc(var(--spacer) / 2);
  padding-bottom: calc(var(--spacer) / 2);
  position: relative;
}

.alert + .alert {
  margin-top: calc(var(--spacer) / 2);
}

.alert,
.title {
  color: var(--brand-white);
}

.title {
  font-size: var(--font-size-base);
  margin-bottom: calc(var(--spacer) / 8);
  color: inherit;
}

.badge {
  vertical-align: middle;
  margin-left: calc(var(--spacer) / 8);
  margin-top: -0.3rem;
}

.text {
  font-size: var(--font-size-small);
}

.text a {
  color: inherit;
  text-decoration: underline;
}

.text p:last-child {
  margin-bottom: 0;
}

.text code {
  font-size: 0.8rem;
  color: inherit;
  padding-left: 0;
  padding-right: 0;
}

.action,
button.action {
  margin-top: calc(var(--spacer) / 2);
}

.close {
  position: absolute;
  cursor: pointer;
  background: none;
  border: 0;
  box-shadow: none;
  outline: 0;
  top: 0;
  right: 0;
  font-size: var(--font-size-large);
  color: var(--brand-grey);
}

.close:hover,
.close:focus {
  opacity: 0.7;
}

/* States */
.error {
  border-color: var(--brand-alert-red);
  color: var(--brand-alert-red);
}

.success {
  border-color: var(--brand-alert-green);
  color: var(--brand-alert-green);
}

.info {
  border-color: var(--brand-alert-yellow);
  color: #9f7e19;
}

.warning {
  border-color: var(--brand-alert-orange);
  color: var(--brand-alert-orange);
}