$library-prefix: 'evc-';

$hightlight-color-1: '#7abb00';
$hightlight-color-2: '#fed100';
$dark-color: '#202020';
$splitter-color: '#ffffff';

.#{$library-prefix}container {
  position: relative;
  margin: 0 auto;
  background-color: black;

  *, *:before, *:after {
    box-sizing: content-box;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }

  *:focus {
    outline: none;
  }

  *.full-screen-mode {
    margin: 0 auto;
    max-width: calc(100vh * 16 / 9 - 100px);
  }

  &.loaded-metadata {
    background-color: transparent;

    .#{$library-prefix}wrapper {
      .#{$library-prefix}left-video-wrapper {
        border-right: 2px dashed #{$splitter-color};
      }
    }
  }

  &:not(.loaded-metadata) {
    .#{$library-prefix}media-controls {
      display: none;
    }
  }

  .#{$library-prefix}wrapper {

    .#{$library-prefix}left-stats, .#{$library-prefix}right-stats {
      position: absolute;
      white-space: nowrap;
      min-width: 133px;
      background-color: rgba(0, 0, 0, 0.4);
      padding: 5px;
      -webkit-border-radius: 2px;
      -moz-border-radius: 2px;
      border-radius: 2px;
      top: 10px;
      color: white;
      font-size: 0.85em;

      p {
        margin: 0;
      }
    }
    .#{$library-prefix}left-stats {
      left: 10px;
    }
    .#{$library-prefix}right-stats {
      right: 10px;
    }
    .#{$library-prefix}left-stats.hidden, .#{$library-prefix}right-stats.hidden {
      display: none;
    }
    .#{$library-prefix}left-stats.moving-split, .#{$library-prefix}right-stats.moving-split {
      pointer-events: none;
      opacity: .6;
    }

    .#{$library-prefix}left-video-wrapper {
      overflow: hidden;
      position: absolute;
      top: 0;
      z-index: 1;
      width: 50%;

      .#{$library-prefix}left-video {
        display: block;
        width: 200%;
        position: relative;
      }
    }

    .#{$library-prefix}right-video-wrapper {
      width: 100%;
      position: relative;

      .#{$library-prefix}right-video {
        display: block;
        width: 100%;
      }
    }

    .#{$library-prefix}quality-selector-popup-wrapper {
      position: relative;
      z-index: 2;

      &.moving-split {
        pointer-events: none;
        opacity: .6;
      }

      .#{$library-prefix}quality-selector-popup {
        padding: 10px;
        position: absolute;
        grid-gap: 10px;
        bottom: 10px;
        right: 6px;
        color: white;
        display: grid;
        background-color: rgba(1, 1, 1, .7);
        grid-template-columns: 1fr 1fr;
        font-family: monospace;
        transform: scale(.0000001);
        transition: transform .2s ease-out;

        p {
          margin: 0;
          border-bottom: 1px dashed white;
        }

        &.visible {
          transform: scale(1);
        }

        ul {
          padding: 0;
          margin: 0;
          list-style: none;

          li {
            cursor: pointer;

            &.current {
              color: #{$hightlight-color-1};
            }

            &:not(.current) {
              &:hover {
                color: #{$hightlight-color-2};
              }
            }
          }
        }
      }
    }
  }

  .#{$library-prefix}loading-spinner {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity .5s ease-out;

    &.hidden {
      opacity: 0;
      display: none;
    }

    div {
      width: 60px;
      height: 60px;
      background-color: #{$hightlight-color-1};
      position: relative;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      background-size: cover;
      animation: spin 1s ease-in-out infinite;

      @keyframes spin {
        0% {
          transform: rotate(0);
        }
        75% {
          transform: rotate(360deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }

      div {
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 250 250'><path style='fill:%23ffd100' d='m 113.15986,245.59595 c -16.900001,-4.2 -31.900001,-8.4 -50.200001,-14.3 l -1.4,-0.5 1.9,-3.8 c 21.6,-41.4 33.4,-60 54.400001,-99.9 -17.4,-35.2 -42.100001,-73.3 -56.700001,-105.8 l -0.4,-1.3 1.4,-0.5 c 7.9,-2.9 53.500001,-15.7 56.100001,-15.7 0.2,0 0.5,0.3 0.8,0.7 18.6,31.6 36.8,62.7 51.8,88.2 18.3,31.2 18.7,31.8 18.3,32.5 -40.3,71.2 -23.2,41.8 -68.9,120.8 -0.6,0.4 -4.2,0.2 -7.1,-0.4 z' /></svg>");
        width: 40px;
        height: 40px;
        position: relative;
        left: 10px;
        top: 10px;
        animation: pulse 1s ease-out infinite;

        @keyframes pulse {
          0% {
            opacity: 1;
            transform: scale(.8);
          }
          50% {
            opacity: .5;
            transform: scale(1);
          }
          100% {
            opacity: 1;
            transform: scale(.8);
          }
        }
      }
    }
  }

  .#{$library-prefix}media-controls {
    padding: 10px;
    display: grid;
    grid-column-gap: 10px;
    grid-template-columns: 24px 24px 1fr 24px 24px;
    align-items: center;

    .#{$library-prefix}play-pause {
      border: 0;
      background: transparent;
      box-sizing: border-box;
      width: 0;
      height: 24px;
      border-color: transparent transparent transparent #{$dark-color};
      transition: .2s all ease;
      cursor: pointer;

      // paused state
      border-style: solid;
      border-width: 12px 0 12px 18px;

      // playing state
      &.playing {
        border-style: double;
        border-width: 0 0 0 18px;
      }

      &:hover {
        border-color: transparent transparent transparent #{$hightlight-color-1};
      }
    }

    .#{$library-prefix}reload {
      cursor: pointer;
      width: 18px;
      height: 18px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      border-width: 3px;
      border-style: solid;
      border-color: #{$dark-color} #{$dark-color} #{$dark-color} transparent;
      position: relative;
      transition: .2s all ease;

      &:hover {
        border-top-color: #{$hightlight-color-1};
        border-right-color: #{$hightlight-color-1};
        border-bottom-color: #{$hightlight-color-1};
        div {
          border-color: transparent transparent transparent #{$hightlight-color-1};
        }
      }

      & > div {
        transition: .2s all ease;
        position: absolute;
        border-style: solid;
        border-color: transparent transparent transparent #{$dark-color};
        border-width: 5px 0 5px 10px;
        transform: rotate(138deg);
        top: -1px;
        left: -5px;
      }
    }

    .#{$library-prefix}seek-bar {
      height: 4px;
      background-color: #{$dark-color};
      position: relative;
      cursor: pointer;

      .#{$library-prefix}seek-bar-inner {
        width: 0%;
        height: 100%;
        background-color: #{$hightlight-color-1};
        position: absolute;
      }
    }

    .#{$library-prefix}quality-icon {
      position: relative;
      width: 12px;
      height: 12px;
      margin-bottom: 4px;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      border-radius: 5px;
      cursor: pointer;
      border: 4px solid #{$dark-color};

      &:hover, &.active {
        border-color: #{$hightlight-color-1};
        &:before {
          background: #{$hightlight-color-1};
        }
      }

      &:before {
        content: "";
        position: absolute;
        width: 4px;
        height: 15px;
        background: #{$dark-color};
        bottom: -9px;
        right: -3px;
        transform: rotate(-45deg);
      }
    }

    .#{$library-prefix}full-screen {
      vertical-align: middle;
      box-sizing: border-box;
      display: inline-block;
      border: 4px solid #{$dark-color};
      width: 24px;
      height: 24px;
      position: relative;
      cursor: pointer;

      &:hover {
        border-color: #{$hightlight-color-1};
      }

      &:before, &:after {
        content: '';
        background: white;
        position: absolute;
      }

      &:before {
        width: 8px;
        height: 24px;
        left: 4px;
        top: -4px;
      }

      &:after {
        width: 24px;
        height: 8px;
        left: -4px;
        top: 4px;
      }
    }

    &.full-screen-mode {
      .#{$library-prefix}play-pause {
        border-color: transparent transparent transparent white;
        &:hover {
          border-color: transparent transparent transparent #{$hightlight-color-1};
        }
      }

      .#{$library-prefix}reload {
        border-color: white white white transparent;
        & > div {
          border-color: transparent transparent transparent white;
        }

        &:hover {
          border-top-color: #{$hightlight-color-1};
          border-right-color: #{$hightlight-color-1};
          border-bottom-color: #{$hightlight-color-1};
          div {
            border-color: transparent transparent transparent #{$hightlight-color-1};
          }
        }
      }

      .#{$library-prefix}seek-bar {
        background-color: white;
      }

      .#{$library-prefix}quality-icon {
        border: 4px solid white;
        &:before {
          background: white;
        }
        &:hover, &.active {
          border-color: #{$hightlight-color-1};
          &:before {
            background: #{$hightlight-color-1};
          }
        }
      }

      .#{$library-prefix}full-screen {
        border: 4px solid white;
        &:before, &:after {
          background: black;
        }
        &:hover {
          border-color: #{$hightlight-color-1};
        }
      }
    }
  }
}
