@import 'helpers/variables', 'helpers/placeholders', 'helpers/mixins',
  'helpers/basic', 'helpers/media', 'helpers/animations', 'components/left-menu';

.main-video-wrap,
.main-canvas-wrap,
.ui-container {
  @extend %full-screen;
  position: absolute;
  top: 0;
  left: 0;
}

.main-video-wrap {
  background-color: #333;
  video {
    width: 100%;
    height: 100%;
  }
}
.main-canvas-wrap {
  canvas {
    width: 100%;
    height: 100%;
  }
}

.canvas-content {
  $prefix: &;

  &__record-wrap {
    position: absolute;
    top: 50%;
    right: 20px;
    background-color: rgba(255, 255, 255, 0.3);
    color: black;
    display: flex;
    flex-flow: column nowrap;
    align-items: center;
    padding: 10px 20px;
    border-radius: 5px;
    transform: translatey(-50%);
    transition: all 0.5s ease-in-out;
    &.not-visible {
      transform: translate(20px, -50%);
      opacity: 0;
    }
    button {
      display: flex;
      flex-flow: column;
      align-items: center;
      background-color: transparent;
      border: none;
      outline: none;
    }
    * > span {
      display: block;
    }
    .ball {
      border-radius: 100%;
      width: 3em;
      height: 3em;
      background: #ccc;
      margin-bottom: 5px;
    }
    &.recording {
      .ball {
        background-color: red;
        @include animation('record-pulse', '4s ease-in-out infinite') {
          0% {
            background-color: red;
          }
          50% {
            background-color: gray;
          }
          100% {
            background-color: red;
          }
        }
      }
    }
  }
  &__menu-wrap {
    label {
      display: block;
    }
    button {
      margin: 5px;
      padding: 5px 10px;
    }
    #{$prefix} {
      &__error-cam {
        font-size: 0.8em;
        text-align: center;
        margin: 5px;
        padding: 10px;
        color: red;
        border: 1px dashed lightcoral;
      }
    }
  }
}
