nukeop/nuclear

@import "../../common.scss";

.seekbar {
  position: relative;
  height: 1.25em;
  cursor: pointer;
  background-color: $background2;
  flex: 0 0 auto;
  transition: height 0.25s;

  &.loading::after {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transform: translateX(-100%);
    background-image: linear-gradient(
      90deg,
      rgba(lightgray, 0) 0,
      rgba(lightgray, 0.2) 25%,
      rgba(lightgray, 0.5) 50%,
      rgba(lightgray, 0.7) 75%,
      rgba(lightgray, 0)
    );
    animation: shimmer 2s infinite;
    content: '';
  }

  .seekbar_progress {
    height: 100%;
    background-color: $pink;
  }

  .seekbar_segment {
    position: absolute;
    background-color: rgba($blue, 0.75);
    height: 100%;
  }

  @keyframes shimmer {
    100% {
      transform: translateX(100%);
    }
  }

}

.seekbar_popup {
  background: $bgdarker !important;
  color: $white !important;
  border-color: $bgdefault !important;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.18), 0px 0px 20px 0px rgba(0, 0, 0, 0.09) !important;
  user-select: none;

  &:before {
    background-color: $bgdarker !important;
  }

  &.bottom:before {
    box-shadow: -1px -1px 0 0 $bgdefault !important;
  }

  &.top:before {
    box-shadow: 1px 1px 0 0 $bgdefault !important;
  }
}