systelab-toast {
  $toast-bg-color: #6a6a6a;
  $toast-text-color: #ffffff;
  $toast-success-icon-color: #c2d95d;
  $toast-warning-icon-color: #ffd24a;
  $toast-info-icon-color: rgb(5, 122, 201);
  $toast-error-icon-color: #ff4944;

  .slab-toast {
    color: $toast-text-color;

    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;

    width: 290px;
    padding: 10px 20px;

    background: $toast-bg-color;
    border-radius: 34.5px;

    &--auto-width {
      width: auto;
      min-width: 290px;
      max-width: 530px;
    }
    &--fixed-size-small {
      max-width: 290px;
    }
    &--fixed-size-large {
      min-width: 530px;
    }
    > i.type,
    > i.close {
      position: absolute;
      border-radius: 20px;
      font-size: 22px;
      &:before {
        z-index: 1;
        position: relative;
      }
      &:after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: white;
      }
    }
    > i.close {
      right: 16px;
      color: white;
      font-size: 20px;
      &:before {
        content: "\2715";
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 22px;
        border: 1px solid white;
        border-radius: 50%;
        color: white;
        font-style: normal;
        font-size: 12px;
        font-weight: normal;
        line-height: 1.1;
      }
      &:after {
        content: none;
      }
    }
    > i.type {
      left: 16px;
    }

    &--success {
      > i.type {
        color: $toast-success-icon-color;

        &:after {
          clip-path: circle(30% at 50% 50%);
        }
      }
    }

    &--warning {
      > i.type {
        color: $toast-warning-icon-color;

        &:after {
          clip-path: polygon(50% 0%, 0% 90%, 100% 90%);
        }
      }
    }

    &--info {
      > i.type {
        color: $toast-info-icon-color;

        &:after {
          clip-path: circle(30% at 50% 50%);
        }
      }
    }

    &--error {
      > i.type {
        color: $toast-error-icon-color;

        &:after {
          clip-path: circle(30% at 50% 50%);
        }
      }
    }

    div {
      padding-left: 22px;
    }

    &.show-close-button {
      div {
        padding-right: 22px;
      }
    }
  }
}