/* Control Bar Size */
@include Option("userContent.player.size") {
  #controlsContainer {
    // --button-size: 32px !important; /* Original: 30px */ Disabled for issue #404
    --controlBar-height: 40px; /* Original: 40px, Replace to this value */
    .touch {
      --button-size: 48px !important; /* Original: 40px */
      --controlBar-height: 52px; /* Original: 52px */
    }
    .controlBar {
      height: var(--controlBar-height) !important; /* Original: 40px */
    }
  }
  .videocontrols[inDOMFullscreen] {
    #controlsContainer {
      --button-size: 64px !important; /* Original: 30px */
      --track-size: 6px !important; /* Original: 5px, Touch: 7px */
      --thumb-size: 15px !important; /* Original: 13px, Touch: 16px */
      --controlBar-height: 64px; /* Original: 40px */
      .touch {
        --button-size: 72px !important; /* Original: 40px */
        --controlBar-height: 64px; /* Original: 52px */
      }
      .controlBar {
        padding-bottom: 8px !important;
      }
    }
  }
}

/* Control Bar UI */
@include Option("userContent.player.ui") {
  audio {
    --duration-color: #929292; /* Like Original */
    --media-background: rgba(26,26,26,.8); /* Like Original */

    border-radius: 8px;
    --box-shadow1: rgba(14,13,26,.12);
    --box-shadow2: rgba(7,48,114,.12);
    --box-shadow3: rgba(34,0,51,.04);
    box-shadow: 0 5px 10px -3px var(--box-shadow1), 0 3px 16px 2px var(--box-shadow2),
                0 8px 12px  1px var(--box-shadow3);
    /* Or: 0 2px 15px rgba(0,0,0,.1); */

    @include Dark {
      --box-shadow1: rgba(249, 249, 250, 0.12);
      --box-shadow2: rgba(91, 91, 102, 0.12);
      --box-shadow3: rgba(82, 82, 94, 0.04);
    }
  }
  video {
    --duration-color: #eee;
    --media-background: linear-gradient(transparent, rgba(26,26,26,.85));

    @include Contrast {
      --duration-color: #929292; /* Like Original */
      --media-background: rgba(26,26,26,.8); /* Like Original */
    }
  }

  #controlsContainer {
    .controlBar {
      background: var(--media-background) !important;
    }
    .duration {
      color: var(--duration-color) !important; /* Original: #929292 */
    }
  }

  @include Option("userContent.player.ui.twoline") {
    audio {
      // All thing like original
      /* #controlsContainer .controlBar */
      --controlBar-flex-wrap: unset;
      --controlBar-justify-content: center;
      --controlBar-align-content: unset;
      --controlBar-twoline-more-height: 0px;
      --controlBar-padding-inline: 9px;

      /* #controlsContainer .scrubberStack */
      /* .scrubberStack - Vertical */
      --scrubberStack-order: unset;
      --scrubberStack-height: 100%;
      --scrubberStack-transform: none;

      /* .scrubberStack - Horizontal */
      --scrubberStack-margin-inline: 9px;

      /* #controlsContainer .positionDurationBox */
      --positionDurationBox-flex-grow: unset;
      --positionDurationBox-margin-left: unset;
      --positionDurationBox-text-align: center;

      /* Others */
      --button-outside-margin: 0;
    }
    video {
      /* #scrubber .scrubber::-moz-range-thumb */
      --scrubber-thumb-scale: 0;
      --scrubber-thumb-color: #48a0f7; /* Color as hover, Prevent flashing */

      /* .progressBar::-moz-progress-bar */
      --progressBar-scale: 0.65;

      /* #controlsContainer .controlBar */
      --controlBar-flex-wrap: wrap;
      --controlBar-justify-content: space-between;
      --controlBar-align-content: space-around;
      --controlBar-padding-inline: 0 !important; /* Original: 9px */

      /* #controlsContainer .scrubberStack */
      /* .scrubberStack - Vertical */
      --scrubberStack-order: -1;

      /* .scrubberStack - Horizontal */
      --scrubberStack-flex-basis: auto;
      --scrubberStack-twoline-width: 100%;
      --scrubberStack-margin-inline: 0;

      /* #controlsContainer .positionDurationBox */
      --positionDurationBox-flex-grow: 2;
      --positionDurationBox-margin-left: 15px;
      --positionDurationBox-text-align: left;

      /* Others */
      --duration-color: #dadada;
      --button-outside-margin: 9px;
    }

    .scrubber:not(:hover)::-moz-range-thumb {
      transform: scale(var(--scrubber-thumb-scale, 1));
      background-color: var(--scrubber-thumb-color, currentColor) !important;
    }
    .progressStack {
      transform-origin: bottom;
      transform: scaleY(var(--progressBar-scale, 1));
    }
    .scrubber:hover::-moz-range-thumb,
    .progressContainer:hover .progressStack {
      transform:scale(1);
    }

    #controlsContainer {
      .controlBar {
        flex-wrap: var(--controlBar-flex-wrap);
        justify-content: var(--controlBar-justify-content);
        align-content: var(--controlBar-align-content);
        height: calc(var(--controlBar-height) + var(--controlBar-twoline-more-height, var(--thumb-size))) !important;
        padding-inline: var(--controlBar-padding-inline) !important; /* Original: 9px */
      }
      .scrubberStack {
        /* Vertical */
        order: var(--scrubberStack-order);
        height: var(--scrubberStack-height, var(--thumb-size)) !important;
        transform: var(--scrubberStack-transform, translateY(calc(var(--thumb-size) / 2)));

        /* Horizontal */
        flex-basis: var(--scrubberStack-flex-basis, calc(var(--scrubberStack-width) - 18px)) !important;
        width: var(--scrubberStack-twoline-width, var(--scrubberStack-width));
        margin-inline: var(--scrubberStack-margin-inline) !important;
      }
      .positionDurationBox {
        flex-grow: var(--positionDurationBox-flex-grow);
        margin-left: var(--positionDurationBox-margin-left);
        text-align: var(--positionDurationBox-text-align) !important;
      }
    }

    #playButton {
      margin-left: var(--button-outside-margin) !important;
    }
    #fullscreenButton {
      margin-right: var(--button-outside-margin) !important;
    }
  }
}

