@import url("../sprezystosc_interaktywnie/styles.css");

.lesson-band {
  border-left-color: var(--yellow);
}

.card-icon {
  background: #fff3dc;
  color: #9a6400;
}

.formula-info {
  border-left-color: var(--yellow);
}

.work-lab {
  position: relative;
  height: 260px;
  margin-bottom: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background:
    repeating-linear-gradient(90deg, rgba(30, 64, 175, 0.08) 0 2px, transparent 2px 52px),
    #ffffff;
}

.work-track {
  position: absolute;
  left: 30px;
  right: 30px;
  bottom: 56px;
  height: 4px;
  border-radius: 8px;
  background: #172033;
}

.work-block {
  position: absolute;
  left: 20%;
  bottom: 60px;
  display: grid;
  place-items: center;
  width: 108px;
  height: 62px;
  color: white;
  background: var(--coral);
  border-radius: 8px;
  box-shadow: 0 12px 24px rgba(239, 106, 91, 0.28);
  font-weight: 900;
  transform: translateX(-50%);
  transition: left 180ms ease;
}

.work-force {
  position: absolute;
  left: calc(20% + 60px);
  bottom: 92px;
  min-width: 64px;
  padding-left: calc(var(--force-width, 62px) + 24px);
  color: var(--blue);
  font-weight: 900;
  transition: left 180ms ease;
}

.work-force::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: var(--force-width, 62px);
  height: 4px;
  background: currentColor;
}

.work-force::after {
  content: "";
  position: absolute;
  left: var(--force-width, 62px);
  top: 4px;
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  border-left: 14px solid currentColor;
}

.work-force.perpendicular {
  padding-left: 0;
  padding-bottom: calc(var(--force-width, 62px) + 22px);
  color: #08716d;
}

.work-force.perpendicular::before {
  left: 12px;
  top: auto;
  bottom: 20px;
  width: 4px;
  height: var(--force-width, 62px);
}

.work-force.perpendicular::after {
  left: 5px;
  top: auto;
  bottom: calc(var(--force-width, 62px) + 16px);
  border-left: 9px solid transparent;
  border-right: 9px solid transparent;
  border-bottom: 14px solid currentColor;
  border-top: 0;
}

.work-distance {
  position: absolute;
  left: 20%;
  bottom: 24px;
  height: 18px;
  color: #9a6400;
  font-weight: 900;
  transition: left 180ms ease, width 180ms ease;
}

.work-distance::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: var(--distance-width, 140px);
  height: 3px;
  background: currentColor;
}

.work-distance::after {
  content: "";
  position: absolute;
  left: var(--distance-width, 140px);
  top: 2px;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 12px solid currentColor;
}

@media (max-width: 520px) {
  .work-lab { height: 230px; }
  .work-block { width: 92px; height: 56px; }
  .work-force { min-width: 48px; }
}