@import 'src/styles/variables';

.vertical_bar_scale {
  --temp-height: 300px;
  --temp-track: var(--color-11);
  --temp-thumb: var(--color-grey);

  display: inline-block;
  width: var(--temp-height);

  -webkit-appearance: none;
  appearance: none;
  background: transparent;

  &:focus {
    outline: none;
  }

  &::-webkit-slider-runnable-track {
    height: var(--space-s);
    border-radius: var(--border-radius-m);
    background-color: var(--temp-track);
  }

  &::-webkit-slider-thumb {
    height: var(--space-l);
    width: var(--space-l);
    margin-top: -4px;

    -webkit-appearance: none;
    appearance: none;

    border-radius: var(--border-radius-m);
    background-color: var(--color-grey);
  }

  &::-moz-range-track {
    height: var(--space-l);
    width: var(--space-l);
    margin-top: -4px;

    -webkit-appearance: none;
    appearance: none;

    border-radius: var(--border-radius-m);
    background-color: var(--color-grey);
  }

  &::-moz-range-thumb {
    height: var(--space-s);
    border-radius: var(--border-radius-m);
    background-color: var(--temp-track);
  }

  &_wrapper {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 1px;
    transform: rotate(-90deg);
  }
}

@media print {
  .vertical_bar_scale {
    display: none;
  }
}
