/**
 * Status messages
 */

@media screen {

  .status-message {
    margin: 1rem 0;
    padding: 1rem 1rem 1rem 2.5rem;
    border-radius: 3px;
    position: relative;
    box-shadow: var(--status-message-shadow);
  }

  .status-message a {
    color: currentColor;
  }

  .status-message-title {
    margin: 0 0 1em;
    font-size: 1em;
    font-weight: 600;
    display: flex;
    align-items: center;
  }

  .status-message .icon.info-icon {
    position: absolute;
    top: 0.8rem;
    left: 0.7rem;
    height: 1.6em;
    width: 1.6em;
  }

  .status-message button.close-button {
    margin: 0;
    padding: 0;
    position: absolute;
    top: 0.25rem;
    right: 0.25rem;
    border: 0;
    background-color: transparent;
    color: currentColor;
    box-shadow: none;
  }

  .status-message .close-button .icon {
    fill: currentColor;
  }

  /* Info */
  .status-info {
    color: var(--status-info);
    background-color: var(--status-info-bg);
  }

  /* Error */
  .status-error {
    color: var(--status-error);
    background-color: var(--status-error-bg);
  }

  /* Warning */
  .status-warning {
    color: var(--status-warning);
    background-color: var(--status-warning-bg);
  }

  /* Success */
  .status-success {
    color: var(--status-success);
    background-color: var(--status-success-bg);
  }
}