@import '~scss/variables';

.wrapper {
  padding: 2px 0;
  cursor: pointer;

  & + .wrapper {
    margin-top: 4px;
  }

  &.selected,
  &:hover {
    background-color: $light-color07;
  }

  :global .column {
    position: relative;
  }
}

.nameWrapper {
  display: flex;
  overflow: hidden;
  white-space: nowrap;

  &:hover {
    border-right: 1px solid #212b36;
    position: absolute;
    min-width: 100%;
    overflow: visible;
    z-index: 1;
    background-color: $light-color07;
  }
}

.name {
  position: relative;
  flex: 1 1 auto;
  outline: none;
  overflow: hidden;
  font-family: $font-family-id;
  padding-left: 12px;
  padding-right: 12px;
  text-overflow: ellipsis;
  line-height: 20px;
  cursor: pointer;

  &::before {
    content: ' ';
    position: absolute;
    top: 0px;
    bottom: 0px;
    left: 0;
    border-left: 4px solid;
    border-left-color: inherit;
  }

  &::after {
    background: transparent;
    bottom: 0;
    content: ' ';
    left: 0;
    position: absolute;
    top: 0;
    width: 1000px;
  }

  .svc {
    padding-right: 12px;
    font-weight: $font-bold;
  }

  .endpoint {
    color: #79879c;
  }
}

.padder {
  display: inline-flex;
  height: 100%;
}

.barWrapper {
  position: relative;
  height: 20px;
  overflow: hidden;
}

.bar {
  position: absolute;
  top: 6px;
  height: 8px;
  border-radius: 4px;
}

.barLabel {
  position: absolute;
  color: #79879c;
  top: -6px;

  &Left {
    left: -12px;
    transform: translateX(-100%);
  }

  &Right {
    right: -12px;
    transform: translateX(100%);
  }
}
