/** CSS for an op talbe entry view component. */

@use 'frontend/app/components/op_profile/op_profile_common';
@use 'frontend/app/styles/common';

:host {
  color: common.$content-primary-color;
}

.row {
  display: flex;
  align-self: center;
  position: relative;
  border-top: 1px solid #eee;
  z-index: 0;
}

.row.expanded {
  background-color: rgba(0, 0, 0, 0.04);
  font-weight: bold;
}

.row:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.row > * {
  padding: 0.5em;
  overflow: hidden;
  flex-shrink: 0;
  box-sizing: border-box;
}

.bar {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: -2;
  background-color: #cde;
  padding: 0 !important;
}

.row-focus {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 8px;
  background-color: #e8710a;
  padding: 0 !important;
}

.leftout {
  padding-left: 175px;
  font-style: italic;
}

.diff-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.badge-added {
  background-color: #e6f4ea;
  color: #137333;
  border: 1px solid #ceead6;
}

.badge-removed {
  background-color: #fce8e6;
  color: #c5221f;
  border: 1px solid #fad2cf;
}

.removed-text {
  opacity: 0.65;
  text-decoration: line-through;
}
