.notify-popup {
  background: $color-purple;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
  color: $color-white;
  padding: 3px 5px 5px 5px;
  margin: 10px;
  opacity: 0;
  transition-property: opacity;
  transition-duration: 3s;

  &.start {
    opacity: 1;
    transition-duration: 1ms;
  }

  .arrow {
    height: 10px;
    width: 10px; 

    &::before {
      border-style: solid;
      content: '';
      display: block;
      height: 0;
      margin: auto;
      width: 0;
    }
  }

  &[data-placement="top"] .arrow {
    bottom: 0;
    margin-bottom: -10px;
    position: absolute;

    &::before {
      border-width: 5px 5px 0 5px;
      border-color: $color-purple transparent transparent transparent;
    }
  }

  &[data-placement="bottom"] .arrow {
    top: -5px;
    position: absolute;

    &::before {
      border-width: 0 5px 5px 5px;
      border-color: transparent transparent $color-purple transparent;
    }
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
