@import "./imports.scss";

.document-top-bar-component {
  width: 100%;
  height: $top-bar-height;
  border-bottom: $component-border;

  .loading-top-bar {
    height: 100%;
    display: flex;
    align-items: center;
  }

  .document-top-bar {
    width: 100%;
    height: 100%;
    background-color: $background;
    position: sticky;
    z-index: 39;
    display: flex;
    justify-content: space-between;

    flex: 1;
    top: 0;
    font-size: 14px;
    color: $dark-blue;
    font-weight: 400px;

    .left-bar-components {
      flex-direction: row;
      display: flex;
      flex: 1;
    }

    .right-bar-components {
      align-items: center;
      justify-content: flex-end;
      display: flex;
      flex: 1;

      .handover {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 16px;
      }

      .read-only-info {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding-right: 24px;
        color: $text-lighter;
        font-size: 14px;
        line-height: 20px;
        font-weight: 400;
        height: 100%;

        .info-icon {
          margin-left: 14px;
          vertical-align: text-top;

          &.info-reviewed {
            color: $primary;
          }
        }

        .doc-reviewed {
          color: $primary;
        }

        .read-only-details {
          white-space: normal;
          font-size: 12px;
        }
      }

      .keyboard-actions-info {
        margin-right: 16px;

        .tooltip-title {
          font-weight: 600;
          padding-bottom: 10px;
        }

        .tooltip-description {
          display: flex;
          flex-direction: column;
          row-gap: 8px;

          .content-line,
          .action-item {
            display: flex;
            flex-wrap: nowrap;
            justify-content: flex-start;
            gap: 6px;

            .tooltip-divider {
              width: 1px;
              background-color: $grey-detail;
              height: 15px;
              margin-top: 3px;
              opacity: 30%;
            }

            .key {
              font-size: 12px;
              font-weight: 500;
              display: flex;
              align-items: center;
              background-color: $low-opacity-white;
              border-radius: 4px;
              padding: 0 5px 0 5px;
            }

            .keyboard-action-text {
              font-weight: 400;
              line-height: 20px;
            }
          }
        }
      }

      .top-bar-buttons {
        .buttons {
          display: flex;
          align-items: center;
          margin-right: 16px;
        }
      }
    }
  }
}

.btn-container {
  display: flex;
  align-items: center;
  cursor: pointer;
}