@use "../base/mixins";
@use "../vars/variables";

.notification {
  position: relative;
  display: flex;
  height: 3.75rem;
  min-width: 3.125rem;
  border-radius: 1.5625rem;
  background-color: var(--uc-bg-bg-surface-1);
  border: 4px solid var(--uc-bg-bg-surface-1);
  opacity: 1;
  z-index: 10000;

  // @media screen and (max-width: $bp-phone) {
  //   display: none;
  // }

  @media (pointer: fine) {
    &:hover {
      .notification--button-close {
        display: inline-flex;
      }
    }
  }

  &--floating {
    position: absolute;
    right: 0;

    .notification__text {
      white-space: nowrap;
    }

    @media screen and (max-width: variables.$bp-tablet) {
      position: relative;
    }
  }

  &--full {
    @media screen and (max-width: variables.$bp-tablet) {
      position: absolute;
      left: -50vw;
    }

    .notification__body {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      -webkit-transform: translate(-50%, -50%);
      max-width: 90%;

      @media screen and (max-width: variables.$bp-tablet) {
        width: max-content;
        justify-content: center;
        background-color: var(--uc-bg-bg-surface-1);
        border-radius: 1.875rem;
        padding: 0.75rem 0.7rem;
        margin: 0 auto;
      }

      .notification__text {
        .button--icon--small {
          width: 1.375rem;
          height: 1.375rem;
        }
      }
    }

    .notification__icon {
      width: 2.5rem;
      height: 2.5rem;
    }

    &.notification--info:not(.notification--top--minimal) {
      .notification__body {
        height: fit-content;
        padding: 0.625rem;
        border-radius: 1.875rem;
        background: var(--uc-bg-bg-surface-1);
      }
    }
  }

  &--top,
  &--bottom {
    // @media screen and (max-width: $bp-tablet) {
    //   position: fixed;
    //   top: 0rem;
    //   left: auto;
    //   right: 0rem;
    //   background: transparent;
    //   transform: none;
    //   -webkit-transform: none;
    //   padding: 0;
    //   border: 0;
    // }

    &::before {
      opacity: 0;
      transition: opacity 0.2s;
    }

    &.notification--saving {
      &::before {
        position: fixed;
        content: "";
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: var(--uc-background);
        opacity: 0.5;
        transition: opacity 0.2s;
      }
    }

    .notification__body {
      position: fixed;
      top: 0.5rem;
      left: 50%;
      transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      background-color: var(--uc-bg-bg-surface-1);
      border-radius: 1.875rem;
      backdrop-filter: blur(5px);
      -webkit-backdrop-filter: blur(5px);
      padding: 0.75rem 1.25rem 0.75rem 0.75rem;

      @media screen and (max-width: variables.$bp-phone) {
        max-width: 90%;
        width: max-content;
      }

      // @media screen and (max-width: $bp-tablet) {
      //   left: auto;
      //   right: 0.5rem;
      //   transform: none;
      //   -webkit-transform: none;
      //   padding: 0;
      //   width: 1.875rem;
      //   height: 1.875rem;
      //   border-radius: 0;
      // }

      .notification {
        &__icon {
          width: 2.5rem;
          height: 2.5rem;

          // @media screen and (max-width: $bp-tablet) {
          //   width: 100%;
          //   height: 100%;
          // }
        }

        // &__text {
        //   @media screen and (max-width: $bp-tablet) {
        //     display: none;
        //   }
        // }
      }
    }

    &--minimal {
      &.notification--saving {
        &::before {
          background: transparent;
        }
      }
    }
  }

  &--bottom {
    .notification__body {
      top: auto;
      bottom: 1.875rem;

      @media screen and (max-width: variables.$bp-phone) {
        bottom: 1.25rem;
      }
    }
  }

  &--has-parent {
    display: flex;
    justify-content: center;
    position: fixed !important;
    background-color: transparent !important;
    border: none !important;

    &.notification--bottom {
      top: auto;
      bottom: 1.875rem;
    }

    .notification__body {
      position: relative;
      bottom: 0;
      left: auto;
      right: auto;
      transform: none;
      -webkit-transform: none;
    }
  }

  &__body {
    display: flex;
    align-items: center;
    height: 3.25rem;
    gap: 0.75rem;
  }

  &__background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  &__icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.25rem;
    height: 3.25rem;
    font-size: 1.25rem;
    color: var(--uc-background);
    border-radius: 50%;

    &--success {
      background: var(--uc-foreground);
    }

    &--progress {
      background: transparent;
    }

    &--error {
      color: var(--uc-black);
      background: var(--uc-error-error-60);
      cursor: pointer;
    }

    .img-loading {
      width: 100%;
      height: 100%;
    }
  }

  &__text {
    @include mixins.body-small;
    display: inline-flex;
    align-items: center;
    color: var(--uc-theme-color-80);
    height: 100%;
    max-width: calc(50vw - 20rem);
    padding: 0 0.625rem 0 0.5rem;
    opacity: 1;
    flex: 1;

    @media screen and (max-width: variables.$bp-tablet) {
      max-width: calc(100vw - 4rem);
    }

    p {
      display: -webkit-box;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }

    button {
      margin-left: 1rem;
    }
  }

  &--error {
    .notification {
      &__text {
        max-width: 30rem;
        color: var(--uc-error-error-60);
      }
    }

    &.open {
      background-color: #2a0404;
      border-color: #2a0404;
    }

    &.notification--full,
    &.notification--top,
    &.notification--bottom,
    &.notification--has-parent {
      position: absolute;
      left: -50vw;

      .notification__body {
        background-color: #2a0404;
        border-color: #2a0404;
        border-radius: 1.875rem;
        max-width: 28.75rem;
        // padding-left: 0.5rem;
        // padding-right: 0.25rem;
        padding: 0.5rem;
        height: fit-content;
        transition: all 0.3s;
        z-index: 10000;

        @media only screen and (max-width: 30rem) {
          max-width: 96vw;
        }
      }

      .notification__icon {
        width: 2.5rem;
        height: 2.5rem;
      }
    }

    .button-close {
      background-color: var(--uc-error-error-60);
      border-color: var(--uc-error-error-60);
      margin-right: -0.25rem;

      @media (pointer: fine) {
        &:hover {
          background-color: var(
            --uc-buttons-secondary-button-secondary-hover-bg
          );
          border-color: var(--uc-buttons-secondary-button-secondary-hover-bg);
        }
      }
    }
  }

  &--low {
    height: 3.125rem;

    @media screen and (max-width: variables.$bp-tablet) {
      border-left: 0;
    }

    .notification {
      &__body {
        height: 2.625rem;
      }

      &__icon {
        height: 2.625rem;
        width: 2.625rem;

        @media screen and (max-width: variables.$bp-tablet) {
          height: 2.5rem;
          width: 2.5rem;
        }
      }

      &__text {
        @media screen and (max-width: variables.$bp-tablet) {
          display: none;
        }
      }
    }
  }

  @include mixins.transition-collapse-message;
}

