#toast-container {

  @media(max-width: 600px) {
    top: 0;
    left: 0;
    right: 0;
    padding: 8px;
  }

  > .toast {
    // background-position: 5px 7px;
    // background-size: 24px;
    background-image: none !important;
    border-radius: $border-radius-base;
    color: $text-color;
    opacity: 1;
    width: 435px;
    border-left: 3px solid transparent;
    padding: 8px 8px 8px 36px;
    box-shadow: none;

    &:hover {
      @include box-shadow($default-box-shadow);
    }

    @media(max-width: 600px) {
      width: 100%;
    }

    &.toast-success {
      background-color: $notification-success-background-color;
      border-left-color: $notification-success-border-color;

      .notification-icon svg {
        fill: $notification-success-border-color;
      }
    }

    &.toast-info {
      background-color: $notification-info-background-color;
      border-left-color: $notification-info-border-color;

      .notification-icon svg {
        fill: $notification-info-border-color;
      }
    }

    &.toast-error {
      background-color: $notification-error-background-color;
      border-left-color: $notification-error-border-color;

      .notification-icon svg {
        fill: $notification-error-border-color;
      }
    }

    &.toast-warning {
      background-color: $notification-warning-background-color;
      border-left-color: $notification-warning-border-color;

      .notification-icon svg {
        fill: $notification-warning-border-color;
      }
    }

    .toast-close-button {
      color: $notification-close-button-color;
      height: 20px;
      line-height: 20px;
      right: 0;
      text-shadow: none;
      top: 1px;
      width: 20px;
      font-weight: 400;
      opacity: 1;
    }

    .toast-message,
    .toast-title {
      margin-right: 24px;
    }

    .toast-title {
      // letter-spacing: 1px;
      // font-weight: 500;
    }

    .toast-actions {
      margin-top: 8px;
      width: 100%;
    }

    .notification-icon {
      position: absolute;
      top: 7px;
      left: 5px;
    }

    // &.notification-small {
    //   background-position-y: 8px;
    //   min-height: 40px;
    //   padding: 10px 10px 10px 50px;

    //   .toast-close-button {
    //     right: 0;
    //     top: 0;
    //   }

    //   .toast-message {
    //     margin-right: 20px;
    //     margin-top: 2px;
    //   }
    // }
  }
}
