@import 'variables';
@import 'functions';

.twofas-light-toast {
  background: $tf-toast-background;
  border-radius: 4px;
  -webkit-box-shadow: 0 0 15px 0 $tf-toast-shadow;
  box-shadow: 0 0 15px 0 $tf-toast-shadow;
  color: $tf-toast-color;
  cursor: pointer;
  display: block;
  height: 62px;
  min-width: 200px;
  padding: 15px 20px;
  position: fixed;
  right: 15px;
  top: 47px;
  z-index: 9999;
  transform: translateX(150%);
  transition: transform 1s cubic-bezier(.87, -.41, .19, 1.44), top .75s cubic-bezier(.87, -.41, .19, 1.44);

  @media all and (max-width: 782px) {
    top: 61px;
  }

  &:nth-of-type(2) {
    top: 119px;

    @media all and (max-width: 782px) {
      top: 134px;
    }
  }

  &:nth-of-type(3) {
    top: 191px;

    @media all and (max-width: 782px) {
      top: 206px;
    }
  }

  &:nth-of-type(4) {
    top: 263px;

    @media all and (max-width: 782px) {
      top: 278px;
    }
  }

  &:nth-of-type(1n + 5) {
    display: none;
  }

  &:hover {
    background: rgba(lighten($tf-toast-background, 10%), .75);
  }

  &.twofas-show {
    transform: translateX(0);
  }

  &.twofas-light-toast-success {
    background: $tf-toast-background-success;

    &:hover {
      background: rgba(lighten($tf-toast-background-success, 10%), .75);
    }
  }

  &.twofas-light-toast-error {
    background: $tf-toast-background-error;

    &:hover {
      background: rgba(lighten($tf-toast-background-error, 10%), .75);
    }
  }

  &.twofas-light-toast-warning {
    background: $tf-toast-background-warning;

    &:hover {
      background: rgba(lighten($tf-toast-background-warning, 10%), .75);
    }
  }

  p {
    font-size: px-to-rem(13);
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
  }
}