@import '../settings/colors';
@import '../settings/core';
@import '../settings/fonts';
@import '../settings/alerts';

@import '../tools/mixins/spacing-responsive';
@import '../tools/mixins/vendor-prefixes';

@import 'node_modules/@collabui/icons/scss/mixins';


/**
* @name Notifications
* @description Notifications to show Success/Error Messages.
* @category communication
* @component notifications
*/


#toast-container {
  position: fixed;
  z-index: 999999;
  bottom: .5rem;
  right: 1rem;

  > {
    .toast {
      margin: 0 0 6px;
      padding: $alert__padding 0 $alert__padding $alert__padding-left;
      position: relative;
      width: $alert__width;
      right: 1rem;
      border-radius: $global-radius;
      @include box-shadow(0px 1px 2px 1px rgba($black, .25),
               inset 0 1px 0 0 rgba($gray-7, .18));
      border: 0;
      color: $alert__background-color;
      font-size: $alert__font-size;
      min-height: rem-calc(72);
      max-height: 19.25rem;
      display: flex;
      flex-direction: column;
    }

    .toast-error, .toast-success, .toast-warning {
      &:before {
        margin: 0;
        padding: 0;
        font-family: $icon-font-name;
        font-size: 1.5rem;
        line-height: 1.5rem;
        color: $white;
        text-align: center;
        position: absolute;
        top: 0;
        left: 0;
        width: 72px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .toast-title {
        font-size: 20px;
        line-height: 32px;
        @include vr-spacing(pr, 2.25);
      }

      .toast-message {
        margin: 0;
        padding: 0;
        padding-left: 64px;
        // width: 228px;
        font-family: $brand-font-light;
        font-size: 14px;
        color: $gray-2;
        word-wrap: break-word;
        @include vr-spacing(pr, 3);
        overflow: auto;

        > div {
          font-family: $brand-font-light;
          font-size: 14px;
          color: $gray-2;
          word-wrap: break-word;
        }
      }
    }

    .toast-success {
      &:before {
        @include icon-check_36;
        font-size: $alert__icon-font-size;
        background-color: $alert__font-color--success;
      }
      .toast-title {
        color: $alert__font-color--success;
      }
    }

    .toast-warning {
      &:before {
        @include icon-warning_72;
        font-size: $alert__icon-font-size;
        background-color: $alert__font-color--warning;
      }
      .toast-title {
        color: $alert__font-color--warning;
      }
    }

    .toast-error {
      &:before {
        @include icon-error_24;
        font-size: $alert__icon-font-size;
        background-color: $alert__font-color--error;
      }
      .toast-title {
        color: $alert__font-color--error;
      }
    }
  }

  button.close:before, .close:before {
    font-size: 16px;
  }

  button.close, .cui-close {
    color: $gray-5;
    position: absolute;
    top: 12px;
    right: 13px;
    border: none;
  }

  button.close:hover, .close:hover {
    color: $gray-2;
  };

}

.toast {
  background-color: $alert__background-color;
  border: 1px solid $gray-7;
}

/*Responsive Design*/
@media all and (max-width: 240px) {
  #toast-container {
    > div {
      padding: $alert__padding $alert__padding $alert__padding $alert__padding-left;
      width: $alert__width;
    }
  }
}

@media all and (min-width: 241px) and (max-width: 480px) {
  #toast-container {
    > div {
      padding: $alert__padding $alert__padding $alert__padding $alert__padding-left;
      width: $alert__width;
    }
  }
}

@media all and (min-width: 481px) and (max-width: 768px) {
  #toast-container > div {
    padding: $alert__padding $alert__padding $alert__padding $alert__padding-left;
    width: $alert__width;
  }
}

/*
 * Animations
*/

#toast-container {
  &:not(.no-enter) > div.ng-enter {
    right: -300px;
    transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
  }

  &:not(.no-enter) > div.ng-enter.ng-enter-active {
    right: 1rem;
  }

  &:not(.no-leave) > div.ng-leave.ng-leave-active {
    right: -300px;
  }

  &:not(.no-leave) > div.ng-leave {
    transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
  }
}

/**
* @name Success
*
* @category communication
* @component notifications
* @section success
*
* @state: .toast-success - makes the notification success green
*
* @html
* <div id="toast-container">
*   <div class="toast toast-success">
*     <button type="button" class="close toast-close-button"><span class="sr-only">Close</span></button>
*     <div class="toast-title">Success title goes here</div>
*     <div class="toast-message">Success text here. Lorem ipsum dolor sit amet, consectetur.</div>
*   </div>
* </div>
*/

/**
* @name Warning
*
* @category communication
* @component notifications
* @section warning
*
* @state: .toast-warning
*
* @html
* <div id="toast-container">
*   <div class="toast toast-warning">
*     <button type="button" class="close toast-close-button"><span class="sr-only">Close</span></button>
*     <div class="toast-title">Warning title goes here</div>
*     <div class="toast-message">Warning text here. Lorem ipsum dolor sit amet, consectetur.</div>
*   </div>
* </div>
*/

/**
* @name Error
*
* @category communication
* @component notifications
* @section error
*
* @state: .toast-error
*
* @html
* <div id="toast-container">
*   <div class="toast toast-error">
*     <button type="button" class="close toast-close-button"><span class="sr-only">Close</span></button>
*     <div class="toast-title">Error title goes here</div>
*     <div class="toast-message">Error text here. Lorem ipsum dolor sit amet, consectetur.</div>
*   </div>
* </div>
*/