.notifications-container {
  max-height: 100vh;
  max-width: 320px;
  pointer-events: none;
  position: fixed;
  width: 100%;
  z-index: 9999;

  &.notify-is-x-center {
    left: 50%;
    transform: translateX(-50%);
  }

  &.notify-is-y-center {
    top: 50%;
    transform: translateY(-50%);
  }

  &.notify-is-center {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }

  &.notify-is-left {
    left: 0;
  }

  &.notify-is-right {
    right: 0;
  }

  &.notify-is-top {
    top: 0;
  }

  &.notify-is-bottom {
    bottom: 0;
  }

  &.notify-is-x-center.notify-is-top {
    top: var(--distance);
  }

  &.notify-is-x-center.notify-is-bottom {
    bottom: var(--distance);
  }

  > * {
    pointer-events: auto;
  }
}

.notify {
  --notify-error: rgb(235, 87, 87);
  --notify-error-progress: rgb(192, 69, 69);
  --notify-success: rgb(111, 207, 151);
  --notify-success-progress: rgb(84, 170, 120);
  --notify-warning: rgb(242, 201, 76);
  --notify-warning-progress: rgb(196, 166, 79);
  --notify-info: rgb(81, 205, 243);
  --notify-info-progress: rgb(84, 169, 196);
  --notify-gray: rgb(51, 51, 51);
  --notify-gray-2: rgb(77, 77, 77);
  --notify-gray-3: rgb(130, 130, 130);
  --notify-white: rgb(255, 255, 255);
  --notify-white-2: rgba(255, 255, 255, 0.8);
  --notify-padding: 0.75rem;
  --notify-icon-size: 32px;
  --notify-close-icon-size: 16px;

  $this: &;
  align-items: center;
  border-radius: 6px;
  box-sizing: border-box;
  display: flex;

  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  overflow: hidden;
  padding: var(--notify-padding);
  position: relative;
  text-decoration: none;
  transition-timing-function: ease;
  width: 100%;

  &__icon {
    align-items: center;
    display: flex;
    flex-shrink: 0;
    height: var(--notify-icon-size);
    justify-content: center;
    margin-right: 12px;
    width: var(--notify-icon-size);
  }

  &__close {
    align-items: center;
    cursor: pointer;
    display: flex;
    height: var(--notify-close-icon-size);
    justify-content: center;
    position: absolute;
    right: 12px;
    top: 12px;
    user-select: none;
    width: var(--notify-close-icon-size);

    * {
      pointer-events: none;
    }
  }

  &__title {
    font-size: 1rem;
    font-weight: 600;
    padding-right: calc(var(--notify-padding) + var(--notify-close-icon-size));
  }

  &__text {
    font-size: 0.875rem;
    margin-top: 0.25rem;
  }

  &--type-1 {
    background-color: #fff;
    border: 1px solid currentColor;

    #{$this}__close {
      color: var(--notify-gray-3);
    }

    #{$this}__title {
      color: var(--notify-gray);
    }

    #{$this}__text {
      color: var(--notify-gray-2);
    }
  }

  &--type-2 {
    color: var(--notify-gray);
  }

  &--type-3 {
    color: var(--notify-white);

    #{$this}__text {
      color: var(--notify-white-2);
    }
  }

  &--error {
    &#{$this}--type-1 {
      box-shadow: 0 2px 26px rgba(#d70000, 0.1);
      color: var(--notify-error);
    }

    &#{$this}--type-2,
    &#{$this}--type-3 {
      background-color: var(--notify-error);
    }
  }

  &--warning {
    &#{$this}--type-1 {
      box-shadow: 0 2px 26px rgba(#f2c94c, 0.1);
      color: var(--notify-warning);
    }

    &#{$this}--type-2,
    &#{$this}--type-3 {
      background-color: var(--notify-warning);
    }
  }

  &--success {
    &#{$this}--type-1 {
      box-shadow: 0 2px 26px rgba(#52d700, 0.1);
      color: var(--notify-success);
    }

    &#{$this}--type-2,
    &#{$this}--type-3 {
      background-color: var(--notify-success);
    }
  }

  &--info {
    &#{$this}--type-1 {
      box-shadow: 0 2px 26px rgba(#54afca, 0.1);
      color: var(--notify-info);
    }

    &#{$this}--type-2,
    &#{$this}--type-3 {
      background-color: var(--notify-info);
    }
  }

  // effects
  &--fade {
    opacity: 0;
    will-change: opacity;
  }

  &--fadeIn {
    opacity: 1;
  }

  &--slide {
    opacity: 0;
    will-change: opacity, transform;

    @at-root .notify-is-center &,
      .notify-is-y-center &,
      .notify-is-x-center:not(.notify-is-bottom) & {
      transform: translateY(-20px);
    }

    @at-root .notify-is-x-center.notify-is-bottom & {
      transform: translateY(20px);
    }

    @at-root .notify-is-right & {
      transform: translateX(calc(var(--distance) + 110%));
    }

    @at-root .notify-is-left & {
      transform: translateX(calc((var(--distance) * -1) - 110%));
    }
  }

  &--slideIn {
    @at-root .notify-is-x-center:not(.notify-is-bottom) &,
      .notify-is-center &,
      .notify-is-y-center &,
      .notify-is-x-center.notify-is-bottom & {
      opacity: 1;
      transform: translateY(0);
    }

    @at-root .notify-is-right &,
      .notify-is-left & {
      opacity: 1;
      transform: translateX(0);
    }
  }

  @at-root .notify-is-left & {
    left: var(--distance);
  }

  @at-root .notify-is-right & {
    right: var(--distance);
  }

  @at-root .notify-is-top &,
    .notify-is-center &,
    .notify-is-y-center &,
    .notify-is-x-center.notify-is-top & {
    margin-top: var(--gap);
  }

  @at-root .notify-is-bottom &,
    .notify-is-x-center:not(.notify-is-top) & {
    margin-bottom: var(--gap);
  }

  // autoclose progress animation
  &.notify-autoclose {
    --progress-height: 5px;
    padding-bottom: calc(var(--notify-padding) + var(--progress-height));

    &::before {
      animation: progress calc(var(--timeout) * 1ms) linear forwards;
      bottom: 0;
      content: '';
      height: var(--progress-height);
      left: 0;
      position: absolute;
      transform: scale3d(1, 1, 1);
      transform-origin: left;
      width: 100%;

      @keyframes progress {
        to {
          transform: scale3d(0, 1, 1);
        }
      }
    }

    &.notify--error {
      &::before {
        background-color: var(--notify-error-progress);
      }
    }

    &.notify--warning {
      &::before {
        background-color: var(--notify-warning-progress);
      }
    }

    &.notify--success {
      &::before {
        background-color: var(--notify-success-progress);
      }
    }

    &.notify--info {
      &::before {
        background-color: var(--notify-info-progress);
      }
    }
  }
}
