@import (reference) './Button.less';
@import (reference) './IconButton.less';
@import (reference) './Link.less';
@import (reference) './Text.less';

// State Changes:

.is-VideoEditorLoading {
  .FilePreview-actions * > {
    visibility: hidden;
  }
}

.is-VideoEditorLoaded {
  .FilePreview-actions * > {
    visibility: visible;
  }
}

.is-VideoEditorOpen {
  .VideoEditor-stage {
    opacity: 1;
    transform: none;
  }
}

// Hiding referenced Content Edit Ui:

.VideoEditor-fileContainer > :not([data-name$='/file']) {
  display: none;
}

.VideoEditor-InputColors {
  display: none;
}

// Module styles:

.VideoEditor-stage {
  --VideoEditor-asideWidth: 440px;
  --VideoEditor-bottomHeight: 221px;

  background: var(--color-white);
  bottom: 0;
  display: block;
  left: 0;
  opacity: 0;
  position: fixed;
  right: 0;
  top: var(--Page-headerBottom);
  transform: scaleY(0);
  transform-origin: bottom;
  transition:
    opacity var(--time-xs) var(--ease-in),
    transform var(--time-s) var(--ease-out);
  z-index: 1000;

  .CIG & > .TabBar {
    margin-left: 0;
    margin-right: 0;
  }

  > [data-tab] {
    height: calc(100% - var(--gap-m) * 2 - var(--lineHeight-m));
  }
}

.VideoEditor-stage-closeButton {
  .Button.is-dominant;

  position: absolute;
  right: calc(var(--gap-l) - var(--gap-s));
  top: calc(var(--gap-l) - var(--gap-s));
}

.VideoEditor-stage-aside {
  bottom: 0;
  display: flex;
  flex-flow: column wrap;
  position: absolute;
  right: 0;
  top: 0;
  width: var(--VideoEditor-asideWidth);

  .TC-unselected {
    display: none;
  }

  input[type='range'] {
    display: none;
  }
}

.VideoEditorAside-top {
  align-items: center;
  display: flex;
  flex-direction: row;
  height: calc(var(--gap-l) * 3);
  padding: var(--gap-l);

  > h2:first-of-type {
    font-size: var(--fontSize-xl);
    font-weight: normal;
  }
}

.VideoEditorAside-body {
  max-height: calc(100% - (var(--gap-l) * 3));
  overflow: auto;
  padding: 0 var(--gap-l) var(--gap-m) var(--gap-l);
  width: 100%;
}

.VideoEditor-stage-main {
  // align-items: center;
  background-color: var(--color-gray1);
  background-image: linear-gradient(
    -45deg,
    var(--color-gray1),
    var(--color-gray1) 25%,
    var(--color-gray2) 25%,
    var(--color-gray2) 50%,
    var(--color-gray1) 50%,
    var(--color-gray1) 75%,
    var(--color-gray2) 75%
  );
  background-size: 50px 50px;
  bottom: var(--VideoEditor-bottomHeight);
  display: flex;
  justify-content: center;
  left: 0;
  position: absolute;
  right: var(--VideoEditor-asideWidth);
  top: 0;
}

.VideoEditor-stage-bottom {
  background: rgb(236 236 238);
  bottom: 0;
  height: var(--VideoEditor-bottomHeight);
  left: 0;
  padding: var(--gap-l);
  position: absolute;
  right: var(--VideoEditor-asideWidth);

  &::before {
    color: var(--color-gray6);
    content: 'Overlays';
    font-size: 12px;
    left: 0;
    position: absolute;
    text-align: right;
    text-transform: uppercase;
    top: calc(var(--gap-l) + 4px);
    transform: rotate(180deg);
    writing-mode: vertical-rl;
  }

  &::after {
    content: '';
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    width: 1px;
    z-index: 1;
  }
}

