Dwinzo_Demo/app/src/styles/scene/_comments.scss

@use "../abstracts/variables" as *;
@use "../abstracts/mixins" as *;

.comments-main-wrapper {
  position: relative;
}

.comments-threads-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  padding: 4px;
  background: var(--background-color);
  border-radius: #{$border-radius-extra-large} #{$border-radius-extra-large} #{$border-radius-extra-large}
    0;
  backdrop-filter: blur(12px);
  z-index: 1000;
  transform: translateY(-100%);
  outline: 1px solid var(--border-color);
  .comments-threads-container {
    display: flex;
    align-items: start;
    flex-direction: column;

    .users-commented {
      @include flex-center;

      .users {
        height: 24px;
        line-height: 24px;
        width: 24px;
        text-transform: uppercase;
        border-radius: 50%;
      }
    }

    .last-comment-details {
      display: flex;
      align-items: start;
      flex-direction: column;
      overflow: hidden;
      transition: all 0.2s ease-in;
      .header {
        @include flex-center;
        gap: 10px;

        .user-name {
          text-transform: capitalize;
        }

        .time {
          font-size: var(--font-size-small);
          color: var(--input-text-color);
        }
      }

      .message {
        margin-top: 10px;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        -webkit-line-clamp: 2;
        text-align: start;
      }

      .replies,
      .comments {
        margin-top: 4px;
        font-size: var(--font-size-small);
        color: var(--input-text-color);
      }
      .header,
      .message,
      .replies,
      .comments {
        display: none;
        opacity: 0;
      }
    }

    .expand {
      min-width: 200px;
      max-width: 260px;
      padding: 12px;
      padding-top: 0;
      height: 100%;
    }
  }

  .open {
    .users-commented {
      padding: 12px;
    }
    .message {
      display: -webkit-box !important;
      opacity: 1 !important;
      margin-bottom: 4px;
      padding: 0;
    }
    .header,
    .replies,
    .comments {
      display: flex !important;
      opacity: 1 !important;
    }
  }
}

.thread-chat-wrapper {
  position: absolute;
  // remove later
  top: 50%;
  left: 50%;
  // ----
  z-index: #{$z-index-ui-highest};
  .thread-chat-container {
    background: var(--background-color);
    backdrop-filter: blur(14px);
    border-radius: #{$border-radius-extra-large};
    width: 20rem;
    .header-wrapper {
      padding: 12px;
      @include flex-space-between;
      .header-options {
        @include flex-center;
        position: relative;
        .options-list {
          position: absolute;
          bottom: 0;
          right: 0;
          transform: translate(-24px, 100%);
          background: var(--background-color);
          padding: 8px 4px;
          border-radius: #{$border-radius-medium};
          backdrop-filter: blur(10px);
          z-index: 100;
          .options {
            text-wrap: nowrap;
            padding: 2px 4px;
            border-radius: #{$border-radius-medium};
            cursor: pointer;
            &:hover {
              color: var(--text-button-color);
              background: var(--background-color-accent);
            }
            &.delete {
              &:hover {
                color: var(--log-error-text-color);
                background: var(--log-error-background-color);
              }
            }
          }
        }
        .options-button,
        .close-button {
          @include flex-center;
          height: 24px;
          width: 24px;
          border-radius: #{$border-radius-medium};
          &:hover {
            background: var(--background-color-solid);
          }
        }
        .close-button {
          svg {
            scale: 1.4;
          }
        }
      }
    }
    .messages-wrapper {
      padding: 12px;
      padding-top: 0;
      max-height: 36vh;
      overflow: auto;
      .edit-container {
        .input-container {
          textarea {
            background: var(--background-color);
            &:focus {
              outline-color: var(--border-color-accent);
            }
          }
        }
        .actions-container {
          @include flex-space-between;
          width: 100%;
          margin: 8px 0;
          .actions {
            @include flex-center;
            gap: 4px;
            .cancel-button,
            .save-button {
              padding: 4px 10px;
              border-radius: #{$border-radius-large};
              background: var(--background-color-solid);
              outline: 1px solid var(--border-color);
            }
            .save-button {
              color: var(--text-button-color);
              background: var(--background-color-accent);
              outline: none;
            }
          }
        }
      }
      .message-container {
        position: relative;
        @include flex-space-between;
        align-items: flex-start;
        gap: 12px;
        margin-top: 8px;
        &:first-child {
          margin: 0;
        }
        .profile {
          height: 28px;
          width: 28px;
          min-width: 28px;
          text-transform: uppercase;
          line-height: 28px;
          text-align: center;
          border-radius: #{$border-radius-circle};
        }
        .content {
          width: 100%;
          .user-details {
            display: flex;
            align-items: flex-end;
            gap: 8px;
            .user-name {
              text-transform: capitalize;
            }
            .time {
              font-size: var(--font-size-tiny);
              color: var(--input-text-color);
            }
          }
        }
        .more-options {
          position: absolute;
          right: 0;
          top: 0;
          .more-options-button {
            @include flex-center;
            height: 18px;
            width: 18px;
            border-radius: #{$border-radius-small};
            &:hover {
              background: var(--background-color-solid);
            }
          }
          .options-list {
            position: absolute;
            right: 0;
            padding: 3px 6px;
            background: var(--background-color);
            backdrop-filter: blur(10px);
            outline: 1px solid var(--border-color);
            border-radius: #{$border-radius-medium};
            z-index: 100;
            .option {
              width: 100%;
              border-radius: #{$border-radius-medium};
              padding: 2px 6px;
              text-align: start;
              &:hover {
                background: var(--background-color-accent);
                color: var(--text-button-color);
              }
            }
          }
        }
        .message {
          margin-top: 6px;
        }
      }
    }
    .send-message-wrapper {
      padding: 12px;
      padding-top: 8px;
      .input-container {
        position: relative;
        @include flex-space-between;
        background: var(--background-color);
        border-radius: #{$border-radius-extra-large};
        outline: 1px solid var(--border-color);
        textarea {
          background: transparent;
          outline: none;
          width: calc(100% - 36px);
          overflow: hidden;
          line-height: 28px;
          max-height: 108px;
        }
        .sent-button {
          position: absolute;
          right: 2px;
          bottom: 2px;
          @include flex-center;
          padding: 2px;
          cursor: pointer;
          svg {
            pointer-events: none;
            rotate: 45deg;
          }
        }
        .disable-send-btn {
          filter: saturate(0);
        }
        &.active {
          background: var(--background-color-solid);
          padding-top: 4px;
          flex-direction: column;
          align-items: end;
          textarea {
            width: 100%;
            line-height: 18px;
          }
          .sent-button {
            position: relative;
          }
        }
      }
    }
  }
}