.flash-messages--fixed {
  display: flex;
  flex-direction: column-reverse;
  padding-bottom: 1em;
  position: fixed;
  top: 0; bottom: 0; left: 0;
  z-index: 99999;
}

.flash-message {
  cursor: pointer;
}

.alert {
  z-index: 99999;

  .container {
    position: relative;
  }

  // regular flash message full-width-container, displayed full width
  // almost on top of the page
  .full-width-container {
    margin: -1px -10px 10px;
    padding: 5px 10px 5px 35px;
  }

  &.active {
    .fixed-flash-inner {
      left: -30px;
      // @include moveInLeft(0.6s);
    }

    &.exiting {
      .fixed-flash-inner {
        left: -310px;
        // @include moveOutLeft(0.6s);
      }
    }
  }
}

.fixed-flash {
  z-index: 99999;

  .fixed-flash-inner {
    background: white;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.15);
    color: black;
    cursor: pointer;
    display: inline-block;
    left: -310px;
    margin-top: 15px;
    padding: 5px 20px 5px 50px;
    position: relative;
    transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);
    width: 310px;

    p {
      margin: 5px 0;
    }
  }
}

// ember-cli-flash package doesn't currently support custom classes.
// but they will in their 2.0.0 release. https://github.com/poteto/ember-cli-flash/issues/99
// Once they do so, the following classes can be renamed after BEM standards  (ex: .alert--state-danger)
.alert-success {
  .full-width-container {
    background: $blue;
    color: white;
  }

  .fixed-flash-inner {
    border-top: 5px solid $blue;
  }

  i {
    color: $blue;
  }
}

.alert-danger {
  .full-width-container {
    background: $red;
    color: white;
  }

  .fixed-flash-inner {
    border-top: 5px solid $red;
  }

  i {
    color: $red;
  }
}

.alert__close {
  color: white;
  left: -20px;
  padding: none;
  position: absolute;
  top: 0;
}
