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

$success-text: #0d9867; //dropzone
$lightgreen: #56B798; //dropzone
$darkgreen: #13865C; //dropzone

:root {
  --person-background: white;
  --disabled-bg: #ccc;
  --disabled-text :white;
  --btn-enabled-text: #fff;
  --upload-bg: var(--blue-to-gray);
  --btn-img: var(--svg-white);
}

:root[data-theme="dark"] {
  --person-background: #2F363E;
  --disabled-bg: #2F363E;
  --disabled-text : #40474F;
  --btn-enabled-text: #ccc;
  --upload-bg: var(--blue-to-gray);
  --btn-img: brightness(0) saturate(100%) invert(25%) sepia(9%) saturate(765%) hue-rotate(172deg) brightness(93%) contrast(86%);
};

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

  p {
    font-size: $btn-txt-size;

    &.error-message {
      color: $error-text;
      font-size: $index-size;
      padding-left: 4px;
      margin-top: 5px;
    }
  }

  .error-msg {
    text-align: left;
    margin: 0;
    color: $error-color;
    font-size: $index-size;
    font-style: italic;
  }

  .display-error {
    display: block;
  }

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

  button {
    color: $text-color;
    background-color: $main-color;
    width: 100% !important;
    //max-width: 174px;
    border-radius: 0 !important;
    display: flex;
    height: 41px;
    align-items: center;
    justify-content: center;
    gap: 1rem;

    p {
      font-size: $index-size;
      font-weight: bold;
      color: $white;
    }

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

    &:disabled {
      pointer-events: none;

      background-color: var(--disabled-bg) !important;
      p{
        color: var(--disabled-text) !important;
      }
      svg {
        filter: var(--btn-img)
      }

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

  .list-container {
    margin-bottom: 26px;
    margin-top: 40px;

    @keyframes loading {
      0% {
        background-color: $darkgreen;
        width: 0%;
      }
      100% {
        background-color: $darkgreen;
        width: 100%;
      }
    }

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

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

        background-color: $lightgreen;

        h4 {
          background-color: $darkgreen;
          animation: loading 1s ease-in-out infinite;
        }
      }

      margin-bottom: 2rem;

      &-head {
        position: relative;

        &.notopened {
          background-color: var(--upload-bg);
          #total{
            p{
              color: $white;
            }
          }
        }

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

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

          p {
            display: flex;
            justify-content: space-between;

            width: 100%;
            font-weight: bold;
            font-size: 1.7rem;
            border-radius: 4px;
            height: 31px;
            color: $rolebox-background;
            align-items: center;
          }

          .deleteallprompt {
            background-color: $secondary-color;
            color: $white;

            height: 100%;
            width: calc(100% + 50px);
            margin: 0 -25px;
            align-items: center;
            padding: 0 25px;

            button {
              background-color: $white;
              color: $main-color;
              font-weight: bold;
              text-align: center;
              border-radius: 4px !important;
              margin-left: 15px;
              border: none !important;
              padding: 10px 18px;


              &: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;
        }

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

        }

        /* 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: $quick-access-background;
          border: 0.1rem solid $generic-block-border;
          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: $scrollbar-track;

      }

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

      /* 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: var(--person-background);
          height: 22px;
          width: 100%;
          padding: 1.4rem 1rem 1.7rem 1rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          border: none;

          .garbagebin {
            display: none;
          }

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

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

          }

          .person {
            font-weight: normal;
            font-size: $index-large;
            color: $title-color;
          }

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

          .green {
            background-color: green;
          }

          .grey {
            background-color: $inactive-text;
          }

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

            .garbagebin {
              display: block;
            }
          }
        }

        .person-container-inner-handled {
          max-height: 3.7rem;
          width: 100%;
          background-color: $secondary-color;
          color: $white;
          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: 0;
              padding: 0;
              color: $white;
              font-size: 1.2rem;
            }
          }

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

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

        }
      }


    }
  }
  .form-button-alt-text{
    color:$rolebox-background;
  }
  button{
    &:disabled{
      cursor:not-allowed!important;
    }
  }
}

.enable-btn {
  p {
    color: var(--btn-enabled-text) !important;
  }
}