@import '../../styles/var.less';

.output {
  width: 100%;
  height: 100%;
  position: relative;
  display: flex;
  flex-direction: column;
  .outputTitle {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    align-items: center;

    line-height: 32px;
    padding: 0px 10px;
    font-weight: bold;
    border-bottom: 1px solid var(--color-border);
    i {
      margin-right: 6px;
    }
  }
  .outputContent {
    padding: 10px;
    overflow-y: auto;
    flex: 1;
    height: 0px;
    .outputItem {
      .timeBox {
        display: flex;
        align-items: center;
      }
      .timeSpan {
        margin-right: 4px;
        font-weight: 500;
      }
      .timeBoxIcon {
        transform: rotate(90deg);
        margin-right: 4px;
        i {
          color: var(--color-success);
        }
        &:hover {
          cursor: default;
          background-color: transparent;
        }
      }
      .failureIconBox {
        i {
          color: var(--color-error);
        }
      }
      > div {
        line-height: 22px;
      }
      padding: 2px 0px;
    }
  }

  .executedDatabaseBox,.sqlBox{
    display: flex;
    .iconBox{
      margin-right: 4px;
      flex-shrink: 0;
    }
  }

  .executedDatabaseBox{
    .executedDatabase {
      color: var(--color-warning-text);
      white-space: nowrap;
    }
  }
  // .sqlBox {
  //   .sqlContent{
  //   }
  // }
}
