@import (reference) './Icon';
@import (reference) url('./Reset.less');

/* ********************** */

/* TimedContentPlayerNote */

/* ********************** */

.TimedContentPlayerNote {
  --TimedContent-player-maxWidth: 500px;
  --TimedContent-player-maxHeight: 300px;

  padding-top: var(--gap-m);
  position: relative;
}

.inputContainer-TimedContentPlayerNote-player-visible .TimedContentPlayerNote {
  margin-bottom: calc(-1 * var(--gap-m));
  top: calc(-1 * var(--gap-xl));
}

.inputContainer-TimedContentPlayerNote-player-visible .Sortable,
.CIG-row[data-field='timedCompanions'] .Sortable {
  box-shadow: var(--shadow-1);
}

.inputContainer-TimedContentPlayerNote-player-visible ol > li,
.CIG-row[data-field='timedCompanions'] ol > li {
  border: none;
}

.TimedContentPlayerNote-player-close {
  color: var(--color-black);
  cursor: pointer;
  margin-bottom: var(--gap-m);
  text-align: right;
}

.TimedContentPlayerNote-player-close::after {
  .Icon;

  content: 'clear';
}

/* thumbnail */
.TimedContentPlayerNote-thumbnail-link {
  cursor: pointer;
  display: inline-block;
  position: relative;
}

.TimedContentPlayerNote-thumbnail-link::before {
  .Icon;

  color: var(--color-white);
  content: 'play_circle';
  font-size: calc(var(--fontSize-xxl) * 2);
  left: 50%;
  opacity: 0.8;
  position: absolute;
  text-shadow: 0 0 var(--gap-s) var(--color-black);
  top: 50%;
  transform: translate(-50%, -50%);
}

.TimedContentPlayerNote-thumbnail-link:hover::before {
  color: var(--color-gray2);
}

.TimedContentPlayerNote-thumbnail img {
  max-height: var(--TimedContent-player-maxHeight);
  max-width: var(--TimedContent-player-maxWidth);
}

.TimedContentPlayerNote-thumbnail-noimage {
  background-color: var(--color-black);
  display: block;
  height: var(--TimedContent-player-maxHeight);
  max-width: calc(100vw - var(--CIG-padding) * 2);
  width: var(--TimedContent-player-maxWidth);
}

/* player */
.TimedContentPlayerNote-player {
  display: none;
}

.TimedContentPlayerNote-player-close {
  display: block;
}

.TimedContentPlayerNote-player-frame {
  border: 1px solid var(--color-gray4);
  display: flex;
  flex-direction: column;
  height: auto;
  justify-content: center;
  overflow: hidden;
  width: 100%;
}

.TimedContentPlayerNote-player-frame > .frame {
  position: relative;
  text-align: center;
  white-space: nowrap;
}

/* player-control */
.TimedContentPlayerNote-player-control {
  display: none;
}

.inputContainer-TimedContentPlayerNote-player-visible
  .TimedContentPlayerNote-player-control {
  display: inherit;
}

/* TimedPreview */

.TimedContentPreview .TimedContentPlayerNote-player-frame {
  background-color: var(--color-black);
}

/* TimedCompanion */

.TimedCompanionSelector {
  display: inline-block;
}

.TimedCompanionSelector-player {
  background-color: var(--color-black);
}

.TimedCompanionSelector-controls {
  margin-top: var(--gap-m);
}

.TimedCompanionSelector-controls-timestamp {
  margin-left: var(--gap-m);
}

.TimedCompanionSelector .TimedContentPlayerNote-player-frame {
  background-color: transparent;
}

.TimedCompanionSelector .addButtonContainer {
  padding-top: var(--gap-m);
}

.TimedCompanionSelector .addButtonContainer .addButton {
  font-size: initial;
}

.Page-content.is-previewing .TimedContent-companions {
  display: block;
}

@media (@mq-xl) {
  .TimedContentPlayerNote {
    --TimedContent-player-maxWidth: 350px;
    --TimedContent-player-maxHeight: 250px;
  }

  .TimedContent-companions {
    display: grid;
    grid-template:
      'label label label' auto
      'note . companions' auto ~'/'
      minmax(0, 1fr) var(--gap-s) minmax(0, 1fr);

    & > .CIG-label {
      grid-area: label;
    }

    & > .CIG-note {
      grid-area: note;
    }

    & > .CIG-large {
      grid-area: companions;
      padding-top: var(--gap-m);
    }
  }
}

/* IframeToolPlayerServlet */

.TimedContentIframeToolPlayer {
  height: var(--TimedContent-player-maxHeight);
  position: relative;
}

.TimedContentIframeToolPlayer iframe {
  border-style: none;
  height: 100%;
  left: 0;
  max-width: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}
