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

.item {
  position: relative;
  display: flex;
  align-items: center;
  height: 64px;
  padding: 12px;
  margin-bottom: 8px;
  line-height: 20px;
  background-color: $th-bg-color;
  border-radius: 4px;

  &: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;
  }
}

.limits {
  right: 20px;
  @include vertical-center;
  @include TypographyTitleH6();

  .limit {
    :global .icon {
      margin-right: 4px;
    }

    & + .limit {
      margin-left: 14px;
    }

    & > span {
      vertical-align: middle;
    }
  }
}
