@use '../colors';

scale {
  padding: 8px 0;

  contents {

    trough {
      background: colors.$surface-3;
      slider {
        background: lighten(colors.$surface-3, 25%);
        padding: 8px;
        margin: -5px;
        border-radius: 100%;
      }
      highlight {
        background: colors.$primary-accent;
      }
    }
  }

  // TODO: marks can be at the top or bottom, maybe also on the right or left depending on scale.horizontal/vertical
  marks {
    mark {
      padding-top: 5px;
      indicator {
        color: colors.$surface-3;
        min-height: 8px;
        min-width: 1px;
      }
    }
  }

  &:disabled { opacity: 0.3; }
}