@import '../shared/styles/base.css';

:root {
  --pathwayHeight: 5px;
  --pathwayMargin: 20px;
  --draggerSize: 12px;
  --draggerBorder: 4px;
}

.container {
  flex: 1;
  min-width: 200px;
  margin: var(--pathwayMargin) 0;
}

.pathway {
  width: 100%;
  height: var(--pathwayMargin);
  position: relative;
  border-radius: var(--radius-small);

  &::before {
    content: "";
    display: block;
    width: 100%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: var(--pathwayHeight);
    background-color: var(--gray-light);
  }
}

.progress-bar {
  z-index: var(--zIndex1);
  height: var(--pathwayHeight);
  position: absolute;
  border-radius: var(--radius-small);
  top: 50%;
  transform: translateY(-50%);

  &.bar-green {
    background-color: var(--green);
  }

  &.bar-red {
    background-color: var(--red);
  }

  &.bar-dark {
    background-color: var(--gray-dark);
  }

  &.bar-gray {
    background-color: var(--gray);
  }

  &.bar-blue {
    background-color: var(--blue);
  }
}

.sliderContainer {
  width: 100%;
}

.draggerContainer {
  left: 0;
  cursor: pointer;
  z-index: var(--zIndex9);
  position: absolute !important;
  transform: translateX(-50%);
  top: calc((var(--pathwayHeight) - var(--draggerSize) - 2 * var(--draggerBorder)) / 2);
}

.draggerSectionContainer {
  top: 0;
}

.tipso {
  min-width: inherit !important;
}

.sliderTipso {
  left: 20%;
  min-width: inherit !important;
  transition: all .2s;
}

.sliderTipsoTop {
  composes: sliderTipso;
  bottom: calc(100% + 8px) !important;
}

.sliderTipsoBottom {
  composes: sliderTipso;
  top: calc(100% + 8px) !important;
}

.dragSection {
  height: var(--pathwayHeight);
  width: var(--pathwayHeight);
  border-radius: 50%;
  cursor: pointer;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 2;
  opacity: 0;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);

  &.light {
    background-color: rgba(255, 255, 255, 0.6);
  }
}

.dragSectionEnable {
  opacity: 1;
}

.dragger {
  width: var(--draggerSize);
  height: var(--draggerSize);
  cursor: pointer;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  background-color: var(--white);

  &.green {
    border: var(--draggerBorder) solid var(--green);
  }

  &.red {
    border: var(--draggerBorder) solid var(--red);
  }

  &.dark {
    border: var(--draggerBorder) solid var(--gray-dark);
  }

  &.gray {
    border: var(--draggerBorder) solid var(--gray);
  }

  &.blue {
    border: var(--draggerBorder) solid var(--blue);
  }
}