@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
  background: #E8FFF1

.ruleSuccessRowSelected
  border: 1px #6FCF97 solid
  border-left: 5px #6FCF97 solid
  margin-left: 10px
  margin-right: 3px

.ruleFailureRow
  background: #FFE9EF

.ruleFailureRowSelected
  border: 1px $failure-color solid
  border-left: 5px $failure-color solid
  margin-left: 10px
  margin-right: 3px

.ruleNumberTextFailure
  color: #DB2156
  font-family: Source Sans Pro;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  padding-right: 12px

.ruleNumberTextSuccess
  color: #219653
  font-family: Source Sans Pro;
  font-style: normal;
  font-weight: 600;
  font-size: 12px;
  line-height: 15px;
  padding-right: 12px

.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