.notification-phone {
  position: fixed;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, #000 28.5%);
  z-index: 10000;
  padding: 3rem 1rem 3.75rem;

  &__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    max-width: 37.5rem;
    gap: 3.75rem;

    button {
      min-width: 20vw;
    }
  }

  &__icon {
    font-size: 3.75rem;
    color: var(--uc-error-error-60);
  }

  &__text {
    color: var(--uc-text-text-secondary);
    text-align: center;
  }
}

.notification-reconnecting {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  z-index: 3000;

  &__badge {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.25rem;
    padding: 0.625rem;
    padding-right: 1.25rem;
    margin: auto;
    border-radius: 1.875rem;
    background: var(--uc-bg-bg-surface-1);

    img {
      width: 2.5rem;
      height: 2.5rem;
    }

    span {
      @include mixins.body-small;
      color: var(--uc-text-text-primary);
    }
  }

  &__info {
    position: absolute;
    left: 50%;
    bottom: 5.5rem;
    transform: translate(-50%, 0);
    -webkit-transform: translate(-50%, 0);
    text-align: center;
    width: 100%;
    max-width: 30.75rem;
    padding: 0 1rem;
    @include mixins.secondary-body-extrasmall;
    color: var(--uc-text-text-secondary);

    @media screen and (max-width: variables.$bp-tablet) {
      bottom: 3.75rem;
    }

    br {
      @media screen and (max-width: variables.$bp-phone) {
        display: none;
      }
    }
  }
}

@include mixins.transition-opacity;