/* ============================================================
   GROUPES DE TRIANGLES
   ============================================================ */

.tg-scroll-container {
  overflow-x: auto;

  -webkit-overflow-scrolling: touch;
}

.tg-wrapper {
  display: flex;
  justify-content: space-between;

  gap: 16px;

  min-width: 440px;

  margin: 0 auto;
}

.tg-group {
  display: flex;
  align-items: center;

  gap: 8px;
}

.tg-triangle-grid {
  display: grid;

  grid-template-columns: repeat(2, 46px);

  gap: 4px;
}

.tg-triangle {
  position: relative;

  width: 46px;
  height: 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--surface);

  border: 1px solid var(--line);

  overflow: hidden;
}

.tg-triangle.up {
  clip-path: polygon(
    50% 0%,
    0% 100%,
    100% 100%
  );
}

.tg-triangle.down {
  clip-path: polygon(
    0% 0%,
    100% 0%,
    50% 100%
  );
}

.tg-triangle span {
  position: relative;

  color: #ffffff;

  font-size: 13px;
  font-weight: 600;
}

.tg-triangle.up span {
  top: 6px;
}

.tg-triangle.down span {
  top: -6px;
}

.tg-box {
  width: 36px;
  height: 36px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: var(--surface);

  border: 1px solid var(--line);
  border-radius: 4px;

  color: #ffffff;

  font-size: 14px;
  font-weight: 600;
}

/* ============================================================
   TRIANGLES LABELLISÉS
   ============================================================ */

.lt-scroll-container {
  overflow-x: auto;

  -webkit-overflow-scrolling: touch;
}

.lt-wrapper {
  display: flex;
  justify-content: space-between;

  gap: 12px;

  min-width: 500px;

  margin: 0 auto;
}

.lt-triangle-box {
  position: relative;

  width: 110px;
  height: 100px;

  flex-shrink: 0;
}

.lt-svg {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;
}

.lt-node,
.lt-edge {
  position: absolute;

  color: #ffffff;

  font-family: var(--mono);
  font-size: 13px;
  font-weight: 600;
}

.lt-node.top {
  top: 0;
  left: 50%;

  transform: translateX(-50%);
}

.lt-node.bottom-left {
  bottom: 18px;
  left: -2px;
}

.lt-node.bottom-right {
  right: -2px;
  bottom: 18px;
}

.lt-edge.left {
  top: 42%;
  left: 24%;
}

.lt-edge.right {
  top: 42%;
  right: 24%;
}

.lt-edge.bottom {
  bottom: 0;
  left: 50%;

  transform: translateX(-50%);
}