@define-mixin colorful $bgColor, $borderColor, $color {
  background-color: $bgColor;
  border-color: $borderColor;
  color: $color;
  a {
    color: $color;
  }
}

.noties {
  position: fixed;
  max-width: 80%;
  z-index: 9999;
  &:empty {
    display: none;
  }
}

.noties-top-right {
  right: 0;
  top: 20px;
  & .notie {
    transform: translateX(100%);
    &.notie-shown {
      transform: translateX(-20px);
    }
  }
}

.noties-top-left {
  left: 0;
  top: 20px;
  & .notie {
    transform: translateX(-100%);
    &.notie-shown {
      transform: translateX(20px);
    }
  }
}

.noties-bottom-right {
  right: 0;
  bottom: 20px;
  & .notie {
    transform: translateX(100%);
    &.notie-shown {
      transform: translateX(-20px);
    }
  }
}

.noties-bottom-left {
  left: 0;
  bottom: 20px;
  & .notie {
    transform: translateX(-100%);
    &.notie-shown {
      transform: translateX(20px);
    }
  }
}

.noties-top-center {
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  & .notie {
    transform: translateY(-100%);
    &.notie-shown {
      transform: translateY(20px);
    }
  }
}

.noties-bottom-center {
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  & .notie {
    transform: translateY(100%);
    &.notie-shown {
      transform: translateY(-20px);
    }
  }
}

.notie {
  background-color: #ddd;
  opacity: 0;
  transition: transform .3s, opacity .3s;
  border: 1px solid #ddd;
  font: 14px/1.4 Helvetica, serif;
  word-wrap: break-word;
  &:not(:last-child) {
    margin-bottom: 10px;
  }
  &.notie-auto-hide-disabled {
    cursor: pointer;
  }
  &.notie-shown {
    opacity: 1;
  }
  & .notie-body {
    padding: 10px 12px;
  }
  & .notie-svg {
    height: 23px;
    display: block;
    float: left;
  }
  & .notie-text {
    display: block;
    padding-left: 30px;
    padding-top: 2px;
  }
  & svg {
    height: 23px;
    width: 23px;
  }
  &.notie-info {
    @mixin colorful #C6E4F4, #A9D3EB, #477DAC;
  }
  &.notie-error {
    @mixin colorful #EAC1BD, #D7A9A6, #AB2925;
  }
  &.notie-success {
    @mixin colorful #D9F1CF, #C8E1BF, #748C6C;
  }
  &.notie-warning {
    @mixin colorful #F7F2CF, #E8E2B2, #9C7D45;
  }
}
