18F/calc

// Overrides and extensions of the U.S. Web Design System alerts

@import '../base/variables';
.usa-alert {
  margin: 1rem 0;
  border-radius: $border-radius;
  background-size: 2.4rem;
  background-position: 2rem 2.4rem;

  h3,
  h4 {
    font-weight: $font-weight-bold;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 1.8rem;
  }

  p {
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 1.8rem;
  }

  td, th {
    border-color: $color-gray-dark;

    &:last-child {
      border-right: none;
    }
  }

  thead th {
    color: $color-black;
  }

  tbody tr {
    &:nth-child(odd) {
      background-color: inherit;
    }
    &:hover > * {
      background: inherit !important;
    }
  }
}

.usa-alert-error,
.usa-alert-info,
.usa-alert-success,
.usa-alert-warning {
  &::before {
    border-radius: $border-radius 0 0 $border-radius;
  }
}

.usa-alert-error {
  &::before {
    background-color: $color-red-dark;
  }
}

.usa-alert-info {
  &::before {
    background-color: $color-blue-dark;
  }
}

alerts-widget:focus {
  outline: none;
}

.alert-submitted-price-lists {
  ul {
    list-style: none;
    margin-bottom: 0;

    > li {
      display: inline-block;
      white-space: nowrap;
      margin-right: 2rem;
    }
  }
}

// These classes are used in the Django admin. They're automatically created
// by Django, so styling them is more straightfoward than renaming them.
.messagelist li {
  padding-left: 7rem !important; // to create space for the icon
  @extend .usa-alert;
  @extend .usa-alert-info;
}

.messagelist li.success {
  @extend .usa-alert;
  @extend .usa-alert-success;
}

.errornote {
  @extend .usa-alert;
  @extend .usa-alert-error;
}