.histogram-bar-chart {
  @apply flex items-end w-full relative;

  > .bar {
    @apply flex-1 relative [.disabled]:opacity-30;
    @apply before:block before:bg-primary before:h-[var(--histogram-bar-height)] before:border before:border-white;
    @apply after:block after:h-[2px] after:bg-primary after:translate-y-2;
  }
}

.histogram-range-slider {
  --thumb-size: 18px;

  @apply relative;

  > input[type="range"] {
    @apply appearance-none absolute bg-transparent pointer-events-none select-none absolute bg-transparent pointer-events-none inset-0 p-0 m-0;
    @apply w-[calc(100%+var(--thumb-size))] left-[calc(var(--thumb-size)/2*-1)] h-[calc(var(--thumb-size)-2px)];

    &::-webkit-slider-thumb {
      @apply border-[2px] border-primary bg-white rounded-full size-[var(--thumb-size)] cursor-grab appearance-none pointer-events-auto;
    }
  }
}