.sb-toaster {
  width: 100%;
  max-width: ($base-block-space * 56);
  min-height: ($base-block-space * 10);
  padding: $base-block-space*3 $base-block-space*3 $base-block-space*3 $block-padding-xy;
  border-radius: $base-block-space;
  border: 1px solid $primary-300;
  border-left-width: $base-block-space;
  color: $gray;
  background: $white;
  margin-bottom:($base-block-space);

  .iziToast-close {
    opacity: 1;
    background: none;
  }

  &.sb-toast-sm-padding {
    padding: $base-block-space*2 $base-block-space*3;
    min-height: auto;
  }

  &.sb-toast-info,
  &.sb-toast-success,
  &.sb-toast-warning,
  &.sb-toast-danger {
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-top-width: 0px;
  }

  &.sb-toast-info {
    border-color: $primary-300;
    background: $primary-100;

    .iziToast-close:before,
    .iziToast-close:after,
    .sb-toast-close-icon:before,
    .sb-toast-close-icon:after {
      background: $primary-300;
    }

    .iziToast-icon,
    .sb-toast-icon {
      color: $primary-300;
    }

  }

  &.sb-toast-success {
    border-color: $secondary-100;
    background: $secondary-0;

    .iziToast-close:before,
    .iziToast-close:after,
    .sb-toast-close-icon:before,
    .sb-toast-close-icon:after {
      background: $secondary-100;
    }

    .iziToast-icon,
    .sb-toast-icon {
      display: none;
    }
  }

  &.sb-toast-warning {
    border-color: $tertiary-100;
    background: $tertiary-0;

    .iziToast-close:before,
    .iziToast-close:after,
    .sb-toast-close-icon:before,
    .sb-toast-close-icon:after {
      background: $tertiary-100;
    }

    .iziToast-icon,
    .sb-toast-icon {
      color: $tertiary-100;
    }
  }

  &.sb-toast-danger {
    border-color: $red-400;
    background: $red-0;

    .iziToast-close:before,
    .iziToast-close:after,
    .sb-toast-close-icon:before,
    .sb-toast-close-icon:after {
      background: $red-400;
    }

    .iziToast-icon,
    .sb-toast-icon {
      color: $red-400;
    }
  }

  .iziToast-body,
  .sb-toast-body {
    margin-right: $block-padding-xy;
    margin-left: 0px;
    padding-left: 0px !important;
    display: flex;
    position: relative;

    .iziToast-icon,
    .sb-toast-icon {
      position: inherit;
      left: inherit;
      right: inherit;
      top: inherit;
      margin: 0px;
      width: $base-block-space*3 !important;
      height: $base-block-space*3 !important;
      background-position: 0px 4px !important;
      margin-right: $base-block-space;
      font-size: $base-block-space*3;
      line-height: $base-block-space*3;
    }

    .iziToast-texts,
    .sb-toast-texts {
      margin: 0px;

      .iziToast-title{
        line-height: normal !important;
      } 

      .iziToast-title,
      .sb-toast-title {
        font-size: $base-block-space*2 !important;
        color: $gray;
        margin-bottom: $base-block-space;
        display: block;
        width: 100%;
        text-transform: capitalize;
        font-weight: $font-weight-bold;
        line-height: $base-block-space*2;
      }

      .iziToast-message,
      .sb-toast-message {
        color: $gray;
        font-size: $font-size-base !important;
        line-height: 22px;
        margin-bottom: 0px;
      }
    }

  }

  &.sb-toast-normal {
    background: $white;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 1px;

    .sb-toast-icon {
      display: none;
    }

    &.sb-toast-danger {

      .iziToast-body .iziToast-texts,
      .sb-toast-body .sb-toast-texts {

        .iziToast-title,
        .sb-toast-title {
          color: $red-400;
        }
      }
    }

    &.sb-toast-warning {

      .iziToast-body .iziToast-texts,
      .sb-toast-body .sb-toast-texts {

        .iziToast-title,
        .sb-toast-title {
          color: $tertiary-100;
        }
      }
    }

    &.sb-toast-success {

      .iziToast-body .iziToast-texts,
      .sb-toast-body .sb-toast-texts {

        .iziToast-title,
        .sb-toast-title {
          color: $secondary-100;
        }
      }
    }

    &.sb-toast-info {

      .iziToast-body .iziToast-texts,
      .sb-toast-body .sb-toast-texts {

        .iziToast-title,
        .sb-toast-title {
          color: $primary-300;
        }
      }
    }

    .iziToast-body,
    .sb-toast-body {

      .iziToast-message,
      .sb-toast-message {
        margin-left: 0px;
      }
    }
  }

  &.sb-toast-normal,
  &.sb-toast-success {

    .iziToast-icon {
      display: none;
    }
  }

  &.iziToast {
    &:after {
      box-shadow: none;
    }

    >.iziToast-progressbar {
      display: none;
    }
  }
}


