:host {
  --timeline-width: 1.25pt;
  --timeline-color: var(--state-icon-color);
  --gap-size: 8px;
  --timeline-inset: 4px;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: var(--gap-size);
}

.edit-button {
  margin-right: 1em;
}

.card-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.edit-menu {
  margin-top: -8px;
  margin-bottom: -8px;
}

.edit-row {
  display: flex;
  align-items: center;
  gap: var(--gap-size);
  --ha-icon-display: flex;
}

.edit-row ha-textfield {
  flex: 1;
}

hui-generic-entity-row {
  position: relative;
}

hui-generic-entity-row.timeline::before {
  content: " ";
  display: block;
  position: absolute;
  bottom: calc(100% - var(--timeline-inset));
  left: calc(20px - (var(--timeline-width) / 2));
  width: var(--timeline-width);
  height: calc(var(--timeline-inset) * 2 + var(--gap-size));
  background-color: var(--timeline-color);
  opacity: 0.2;
}

hui-generic-entity-row.timeline:first-child::before {
  display: none;
}

hui-generic-entity-row.timeline {
  &::before {
    background-color: var(--state-icon-color, --paper-item-icon-color);
  }
}

hui-generic-entity-row > * {
  --ha-icon-display: flex;
}

.remove-entry:not(:disabled) ha-icon {
  color: var(--error-color);
}

.edit-entry:not(:disabled) ha-icon {
  color: var(--primary-color);
}

.add-entry {
  margin-top: -8px;
  margin-bottom: -8px;
}

.add-entry:not(:disabled) ha-icon {
  color: var(--primary-color);
}

.empty-row {
  --paper-item-icon-color: var(--disabled-text-color);
  --state-icon-color: var(--disabled-text-color);
}
