.status-messages {
  --current: var(--default);
  --default: #757575;
  --error: #ff1100;
  --status: #39d719;
  --warning: --#dcd618;
  padding: 2.5rem 0;

  .status-messages__list {
    background-color: #000;
    border-left: .375rem solid var(--current);
    color: #fff;
    display: flex;
    font-size: 1.125rem;
    gap: 1.25rem;
    padding: 1rem 1.25rem 0.25rem;

    a {
      color: #fff;
      text-decoration: underline;
  
      &:hover {
        color: var(--current);
      }
    }
  }

  .status-messages__list--error {
    --current: var(--error);
  }
  .status-messages__list--status {
    --current: var(--status);
  }
  .status-messages__list--warning {
    --current: var(--warning);
  }

  .status-messages__icon-container {
    align-content: center;
  }

  .status-messages__icon {
    color: var(--current);
    display: block;
    height: 1.5rem;
    width: 1.5rem;
  }

  .status-messages__heading {
    font-size: 1.25rem;
    font-weight: 425;
  }

  .status-messages__item {
    margin: 0 0 1rem;
  }
}

