ux-media-player-timeline {
  display: flex;
  flex-direction: row;
  align-items: center;
  height: 30px;

  .current-time,
  .duration-time {
    margin: 0;
    color: @mediaplayer-timeline-text;
    padding: 0 10px;
  }

  .timeline-bar {
    position: relative;
    flex: 1;
    height: 10px;
    background-color: @mediaplayer-timeline-bg;
    cursor: pointer;

    &:focus {
      .native-focus-outline();
    }

    .buffered-bar {
      position: absolute;
      height: 100%;
      background-color: @mediaplayer-timeline-buffered-bg;
      pointer-events: none;
    }

    .media-progress-bar {
      position: absolute;
      height: 100%;
      background-color: @mediaplayer-timeline-track;

      .media-progress-bar-thumb {
        position: absolute;
        right: 0;
        width: 20px;
        height: 20px;
        background-color: #fff;
        border-radius: 50%;
        border: 1px solid #ddd;
        transform: translateX(50%) translateY(-28%);
        z-index: 10000;
        opacity: 0;
        display: none;

        &:hover,
        &:active {
          opacity: 1;
        }
      }
    }

    .scrub-handle {
      position: absolute;
      width: 2px;
      background-color: @mediaplayer-timeline-handle;
      height: 100%;
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
      pointer-events: none;
    }

    .tooltip {
      pointer-events: none;
    }

    &:hover,
    &:active,
    &:hover:active {
      .scrub-handle {
        opacity: 1;

        &.scrub-handle-hidden {
          opacity: 0;
        }
      }
    }
  }

  // Quiet Mode Styling
  &.quiet {
    .current-time,
    .duration-time {
      color: @mediaplayer-timeline-quiet-text;
    }

    .timeline-bar {
      background-color: @mediaplayer-timeline-quiet-bg;

      .buffered-bar {
        background-color: @mediaplayer-timeline-quiet-buffered-bg;
      }

      .media-progress-bar {
        background-color: @mediaplayer-timeline-quiet-track;
      }

      .scrub-handle {
        background-color: @mediaplayer-timeline-quiet-handle;
      }
    }
  }
}

.ux-media-player-timeline-tooltip {
  pointer-events: none;
}