// The video used for capturing should be almost unnoticeable to the User
// while still working within the browsers' constraints for video playback (eg: not completely hidden).
.VideoEditor-captureVideo {
  height: 3px;
  width: auto;
}

.VideoEditor-minimap {
  cursor: copy;
  display: flex;
  flex-direction: column;
  position: relative;
}

.VideoEditor-minimap.is-selecting {
  cursor: col-resize;
}

.VideoEditor-minimap .playhead {
  background: var(--color-black);
  height: 100%;
  pointer-events: none;
  position: absolute;
  width: 1px;
  z-index: 1;

  &::after {
    border-bottom: 10px solid var(--color-black);
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    content: '';
    height: 0;
    position: absolute;
    transform: translate(-9.5px, -9px) rotate(180deg);
    width: 0;
  }
}

.VideoEditor-minimap .playhead.is-hidden {
  opacity: 0.25;
}

.VideoEditorClip-surface {
  bottom: 0;
  height: 100%;
  padding: 2px 0;
  position: absolute;
  z-index: 4;
}

.VideoEditorClip-surface:hover {
  .VideoEditorClip-resizeUI {
    animation: none;
    display: block;
    opacity: 1;
  }
}

.VideoEditor-overlays {
  height: 65px;
  margin-bottom: 8px;
  position: relative;
}

.VideoOverlays-clippingSvg {
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}

.VideoOverlays-clipBackground {
  clip-path: url('#VideoEditorOverlays-svgPath');
}

.VideoEditor-filmstrip {
  display: block;
  height: 96px;
  position: relative;
  width: 100%;
}

.VideoEditorFilmstrip-placeholder {
  align-items: center;
  background-color: var(--color-black);
  background-image: linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee),
    linear-gradient(to right, #ececee, #ececee);
  background-position:
    5% 5%,
    15% 5%,
    25% 5%,
    35% 5%,
    45% 5%,
    55% 5%,
    65% 5%,
    75% 5%,
    85% 5%,
    95% 5%,
    5% 95%,
    15% 95%,
    25% 95%,
    35% 95%,
    45% 95%,
    55% 95%,
    65% 95%,
    75% 95%,
    85% 95%,
    95% 95%;
  background-repeat: no-repeat;
  background-size:
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%,
    5% 8%;
  display: flex;
  justify-content: center;
}

.VideoEditorFilmstrip-placeholderLabel {
  align-items: center;
  background: rgb(233 233 233 / 20%);
  color: var(--color-white);
  display: flex;
  font-size: var(--fontSize-xs);
  height: 68%;
  justify-content: center;
  position: relative;
  width: 97%;
}

.VideoEditorFilmstrip-selectionContainer {
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 3;
}

.VideoEditorFilmstrip-selection {
  @size: 2px;

  animation: stroke 0.2s linear infinite;
  fill: none;
  shape-rendering: geometricPrecision;
  stroke: #fff;
  stroke-dasharray: @size * 3;
  stroke-dashoffset: @size * 3 * 2;
  stroke-width: @size;
  vector-effect: non-scaling-stroke;

  @keyframes stroke {
    to {
      stroke-dashoffset: 0;
    }
  }
}

.VideoEditorFilmstrip-clippingSvg {
  height: 100%;
  position: absolute;
  width: 100%;
}

.VideoEditorFilmstrip-clips,
.VideoEditorFilmstrip-images {
  display: flex; // keeps the image boxes 96px tall.
  height: 96px;
  pointer-events: none;
}

