@mixin videoPlayer() {
  .geoscene-video-player {
    --geoscene-video-player-view-height: 300px;
    --geoscene-video-player-view-aspect-ratio: 1.77;
    --geoscene-video-player-color-swatch-size: 20px;
    --geoscene-video-player-color-swatch-gap: 10px;
    --geoscene-video-player-progress-width: 2px;
    --geoscene-video-player-controls-spacing: var(--calcite-size-16, 16px);

    min-width: calc(var(--geoscene-video-player-view-height) * var(--geoscene-video-player-view-aspect-ratio));

    .geoscene-video-player__video-view {
      display: flex;
      height: var(--geoscene-video-player-view-height);
    }

    .geoscene-video-player__slider-progress-container {
      position: relative;
      z-index: 1;
      width: 100%;
    }

    .geoscene-video-player__progress {
      appearance: none;
      display: block;
      position: absolute;
      top: calc(50% - var(--geoscene-video-player-progress-width) / 2);
      left: var(--geoscene-video-player-controls-spacing);
      border: none;
      background: var(--calcite-color-border-1);
      cursor: pointer;
      width: calc(100% - var(--geoscene-video-player-controls-spacing) * 2);
      height: var(--geoscene-video-player-progress-width);

      &::-webkit-progress-bar {
        background-color: var(--calcite-color-border-3);
      }

      &::-webkit-progress-value {
        background-color: var(--calcite-color-border-input);
      }

      &::-moz-progress-bar {
        background-color: var(--calcite-color-border-3);
      }
    }

    .geoscene-video-player__slider {
      background-color: var(--calcite-color-foreground-1);
      padding: var(--geoscene-video-player-controls-spacing);
    }

    .geoscene-video-player__slider .geoscene-slider {
      .geoscene-slider__track {
        background-color: transparent;

        .geoscene-slider__segment-0 {
          background-color: var(--calcite-color-brand);
        }

        .geoscene-slider__segment-1 {
          background-color: transparent;
        }
      }
    }

    .geoscene-video-player__color-picker {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      column-gap: var(--geoscene-video-player-color-swatch-gap);

      .geoscene-video-player__color-block {
        cursor: pointer;
        width: var(--geoscene-video-player-color-swatch-size);
        height: var(--geoscene-video-player-color-swatch-size);
      }

      .geoscene-video-player__color-block__active {
        border-radius: var(--geoscene-video-player-color-swatch-size);
      }
    }
  }

  .geoscene-video-player__toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--calcite-color-foreground-1);
    padding: 0 calc(var(--geoscene-video-player-controls-spacing) / 2) calc(var(--geoscene-video-player-controls-spacing) / 2);
    font-size: var(--calcite-font-size--2);
  }

  .geoscene-video-player__toolbar--top-padding {
    padding-top: calc(var(--geoscene-video-player-controls-spacing) / 2);
  }

  .geoscene-video-player__live-icon {
    color: var(--calcite-color-status-danger);
  }

  .geoscene-video-player__actions-group {
    display: flex;
    flex: 1;
    gap: var(--calcite-spacing-md);
    align-items: center;
  }

  .geoscene-video-player__timecode {
    display: flex;
    align-items: center;
    color: var(--calcite-color-text-3);
  }

  .geoscene-video-player__controls {
    justify-content: flex-end;
  }

  .geoscene-video-player__settings-flow {
    min-width: var(--calcite-size-160);
  }

  .geoscene-metadata-table__empty-state {
    transition-duration: 0ms;
  }
}

@if $include_VideoPlayer == true {
  @include videoPlayer();
}