nukeop/nuclear

@import '../../../common.scss';

.toast {
  @include roundCorners;
  @include transition;
  @include shadow;
  position: relative;
  background: $background2;
  padding: 1em;
  animation: fade-in 0.5s normal forwards ease-in-out;
  user-select: none;
  -moz-user-select: none;
  cursor: pointer;
  box-sizing: content-box;

  height: 3em;
  width: 35em;
  margin-bottom: 1em;

  .toast_content {
    position: relative;
    display: flex;
    flex-flow: row;
    height: 100%;
    width: 100%;
  }

  .toast_icon {
    position: relative;
    display: flex;
    height: 100%;
    margin-right: 1em;
    flex: 0 0 auto;

    * {
      height: 100%;
      width: auto;
    }
  }

  .toast_text {
    position: relative;
    display: flex;
    flex-flow: column;
    flex: 1 1 auto;
    max-width: 100%;
  
    white-space: nowrap;
    overflow: hidden;
  }

  .title {
    overflow: hidden;
    text-overflow: ellipsis;
    color: $white;
    font-weight: bold;
  }

  .details {
    overflow: hidden;
    text-overflow: ellipsis;
    color: rgba($white, 0.7);
  }

  &.error {
    background: $red;
  }

  &.warning {
    background: darken($orange, 15%);
  }

  &.info {
    background: $blue;
  }

  &.success {
    background: darken($green, 25%);
  }
}