@use "@/src/assets/scss/variables" as *;
@use "@/src/assets/scss/partial" as *;

.speedometer-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  user-select: none; // Prevent text selection while dragging
  margin: 25px 0px;
  .value-display {
    position: absolute;
    bottom: -35px;
    text-align: center;
    margin-bottom: 20px;
    pointer-events: none; // Allow clicking through the value display

    .value {
      font-size: $fs24;
      font-weight: $fw800;
      color: $blackColor;
    }

    .unit {
      font-size: $fs16;
      color: $blackColor;
      margin-left: 5px;
    }
  }

  .value15 {
    position: absolute;
    top: 10px;
    left: 10px;
  }

  .value50 {
    position: absolute;
    top: 10px;
    left: 10px;
  }

  path.speedo-segment {
    stroke: #ffffff;
    stroke-width: 4;
  }

  .speedometer {
    .pointer {
      cursor: pointer;
    }
  }
}

// Override default speedometer styles
:global {
  .segment-value {
    font-size: $fs14 !important;
    font-weight: $fw500;
    @media (min-width: $xxl) {
      font-size: $fs16 !important;
    }
  }
}