.iziToast-close,
.sb-toast-close-icon {
  position: absolute;
  right: $base-block-space*4;
  top: $base-block-space*4;
  width: $base-block-space*4;
  height: $base-block-space*4;
  opacity: 1;
  cursor: pointer;

  &:hover {
    opacity: 1;
  }

  &:before,
  &:after {
    position: absolute;
    right: $base-block-space*3;
    content: ' ';
    height: $block-padding-xy;
    width: 2px;
    top: $block-padding-xy;
  }

  &:before {
    transform: rotate(45deg);
  }

  &:after {
    transform: rotate(-45deg);
  }
}

.sb-toast-close-icon {
  right: -($base-block-space*5);
  top: -($base-block-space*3);
  width: $base-block-space*4;
  height: $base-block-space*4;
  &:before {
    background: $primary-300;
  }
  &:after {
    background: $primary-300;
  }
}

//toaster html structure

.sb-toast {
  width: 100%;
  max-width: ($base-block-space * 56);
  min-height: ($base-block-space * 10);
  padding: $base-block-space*3 $base-block-space*3 $base-block-space*3 $block-padding-xy;
  border-radius: $base-block-space;
  border: 1px solid $primary-300;
  border-left-width: $base-block-space;
  color: $gray;
  background: $white;
  margin: $base-block-space*3 auto;

  &.sb-toast-info,
  &.sb-toast-success,
  &.sb-toast-warning,
  &.sb-toast-danger {
    border-right-width: 0px;
    border-bottom-width: 0px;
    border-top-width: 0px;
  }

  &.sb-toast-info {
    border-color: $primary-300;
    background: $primary-200;

    .sb-toast-close-icon:before,
    .sb-toast-close-icon:after {
      background: $primary-300;
    }
  }

  &.sb-toast-success {
    border-color: $secondary-100;
    background: $secondary-0;

    .sb-toast-icon {
      display: none;
    }

    .sb-toast-texts {
      .sb-toast-message {
        margin-left: 0px;
      }
    }

    .sb-toast-close-icon:before,
    .sb-toast-close-icon:after {
      background: $secondary-100;
    }
  }

  &.sb-toast-warning {
    border-color: $tertiary-100;
    background: $tertiary-0;

    .sb-toast-close-icon:before,
    .sb-toast-close-icon:after {
      background: $tertiary-100;
    }
  }

  &.sb-toast-danger {
    border-color: $red-400;
    background: $red-0;

    .sb-toast-close-icon:before,
    .sb-toast-close-icon:after {
      background: $red-400;
    }
  }

  .sb-toast-body {
    margin-right: $block-padding-xy;
    margin-left: 0px;
    padding-left: 0px !important;
    display: flex;
    position: relative;

    .sb-toast-icon {
      position: inherit;
      left: inherit;
      right: inherit;
      top: inherit;
      margin: 0px;
      width: $base-block-space*4 !important;
      height: $base-block-space*4 !important;
      background-position: 0px 4px !important;
      margin-right: $base-block-space;
    }
    .sb-toast-texts {
      margin: 0px;
    }
    .sb-toast-title {
      font-size: $h5-font-size !important;
      color: $gray;
      margin-bottom: $base-block-space*2;
      font-weight: $font-weight-bold;
    }
    .sb-toast-message {
      color: $gray;
      font-size: $h6-font-size !important;
      line-height: 22px;
      margin-bottom: 0px;
    }
  }

  &.sb-toast-normal {
    background: $white;
    border-right-width: 1px;
    border-bottom-width: 1px;
    border-top-width: 1px;

    .sb-toast-icon {
      display: none;
    }

    &.sb-toast-danger {
      .sb-toast-body .sb-toast-texts {
        .sb-toast-title {
          color: $red-400;
        }
      }
    }

    &.sb-toast-warning {
      .sb-toast-body .sb-toast-texts {
        .sb-toast-title {
          color: $tertiary-100;
        }
      }
    }

    &.sb-toast-success {
      .sb-toast-body .sb-toast-texts {
        .sb-toast-title {
          color: $secondary-100;
        }
      }
    }

    &.sb-toast-info {
      .sb-toast-body .sb-toast-texts {
        .sb-toast-title {
          color: $primary-300;
        }
      }
    }

    .sb-toast-body {
      .sb-toast-message {
        margin-left: 0px;
      }
    }
  }

  .sb-toast-close-icon {
    position: absolute;
    right: -($base-block-space*4);
    top: -($base-block-space*3);
    width: $base-block-space*4;
    height: $base-block-space*4;
    opacity: 1;
    cursor: pointer;

    &:hover {
      opacity: 1;
    }

    &:before,
    &:after {
      position: absolute;
      right: $base-block-space*3;
      content: ' ';
      height: $block-padding-xy;
      width: 2px;
      top: $block-padding-xy;
    }

    &:before {
      transform: rotate(45deg);
      background: $primary-300;
    }

    &:after {
      transform: rotate(-45deg);
      background: $primary-300;
    }
  }
}