@import "../../../../../assets/scss/variables";

.dropzone {
  .text-field {
    height: 40px;
  }

  p {
    font-size: 1.5rem;

    &.error-message {
      color: #ee6969;
      font-size: 1.2rem;
      padding-left: 4px;
      margin-top: 5px;
    }
  }

  .error-msg {
    text-align: left;
    margin: 0rem;
    color: red;
    font-size: 1.3rem;
    font-style: italic;
  }

  .display-error {
    display: block;
  }

  .no-display-error {
    display: none;
  }

  button {
    background-color: $main-color;

    width: 100% !important;
    max-width: 174px;
    border-radius: 0 !important;
    display: flex;
    justify-content: center;

    p {
      font-size: 1.2rem;
      font-weight: bold;
      color: white;
    }

    &:hover {
      background-color: $secondary-color !important;
    }

    &:disabled {
      background-color: #cccccc !important;

      &:hover {
        background-color: #cccccc !important;
      }
    }
  }

  .list-container {
    margin-bottom: 26px;
    $lightgreen: #56B798;
    $darkgreen: #13865C;
    @keyframes loading {
      0% {
        background-color: $darkgreen;
        width: 0%;
      }
      100% {
        background-color: $darkgreen;
        width: 100%;
      }
    }

    .uploaded-emails {
      &.loading {
        border-radius: 10px;

        .uploaded-emails-head {
          border-radius: 10px;
        }

        background-color: $lightgreen;

        h4 {
          background-color: #13865C;
          animation: loading 1s ease-in-out infinite;
        }
      }

      margin-bottom: 2rem;

      &-head {
        position: relative;

        &.notopened {
          background-color: #2bc48a;
        }

        color: white;
        background-color: #2bc48a;
        cursor: pointer;
        font-size: $info-size;
        font-weight: $regular;
        height: 46px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 0;
        margin-top: -40px;
        padding: 0 25px;

        #total {
          display: flex;
          justify-content: space-between;
          min-width: 326px;
          height: 31px;
          background-color: white;
          align-items: center;
          font-weight: 500;
          border-radius: 4px;
          color: #040059;
          position: absolute;
          right: 62px;

          p {
            display: flex;
            justify-content: space-between;
            padding: 8px 0px 8px 15px;
            width: 100%;
            border-radius: 4px;
            height: 31px;
            align-items: center;
          }

          .deleteallprompt {
            background-color: $secondary-color;
            color: white;
            align-items: center;

            button {
              background-color: white;
              color: $main-color;
              border-radius: 4px !important;
              margin-right: 5px;
              border: none !important;
              padding: 3px 5px;
              &:hover{
                color:$secondary-color;
                background-color: white!important;
              }
            }
          }

          #deleteall {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 35px;
            height: 31px;
            border-radius: 4px;
            background-color: $main-color;

            &:hover {
              background-color: $secondary-color;

            }
          }
        }

        #justuploaded {
          position: absolute;
          left: 25px;
        }

        img {
          position: absolute;
          right: 25px;
        }
      }

      &-body {
        &::-webkit-scrollbar {
          width: 3px;
        }

        // &::-webkit-scrollbar-button {
        //   height: 20px;
        // }

        /* Track */
        &::-webkit-scrollbar-track {
          background: #EFF3F9;

        }

        /* Handle */
        &::-webkit-scrollbar-thumb {
          background: $secondary-color;
        }

        /* Handle on hover */
        &::-webkit-scrollbar-thumb:hover {
          background: $main-color;
        }

        overflow: hidden;
        transition: all 0.5s;
        height: 100%;
        padding: 0 20px;
      }

      &.open {
        & .uploaded-emails-body {
          background-color: #F3F8FC;
          border: 0.1rem solid #D0E4FF;
          border-radius: 5px;

          max-height: 250px;
          padding-top: 53px;
          margin-top: -7px;
        }
      }

      &.closed {
        & .uploaded-emails-body {
          max-height: 0;
        }
      }

    }

    width: 100%;

    .person-container {
      &::-webkit-scrollbar {
        width: 3px;

      }

      /* Track */
      &::-webkit-scrollbar-track {
        background: #EFF3F9;

      }

      /* Handle */
      &::-webkit-scrollbar-thumb {
        background: #040059;
      }

      /* Handle on hover */
      &::-webkit-scrollbar-thumb:hover {
        background: $main-color;
      }

      max-height: 150px;
      overflow: auto;
      margin: 0 0 38px 0;
      padding: 0;
      list-style: none;
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      column-gap: 2rem;
      row-gap: 1rem;


      .has-pointer {
        cursor: pointer;
      }

      .person-wrapper {
        cursor: pointer;

        .person-container-inner {
          min-height: 3.7rem;
          background-color: #FFFFFF;
          height: 22px;
          width: 100%;
          padding: 1rem;
          padding-bottom: 1.7rem;
          padding-top: 1.4rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border: none;

          // &:nth-child(odd) {
          //   background-color: #F3F8FC;
          // }

          // &:nth-child(even) {
          //   background-color: #F8F8F8;
          // }

          //.person-delete:hover ~ .person {
          //  display: none;
          //}
          .garbagebin {
            display: none;
          }

          .person-delete {
            filter: grayscale(1);
            opacity: .4;

            &:hover {
              filter: unset;
              opacity: 1;
            }

          }

          .person {
            font-weight: normal;
            font-size: 1.3rem;
            color: #040059;
          }

          .person-state-activity {
            width: 15px;
            height: 15px;
            border-radius: 3px;
          }

          .green {
            background-color: green;
          }

          .grey {
            background-color: #ccc;
          }

          &:hover {
            .person-delete {
              display: block;
            }

            .garbagebin {
              display: block;
            }
          }
        }

        .person-container-inner-handled {
          max-height: 3.7rem;
          width: 100%;
          background-color: #1a73e8;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0.4rem 1.8rem;

          &--text-area,
          &--btn-area {
            display: flex;
            align-items: center;
            gap: 1rem;
          }

          &--text-area {
            img {
              width: 1.3rem;
              height: 1.3rem;
            }

            p {
              margin: 0rem;
              padding: 0rem;
              color: white;
              font-size: 1.2rem;
            }
          }

          &--btn-area {
            a {
              background-color: #fff;
              outline: none;
              border: none;
              border-radius: 0.4rem !important;
              padding: 0.6rem 1.4rem;
              color: #040059;
              font-size: 1.2rem;
              font-weight: bold;

              &:hover {
                color: #1a73e8;
              }
            }
          }

        }
      }


    }
  }
}