.VideoEditorFilmstrip-clips {
  bottom: 0;
  clip-path: url('#VideoEditorFilmstrip-svgPath');
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.VideoEditorFilmstrip-placeholder,
.VideoEditorFilmstrip-clips > img,
.VideoEditorFilmstrip-images > img {
  object-fit: cover;
  pointer-events: none;
  width: 10%;
}

.VideoEditor-filmstrip.is-clipped {
  .VideoEditorFilmstrip-images {
    filter: brightness(0.4) saturate(0.4);
  }
}

.resizeHandle() {
  background: var(--color-blue5);
  border-radius: 50%;
  cursor: col-resize;
  height: 20px;
  position: absolute;
  top: calc(50% - 10px);
  transition: transform 100ms ease;
  width: 20px;

  &:hover {
    transform: scale(1.2);
  }
}

.VideoEditorClip-resizeUI {
  // display: none;
  animation: intro 200ms ease-out 200ms forwards;
  box-sizing: border-box;
  height: 100%;
  opacity: 1;
  outline: 2px solid var(--color-blue5);
  width: 100%;

  @keyframes intro {
    to {
      opacity: 0.3;
    }
  }
}

.VideoEditorClip-resizerLeft {
  .resizeHandle();

  left: -10px;
}

.VideoEditorClip-resizerRight {
  .resizeHandle();

  right: -10px;
}

// Overlay UI:

.VideoOverlay-layer {
  --index: auto;
  --transitionDuration-millis: 0;

  height: 100%;
  left: 0;
  object-fit: contain;
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  transition: opacity var(--transitionDuration-millis) ease;
  width: 100%;
  z-index: var(--index);
}

.VideoOverlay-layer.is-removing {
  visibility: hidden;
}

.VideoOverlay-image {
  display: block;
  height: auto;
  max-width: 100%;
  position: relative;
}

// Temporarily hide the Image Editor capability for overlays until it works properly.
.VideoEditor-OverlayUI .ImageEditor-open {
  opacity: 0;
  pointer-events: none;
}

// Place the RCIG's "Add +" container above the RCIG list.
.VideoEditor-OverlayUI .RCIG {
  display: flex;
  flex-direction: column-reverse;
  max-width: calc(var(--VideoEditor-asideWidth) - 2 * var(--gap-l));

  > :last-child {
    margin-bottom: var(--gap-m);
  }
}

// Reverse the order of the items to mirror what the User percieves as the z-index stacking order.
.VideoEditor-OverlayUI .RCIG-list {
  display: flex;
  flex-direction: column-reverse;
}

// Hide's the ability to "soft-remove" since its not feasible for this version of the UI.
.VideoEditor-OverlayUI .RCIG-item.is-removing,
.VideoEditor-ClippingUI .RCIG-item.is-removing {
  display: none;
}

.VideoEditor-OverlayUI .RCIG-addSelect {
  display: flex;
}

.VideoOverlay-layoutUI {
  display: grid;
  grid-gap: var(--gap-xs);
  grid-template-columns: repeat(3, minmax(90px, 1fr));
  grid-template-rows: repeat(3, minmax(40px, 60px));
  margin-top: var(--gap-l);
  width: 100%;
}

.VideoOverlay-layout-item {
  background: var(--color-gray4);
  cursor: pointer;

  &:hover {
    background: var(--Input-focusColor);
  }

  // Adds a "play" icon to the center cell to suggest a video player.
  &:nth-child(5n) {
    display: flex;

    &::after {
      .Icon;

      align-items: center;
      color: var(--color-white);
      content: 'play_circle_filled';
      display: flex;
      flex: 1;
      justify-content: center;
    }
  }
}

.VideoOverlay-layout-item.is-selected {
  background: var(--color-dominant6);
}

.VideoEditor-InputOverlay.is-overlay-ready {
  // Reveals certain form inputs once the file has been uploaded.
  .CIG-row[visible],
  .CIG-row[data-name$='/opacity'] {
    display: block;
  }

  // Temporarily hides the "scale" control on Overlay objects until we figure out a better UX.
  .CIG-row.scale {
    display: none;
  }
}

.VideoOverlay-fadeEffect-group {
  display: flex;
  justify-content: space-between;
  position: relative;
}

// Clipping UI

.VideoEditor-resetButton {
  .Link.is-red;
  .Text.is-s;

  align-items: center;
  display: block;
  margin: var(--gap-l) 0 0 0;

  &::before {
    .Icon;
    .Icon.is-s;

    content: 'refresh';
    margin-right: var(--gap-xs);
  }
}

// Hides certain RCIG UI from the Clipping tab
.VideoEditor-ClippingUI ol[data-sortable-input-name$='/clippings'] {
  .CIG-note {
    display: none;
  }
}

.VideoEditor-ClippingUI .RCIG-controls {
  display: none;
}

// Component Overrides:
.FilePreview-actions > *:not(:first-child) {
  margin-left: var(--gap-m);
}

// Remove the margin from the CIGs within the Overlay tab because it breaks the layout.
.VideoEditor-OverlayUI .CIG-row:only-child.is-unlabeled > .CIG-large > .CIG {
  margin-right: unset;
}

// Hides all the CIGs from the original form except the one for uploading a file.
.VideoEditor-InputOverlay .CIG-row:not([data-name$='/file']) {
  display: none;
}

// Un-hide the inputs in a Popup/Shared overlay.
.Popup .VideoEditor-InputOverlay .CIG-row:not([data-name$='/file']) {
  display: initial;
}

// Un-hides the width/height inputs for now until we redesign the UI.
.VideoEditor-InputOverlay .CIG-row[data-name$='/heightPercent'],
.VideoEditor-InputOverlay .CIG-row[data-name$='/widthPercent'] {
  display: initial;
}

.CIG-row:only-child.is-unlabeled::before {
  box-shadow: none;
}

.CIG-row:only-child.is-unlabeled > .CIG-large > .CIG {
  padding-right: var(--CIG-padding);
}

.VideoEditor-OverlayUI,
.VideoEditor-ColorUI {
  .CIG-note {
    display: none;

    .VideoEditor-OverlayUI .RCIG-addSelect {
      display: flex;
    }
  }

  .CIG-row::after {
    display: none;
  }
}

// noUiSlider style overrides:

.is-slideable {
  --Thumb-diameter: 1.5em;
  --Thumb-color: var(--color-dominant6);
  --Thumb-hover-color: var(--Input-focusColor);
  --Track-color: var(--color-gray3);
  --Track-height: 4px;
}

.is-slideable.noUi-target {
  background: none;
  border: none;
  box-shadow: none;
  height: 20px;
}

.is-slideable.noUi-target::after {
  background: var(--Track-color);
  content: '';
  height: var(--Track-height);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}

.is-slideable.noUi-horizontal .noUi-handle {
  background: var(--Thumb-color);
  border: none;
  border-radius: 100%;
  box-shadow: none;
  height: var(--Thumb-diameter);
  left: calc(-1 * var(--Thumb-diameter) / 2);
  top: -2px;
  width: var(--Thumb-diameter);

  &::before,
  &::after {
    content: none;
  }

  &:hover {
    background: var(--Thumb-hover-color);
  }
}

.is-slideable .noUi-connect {
  background: rgb(14 128 184 / 44%);
}

html:not([dir='rtl']) .is-slideable.noUi-horizontal .noUi-handle {
  right: calc(-1 * var(--Thumb-diameter) / 2);
}

// Plyr Style overrides

.VideoEditor-stage {
  --Video-controlsHeight: 50px;

  .plyr--video {
    display: flex;
    flex-direction: column;
  }

  .plyr__controls {
    height: var(--Video-controlsHeight);
  }

  .plyr--video .plyr__controls {
    background: var(--color-blue7);
    order: 2;
    padding: 10px;
    position: relative;
  }

  .plyr__volume {
    display: flex;
  }

  .plyr__video-wrapper {
    height: 100%;
    max-height: calc(
      100vh - var(--Page-headerBottom) - var(--Video-controlsHeight) -
        var(--VideoEditor-bottomHeight)
    );
    width: 100%;
  }

  .plyr video {
    height: 100%;
    object-fit: contain;
    width: 100%;
  }
}