@include Option("userContent.player.icon") {
  #controlsContainer .fullscreenButton {
    background-image: url("../icons/enter-fullscreen.svg") !important;
    &[fullscreened] {
      background-image: url("../icons/exit-fullscreen.svg") !important;
    }
  }
}

@include Option("userContent.player.noaudio") {
  #controlsContainer .muteButton[noAudio] {
    /* Remove volume button at noAudio */
    display: none !important;
  }
}

/* Click to play UI */
@include Option("userContent.player.click_to_play") {
  #controlsContainer {
    .clickToPlay {
      cursor: pointer;
      opacity: 0.65 !important;
    }
    .controlsSpacerStack:hover > .clickToPlay {
      opacity: 0.85 !important;
      &:hover {
        opacity: 1 !important;
        fill: #48a0f7 !important; /* color as .scrubber */
      }
    }
  }
}

/* Animation */
@include Option("userContent.player.animate") {
  @include Animate {
    /* Control Bar */
    #controlsContainer .controlBar {
      transition: transform 350ms ease;
      opacity: 1 !important;
      &[hidden] {
        transform: translateY(100%);
        transition: transform 350ms ease-in-out, opacity 1s ease 100ms !important;
        opacity: 0 !important;

        .progressBar,
        .bufferBar {
          display: unset !important;
          opacity: 0.55;
          transition: opacity 150ms ease 50ms;
        }
      }
    }

    /* Two line Control Bar */
    .scrubber::-moz-range-thumb,
    .progressStack {
      transition:transform .1s cubic-bezier(0, 0, 0.2, 1);
    }

    /* Click to play */
    #controlsContainer .clickToPlay {
    transition: opacity 150ms ease-in-out, fill 150ms ease-in-out;
    }
  }
}
