@import '../styles/_variables.scss';

$border-radius: 20px;
$knob-radius: 8px;
$knob-bordered-radius: $knob-radius+1;


.main {
  --colorTile1: transparent;
  --colorTile2: rgba(200, 200, 200, 0.6);
  display: flex;
  flex-direction: column;
  width: 200px;
  height: 10px;
  position: relative;
  background: conic-gradient(var(--colorTile1) 0% 25%, var(--colorTile2) 0% 50%, var(--colorTile1) 50% 75%, var(--colorTile2) 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
  border-radius: $border-radius;
  border: 1px solid $dark-toolbar-bright-item-active;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent 0%, var(--target-color));

    [dir='rtl'] & {
      background: linear-gradient(-90deg, transparent 0%, var(--target-color));
    }

    border-radius: $border-radius;
  }

  .slider-input {
    margin: 0;
    opacity: 0;
    position: absolute;
    width: calc(100% + #{2*$knob-bordered-radius});
    height: 100%;
    left: -$knob-bordered-radius;
    @if dir == rtl {
      transform: rotateY(180deg);
    }
  }

  .knob {
    position: absolute;
    width: 2*$knob-radius;
    height: 2*$knob-radius;
    margin: auto;
    @if dir == rtl {
      margin-inline-end: -$knob-bordered-radius;
    }
    @else {
      margin-inline-start: -$knob-bordered-radius;
    }
    border-radius: 50%;
    border: 2px solid white;
    top: 0;
    bottom: 0;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.1);
  }

}