/* All techniques (feedback 28.10.): header like the Knowledge Base detail pages, then the techniques one below the
   other - the oval, the full name below it, a thin line across before the next one */
@import url("guide.css");

.technique-list { margin: 0; padding: 0; list-style: none; }
/* a border, not a box of 2 px (feedback 30.10.): on screens scaled to 125 or 150 % the box came out 3 or 4 pixels high and
   differently from line to line; a border stays one whole pixel everywhere */
.technique-list > li + li {
  margin-top: 1.1rem;
  padding-top: 1.1rem;
  border-top: 1px solid #d3d3d3;
}
.technique-list__item {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.45rem;
  color: #0f172a;
  text-decoration: none;
}
.technique-list__oval {
  padding: 0.12rem 0.65rem;
  border: 1px solid #b5b5b5;
  border-radius: 999px;
  font-size: var(--fs-small);
  line-height: 1.35;
  background: #fff;
  transition: border-color 0.2s, background 0.2s;
}
/* (indented by the oval's padding and border: the name starts exactly below the text in the oval) */
.technique-list__name { padding-left: calc(0.65rem + 1px); font-size: var(--fs-small); line-height: 1.45; color: var(--color-text-secondary); transition: color 0.2s; }
.technique-list__item:hover .technique-list__oval,
.technique-list__item:focus-visible .technique-list__oval {
  border-color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 8%, #fff);
}
.technique-list__item:hover .technique-list__name,
.technique-list__item:focus-visible .technique-list__name { color: var(--color-primary); }