$toast-background-color: $dark-popover-background;
$toast-button-text-color: rgba(255, 255, 255, 0.6);
$alert-bar-border-color: rgba(0, 0, 0, 0.1);
$alert-bar-button-text-color: rgba(255, 255, 255, 0.9);

.alert {
  border-radius: 0;
  border: none;
  padding: .65rem 1rem;
  font-size: 0.9375rem;

  &.multiline {
    padding: 1.65rem 2.8rem;
  }

  .separator:before {
    @extend .mx-2;
    display: inline-block;
    content: '|';
  }

  p { margin-bottom: 0; }

  .ico {
    font-size: 1.5em;
    opacity: 1;
    margin-top: -0.05em;
    margin-left: 0;
    display: inline-block;
    vertical-align: middle;
    margin-right: .875rem;
    line-height: 1rem;
  }

  strong {
    display: inline-block;

    span {
      margin-right: .875rem;
    }
  }

  button {
    background: transparent;
    border: none;
  }
}

// Page-level alerts
section.content, section.content > content > inline-alert {
  > .alert {
    margin: -2.875rem -3rem 1.5rem;
    padding: 0.75rem 1rem 0.75rem 4rem;
  }

  .card + .alert, .card + inline-alert > .alert {
    margin-top: 0;
  }
}

.alert.animated {
  z-index: 20000;
  animation-duration: 0.5s;
  background: $toast-background-color;
  border: none;
  border-radius: 0;
  border-top: solid 0.45rem $brand-info;
  padding: 1rem 1rem 1rem 1.5rem;
  width: 22rem;
  box-shadow: 0 0.5rem 1rem 0 $shadow-darker;
  max-width: 90%;

  span[data-growl="title"] {
    color: $white;
    text-transform: uppercase;
    display: block;
    margin-bottom: 0.5rem;
    font-weight: normal;
    letter-spacing: 0.0625em;
  }

  p {
    color: $gray-150;
    line-height: 1.25em;
    font-size: 0.9375em;
  }

  button {
    color: $toast-button-text-color;
  }

  strong {
    @include brand-font-h2();
    font-size: 1rem;
    display: block;
    color: $white;
    padding-bottom: 0.5rem;
  }
}

.alert-info.animated {
  border-top-color: $blue-700;
}

.alert-warning.animated {
  border-top-color: $brand-warning;
}

.alert-danger.animated {
  border-top-color: $brand-danger;
}

.alert-success.animated {
  border-top-color: $brand-success;
}

// ----- inline alert states
.alert-info {
  background: $brand-info;
  color: $blue-800;

  .primary-alert-action {
    background-color: $blue-800;
    color: $white;
  }

  .secondary-alert-action { color: $blue-800; }

  .alert-link {
    color: $blue-800;
  }

  .separator { color: $blue-500; }
}

.alert-danger {
  background: $brand-danger;
  color: $white;

  .primary-alert-action {
    background-color: $red-800;
    color: $white;
  }

  .secondary-alert-action { color: $white; }

  .alert-link {
    color: $white;
  }
}

.alert-warning {
  background: $yellow-200;
  color: $yellow-800;

  .primary-alert-action {
    background-color: $yellow-800;
    color: $white;
  }

  .secondary-alert-action { color: $yellow-800; }

  .alert-link {
    color: $yellow-800;
  }
}

.alert-success {
  background: $green-200;
  color: $green-700;

  .primary-alert-action {
    background-color: $green-700;
    color: $white;
  }

  .secondary-alert-action { color: $green-700; }

  .alert-link {
    color: $white;
  }
}

.alert.alert-default {
  background-color: $gray-100;
  color: $gray-700;
  margin: auto;

  a {
    color: $gray-700;
  }
}

// --- inline alert responsive

.inline-alert {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: space-between;

  @include media-min("sm") {
    flex-flow: row nowrap;
  }

  .inline-alert-content {
    flex-grow: 2;
    display: flex;
    flex-flow: column nowrap;

    @include media-min("sm") {
      flex-flow: row wrap;
    }

  }

  .inline-alert-message {
    margin: 1rem 0;

    @include media-min("sm") {
      margin: 0;
    }

  }

  .alert-actions {
    text-align: right;
    margin-right: 2rem;

    .btn {
      width: 100%;

      @include media-min("sm") {
        width: auto;
      }
    }
  }
}

.alert-bar {
  z-index: 19999;
  display: block;
  min-height: 3rem;
  border-radius: 0;
  margin: -3rem 0 0;
  position: relative;
  border-bottom: solid 0.0625rem $alert-bar-border-color;
  transition: margin 0.5s ease;
  padding: 0.75rem 0.8125rem .25rem;

  &:after {
    content: "";
    display: table;
    clear: both;
  }

  &.bg-warning {
    background-color: $yellow-200 !important;

    .message {
      color: $yellow-800;
    }

    button {
      background-color: $yellow-800;
      color: $white;
    }
  }

  &.bg-danger {
    background-color: $red-700 !important;

    button {
      background-color: $red-800;
      color: $white;
    }
  }

  &.bg-info {
    background-color: $blue-200 !important;

    .message {
      color: $blue-700;
    }

    button {
      background-color: $blue-700;
      color: $white;
    }
  }
}

.alert-bar strong {
  @include brand-font-h3();
  color: $white;

  i {
    margin-right: 0.375rem;
    margin-left: 0.375rem;
  }
}

.alert-bar .message {
  color: $white;
  float: right;
  font-size: 0.875em;
  margin-top: 0.125rem;
  margin-right: 0.5rem;
}

.alert-bar button {
  height: 2.25rem;
  margin: -0.4125rem 0.125rem 0;
  float: right;
  font-size: 0.875em;
  padding: 0.5rem 1rem;
  border: none;
  color: $alert-bar-button-text-color;

  &:hover {
    color: $white;
  }
}

.alert-bar-container {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
}


// Show toasts & alert bar on top of modal everything
[data-notify], .alert-bar-container {
  z-index: 9999999 !important;
}

// cards

.card-body .alert-flush {
  margin-left: -2rem;
  margin-right: -2rem;
  padding-left: 3rem;
  padding-right: 3rem;
}


// affix top

.alert.affix-top, section.content > .alert.affix-top {
  padding-left: 4.25rem;
  padding-right: 4.25rem;
  margin: -3rem -3rem 1.5rem;
}


//

.content > .alerts {
  margin-top: rem(-48);
}


// tables

.alert.table-full-span {
  margin-left: -2.5rem;
  margin-right: -2.5rem;
  padding-left: 2.5rem;
}


// Responsive
@include media-breakpoint-down(xs) {
  .alert {
    .inline-alert-content {
      margin-left: 0;
    }
  }
}

//And adjusted cog if it follows tabs
.tabs-menu {
  + .fab-cog {
    + .alerts {
      .alert-warning {
        padding: 1rem 1rem 1rem 4rem;
      }
    }
  }
}

// after carousel
.carousel {
  +.table-container {
    .alert {
      margin: -1.2rem -4rem 1.5rem;
    }
  }
}
