// !!!!!!!!!ATTENTION!!!!!!!!
// cannot extend bootstrap's .alert because the javascript functionality for close relies on being able to find that class on the dom.
// use .mmui-alert alongside .alert and .alert-type

.mmui-alert {
  min-height: 70px;
  height: fit-content;
  margin-top: 30px; // margin-bottom of navbar is 64px, need to scoot up into that space, leaving 32px.
  margin-bottom: 30px;
  width: 100%;
  padding: 0;
  padding-right: 40px;
  color: $mm-neutral-black;
  border: none;
  border-radius: 0;

  .row {
    height: 100%;
  }

  &.alert-success {
    // bootstrap defines the background-color to be theme-color-level(color, -10).
    // This is found in function.scss and they eventually do a mix(white, color, 8%*10)
    // which turns out to be what we want in the design - our colors mixed with 80% white
    background-color: $mm-sem-pos-20;
    .mmui-alert-icon {
      background-color: $mm-sem-pos-60;
    }
  }
  &.alert-info {
    background-color: $mm-seq-brand-blue-20;
    .mmui-alert-icon {
      background-color: $mm-seq-brand-blue-60;
    }
  }
  &.alert-warning {
    background-color: $mm-sem-caution-20;
    .mmui-alert-icon {
      background-color: $mm-sem-caution-60;
    }
  }
  &.alert-danger {
    background-color: $mm-sem-neg-20;
    .mmui-alert-icon {
      background-color: $mm-sem-neg-60;
    }
  }

  .mmui-alert-icon {
    text-align: center; //same as bootstrap's .text-center
    flex: 0 0 70px; //this sets flex-grow, which specifies the length of a flex item
    i {
      font-size: 38px;
      color: $mm-neutral-white;
      padding-top: 16px;
    }
  }

  .mmui-alert-message {
    margin-left: 15px;
    padding-top: 13px;
    padding-bottom: 13px;
    button {
      position: absolute; //.alert is position: relative, as defined by bootstrap.
      right: 13px;
      top: 13px;
    }

    i {
      font-size: 20px;
      color: $mm-neutral-black;
      filter: none;
      opacity: 1;
    }
  }
}