/* Site developed and built by sitethreesixty.com */
/* https://www.sitethreesixty.com */

/* ==========================================================================
   ALERT COMPONENT
   Alert and message styles.
   ========================================================================== */

.alert {
  padding: var(--space-4);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-4);
  font-size: var(--text-base);
}

/* --------------------------------------------------------------------------
   ALERT VARIANTS
   -------------------------------------------------------------------------- */

.alert--success {
  background-color: var(--color-success-light);
  color: var(--color-success-dark);
  border: 1px solid var(--color-success);
}

.alert--error {
  background-color: var(--color-error-light);
  color: var(--color-error-dark);
  border: 1px solid var(--color-error);
}

.alert--warning {
  background-color: var(--color-warning-light);
  color: var(--color-warning-dark);
  border: 1px solid var(--color-warning);
}

.alert--info {
  background-color: var(--color-info-light);
  color: var(--color-info-dark);
  border: 1px solid var(--color-info);
}

/* --------------------------------------------------------------------------
   ALERT ELEMENTS
   -------------------------------------------------------------------------- */

.alert__title {
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-1);
}

.alert__text {
  margin: 0;
}

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

/* --------------------------------------------------------------------------
   DISMISSIBLE ALERT
   -------------------------------------------------------------------------- */

.alert--dismissible {
  position: relative;
  padding-right: var(--space-10);
}

.alert__close {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  padding: var(--space-1);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0.7;
  transition: var(--transition-opacity);
}

.alert__close:hover {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   HIDDEN STATE
   -------------------------------------------------------------------------- */

.alert[hidden] {
  display: none;
}

/* Site developed and built by sitethreesixty.com */
/* https://www.sitethreesixty.com */