/**
 * Speed Odometer Component
 * Node ID: 100-65049 (within package card)
 *
 * Visual speed indicator with 3 variants:
 * - Min: 50-100 Mbps
 * - Medium: 100-150 Mbps
 * - Max: 200+ Mbps
 */

.speed-odometer {
  display: inline-block;
  width: 62px;
  height: 32px;
  vertical-align: middle;
}

.speed-odometer__icon {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Variants based on speed level */
.speed-odometer--min .speed-odometer__icon {
  /* Uses: 417b77606ae087a72af2ddff8cdd0241ccc2fbe1.svg */
  content: url('../../images/417b77606ae087a72af2ddff8cdd0241ccc2fbe1.svg');
}

.speed-odometer--medium .speed-odometer__icon {
  /* Uses: 48abc5dbcddbf10b5bf34812c50d7c0e34531d54.svg */
  content: url('../../images/48abc5dbcddbf10b5bf34812c50d7c0e34531d54.svg');
}

.speed-odometer--max .speed-odometer__icon {
  /* Uses: 6a30f63bc66cb75e1677726b6dc6dbb2542bda9a.svg */
  content: url('../../images/6a30f63bc66cb75e1677726b6dc6dbb2542bda9a.svg');
}

/* Alternative: Use as background-image */
.speed-odometer--bg-min {
  background-image: url('../../images/417b77606ae087a72af2ddff8cdd0241ccc2fbe1.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.speed-odometer--bg-medium {
  background-image: url('../../images/48abc5dbcddbf10b5bf34812c50d7c0e34531d54.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.speed-odometer--bg-max {
  background-image: url('../../images/6a30f63bc66cb75e1677726b6dc6dbb2542bda9a.svg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* =============================================
 * RESPONSIVE DESIGN
 * ============================================= */

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .speed-odometer {
    width: 56px;
    height: 28px;
  }
}

/* Tablet & Desktop: Keep original size */
@media (min-width: 768px) {
  .speed-odometer {
    width: 62px;
    height: 32px;
  }
}