@use "variables.scss";

#document-annotations {
  font-family: variables.$font-family;
  background-color: variables.$background;
  position: relative;
  display: flex;
  flex-direction: column;

  &.disabled {
    pointer-events: none;
  }

  .annotations-skeleton {
    .label-set-name-skeleton {
      margin: 24px 16px 8px 16px;
    }

    .label-properties-skeleton {
      padding-left: 16px;
      padding-right: 16px;
      padding-bottom: 8px;
      width: 100%;
      box-shadow: 0px 1px 0px variables.$grey-lightest;
      display: flex;
      align-items: center;

      .loading-left {
        display: flex;
        width: 80%;
        align-items: center;
        gap: 10px;

        .label-skeleton {
          padding-top: 1px;
          width: 100%;
        }
      }

      .loading-right {
        width: 100%;
      }
    }
  }

  .annotation-set-list {
    padding-bottom: 16px;

    .annotation-options {
      display: flex;
      justify-content: space-between;
      flex-direction: column;
      padding: 16px 16px 0px 16px;
      gap: 16px;

      #annotation-filters {
        display: flex;
        flex-direction: row;
        width: 100%;
        justify-content: space-around;
        gap: 12px;
        span {
          font-size: 14px;
        }
      }
    }

    .annotation-sets-accordions {
      margin-top: 16px;
      .annotation-set-group {
        .annotation-sets-list {
          position: relative;
        }
        &.no-top-margin {
          margin-top: 0px;
        }
        margin: 24px 16px 8px 16px;
        &.hover-effect {
          background-color: variables.$grey-lightest;
        }
        .label-set-header {
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: space-between;

          &:hover {
            background-color: variables.$background;
          }

          .label-set-name {
            font-weight: 600;
            font-size: 14px;
            line-height: 20px;
            color: variables.$text;
            display: flex;
            align-items: center;
            gap: 8px;

            .icon {
              width: 12px;
              height: 12px;
            }
          }
        }

        .ann-set-table {
          display: flex;
          align-items: center;
          width: fit-content;
          cursor: pointer;
          &:not(:last-child) {
            padding-bottom: 12px;
          }

          .ann-set-table-icon {
            padding: 4px 8px;
            border-radius: 32px;
            margin-left: 14px;
            background: variables.$purple-low-opacity;
            display: flex;
            width: fit-content;
            align-items: center;
            .ann-set-number {
              font-weight: 400;
              font-size: 14px;
              line-height: 20px;
              margin-left: 4px;
            }
          }
          .ann-set-table-label-set-name {
            margin-left: 8px;
            font-size: 14px;
            line-height: 20px;
          }
        }

        .labels {
          .label {
            .label-group {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              border-bottom: 1px solid variables.$grey-lightest;
              min-height: 44px;
              cursor: pointer;

              .label-group-left {
                display: flex;
                flex-direction: row;
                padding-left: 16px;
                color: variables.$text-lighter;
                align-items: center;

                icon {
                  width: 26px;
                }

                .label-name {
                  padding-left: 20px;
                }
              }

              .label-group-right {
                display: flex;
                flex-direction: row;
                font-weight: 400;
                font-size: 14px;
                line-height: 20px;
                cursor: default;

                .label-annotations-pending {
                  padding: 0px 8px;
                  border-radius: 20px;
                  background: variables.$grey-lighter-low-opacity;
                  color: variables.$text-lighter;
                  margin-right: 4px;
                }

                .label-annotations-accepted {
                  padding: 0px 8px;
                  border-radius: 20px;
                  background: variables.$green-low-opacity;
                  color: variables.$green;
                }
              }
            }

            .label-group-annotation-list {
              background-color: variables.$grey-hover;

              .annotation-row {
                padding-left: 16px;
              }
            }

            .label-name {
              color: variables.$text-lighter;
              word-break: break-word;
              font-size: 14px;
              line-height: 20px;
              font-weight: 400;
              user-select: none;
            }

            .annotation-row {
              width: 100%;
              border-bottom: 1px solid variables.$grey-lightest;
              transition: background-color 0.2s ease-out;
              align-items: center;
              height: 100%;
              padding: 0 16px;
              position: relative;
              .annotations-width-slider {
                background-color: transparent;
                top: 0px;
                bottom: 0px;
                left: 4px;
                right: 16px;
                margin: 0 20%;
                display: flex;
                align-items: center;
                border-radius: 8px;
                position: absolute;
              }

              &.clickable-cursor {
                cursor: pointer;
              }

              .annotation-row-left {
                display: flex;
                align-items: center;

                .annotation-icon {
                  height: 40px;
                  padding-right: 16px;
                }

                .label-name {
                  padding: 10px 0;
                  padding-right: 6px;
                }

                .annotation-translation {
                  display: flex;
                  padding-left: 20px;

                  &.pointer {
                    cursor: pointer;
                  }

                  .icon {
                    display: flex;
                  }

                  .translation-details {
                    display: flex;
                    flex-direction: column;
                    gap: 8px;
                    min-width: 216px;
                    text-align: left;
                    border-bottom: 1px solid variables.$low-opacity-white;
                    padding-bottom: 8px;
                    word-wrap: break-all;
                    white-space: normal;

                    .translation-title {
                      color: variables.$white;
                      font-weight: 400;
                      font-size: 12px;
                      line-height: 18px;
                      display: flex;
                      flex-direction: row;
                      justify-content: space-between;
                      .translated-string {
                        font-weight: 500;
                        text-align: right;
                        &.no-translation {
                          color: variables.$red;
                          font-weight: 400;
                        }
                      }
                    }
                  }
                  .translation-info {
                    padding-top: 8px;
                    line-height: 18px;
                    font-size: 12px;
                    opacity: 0.7;
                    color: variables.$white;
                    font-weight: 400;
                  }
                }
              }

              .annotation-row-right {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 100%;
                position: relative;

                .notification {
                  background-color: transparent;
                }

                .annotation-content {
                  width: 100%;
                  height: 100%;
                  font-size: 14px;
                  line-height: 20px;
                  font-weight: 400;
                  padding: 6px 0 6px 0;

                  .annotation,
                  .empty-annotation {
                    min-height: 36px;
                    display: flex;
                    align-items: center;

                    .annotation-checkbox {
                      margin-right: 0px;
                    }
                  }

                  .loading-container {
                    height: 20px;
                    display: flex;
                    align-items: center;

                    .loading-icon-size {
                      width: 13px;
                      height: 13px;
                    }
                  }

                  .spinner {
                    color: variables.$grey;
                  }

                  .annotation-items {
                    display: flex;
                    flex-direction: row;
                  }
                }

                .buttons-container {
                  display: flex;
                  height: 100%;
                  gap: 8px;
                  position: absolute;
                  right: -16px;
                  padding: 0 16px;
                  background-image: linear-gradient(
                    to right,
                    transparent,
                    variables.$grey-hover 20%
                  );

                  &.is-ann-editing {
                    position: relative;
                    background-image: none;
                  }
                }

                .annotation-value {
                  display: inline-block;
                  color: variables.$text;
                  padding: 0;
                  border: none;
                  background-color: transparent;
                  inline-size: 100%;
                  overflow-wrap: break-word;
                  word-break: break-all;
                  user-select: none;

                  &:focus {
                    outline: none;
                  }

                  .label-empty-clicked {
                    user-select: auto;
                    font-weight: 400;
                    color: variables.$text-lighter;
                  }

                  .label-empty {
                    font-weight: 500;
                    font-size: 14px;
                    color: variables.$primary;
                  }
                }
              }

              .empty-annotation {
                display: flex;
                width: 100%;
                justify-content: space-between;
              }

              &:hover {
                background-color: variables.$grey-hover !important;
              }
              &.selected {
                background-color: variables.$grey-lightest;
              }

              &.hovered-empty-labels {
                background-color: variables.$grey-lightest;
                border-bottom-color: variables.$grey-detail;
              }

              &.hovered-pending-annotations {
                position: relative;
                border-bottom-color: variables.$primary;

                &:before {
                  display: block;
                  content: "";
                  width: 100%;
                  height: 100%;
                  background: variables.$primary;
                  opacity: 0.1;
                  position: absolute;
                  top: 0;
                  left: 0;
                }
              }

              &.editing {
                background-color: variables.$background;
                border-bottom: 1px solid variables.$primary;
              }

              .not-found-text {
                color: variables.$grey;
                opacity: 0.3;
              }

              .saving-changes {
                color: variables.$grey;
              }

              .error-editing {
                color: variables.$red;
                animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
                transform: translate3d(0, 0, 0);
              }

              @keyframes shake {
                10%,
                90% {
                  transform: translate3d(-1px, 0, 0);
                }

                20%,
                80% {
                  transform: translate3d(2px, 0, 0);
                }

                30%,
                50%,
                70% {
                  transform: translate3d(-4px, 0, 0);
                }

                40%,
                60% {
                  transform: translate3d(4px, 0, 0);
                }
              }
            }
          }
        }

        .no-labels {
          display: flex;
          gap: 5px;
          padding-left: 28px;
          color: variables.$text-lighter;
          font-size: 14px;
          line-height: 20px;
          min-height: 44px;
          align-items: center;

          a {
            color: variables.$white;
            text-decoration: underline;
            font-weight: 500;
          }
        }
      }
    }
  }
}

.annotation-row {
  display: flex;
  align-items: center;
  .annotation-icon {
    display: flex;
  }
  .annotation-value {
    outline: none;
  }
}

.message {
  .message-container {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    font-size: 14px !important;
  }

  .btn-container {
    display: flex;
  }
}

.hidden {
  display: none !important;
}