@import 'variables.module'

.row
  display: flex
  background: $main-background-color
  min-height: 46px
  max-height: 46px
  align-items: center
  padding: 0 8px
  border-radius: 4px
  cursor: pointer
  border: solid 1px transparent
  margin-right: 10px
  &:not(:first-child)
    margin-top: 10px

  &:hover
    border: solid 1px lighten(#4253a5, 20%)

.rowSelected
  border: 1px $blue-color solid
//   border-left: 5px $blue-color solid
  margin-left: 10px
  margin-right: 3px

.ruleSuccessRow
  border: 1px $success-color solid
//   border-left: 5px $success-color solid

.ruleFailureRow
  border: 1px $failure-color solid
//   border-left: 5px $failure-color solid

.service
  text-overflow: ellipsis
  overflow: hidden
  white-space: nowrap
  color: $secondary-font-color
  padding-left: 4px
  padding-top: 3px
  padding-right: 10px
  display: flex
  font-size: 12px

.timestamp
  font-size: 12px
  color: $secondary-font-color
  padding-left: 12px
  flex-shrink: 0
  width: 145px
  text-align: left

.endpointServiceContainer
  display: flex
  flex-direction: column
  overflow: hidden
  padding-right: 10px
  padding-left: 10px
  flex-grow: 1

.directionContainer
  display: flex
  border-right: 1px solid $data-background-color
  padding: 4px
  padding-right: 12px