@import '~scss/variables';
@import '~scss/mixins';

.wrapper {
  padding: 12px;
  background-color: $card-bg-color;
  border-radius: $border-radius;
}

.item {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 12px;
  margin-bottom: 8px;
  line-height: 20px;
  background-color: $white;
  border-radius: 4px;
  border: 1px solid $border-color;

  &:last-child {
    margin-bottom: 0;
  }

  .icon {
    position: relative;
    width: 40px;
    margin-right: 12px;

    .indicator {
      position: absolute;
      right: -1px;
      bottom: -1px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
    }
  }

  .text {
    min-width: 120px;

    & > div {
      @include ellipsis;
      @include TypographyTitleH6($dark-color07);
    }

    & > p {
      @include ellipsis;
      @include TypographyParagraph($dark-color01);
    }

    &.name {
      padding-right: 20px;
      width: 40%;
    }
  }

  :global {
    .tag {
      height: 20px;
    }
  }
}

.probeItem {
  & + .probeItem {
    margin-top: 8px;
  }

  & > p {
    margin-top: 4px;
    line-height: 20px;
    font-family: $font-family-id;
  }

  .probeType {
    margin-left: 4px;
    font-weight: 600;
    line-height: 20px;
  }

  .probeTime {
    margin-left: 4px;
    line-height: 20px;
    color: $dark-color01;
  }
}

.noLink {
  opacity: 0.7;
  cursor: not-allowed;
}
