@import './apps/commudle-admin/src/assets/styles/variables';

.session-page-video {
  @apply com-bg-white;
  margin-top: 0;
  border: none;
  border-radius: $border-10;
  //overflow: hidden;
  height: calc(100vh - 56px - 16px - 16px);

  &.internal-link {
    background-color: $black;
  }

  &.external-link {
    height: 150px;

    nb-card-body {
      .video-stream {
        position: initial;
        height: initial;
      }
    }
  }

  nb-card-body {
    padding: 0;
    height: inherit;
    overflow: unset;

    .session-page-info {
      gap: $space-12;
      position: absolute;
      top: 8px;
      right: 8px;
      z-index: 1;

      .ring-container {
        position: relative;

        .circle {
          width: 15px;
          height: 15px;
          border-radius: 50%;
          background-color: $ultra-red;
        }

        .ring {
          width: 25px;
          height: 25px;
          border-radius: 50%;
          border: 3px solid $ultra-red;
          position: absolute;
          left: -5px;
          top: -5px;
          animation: pulsate 1s ease-out infinite;
          opacity: 0;
        }

        @keyframes pulsate {
          0% {
            transform: scale(0.1, 0.1);
            opacity: 0;
          }
          50% {
            opacity: 1;
          }
          100% {
            transform: scale(1.2, 1.2);
            opacity: 0;
          }
        }
      }

      .fullscreen-btn {
        border: none;
        color: $white;
        background-color: transparent;
        transition: all 0.2s ease-in-out;

        &:hover {
          background-color: rgba($spanish-gray, 0.4);
        }
      }
    }

    .video-stream {
      position: relative;
      top: 50%;
      transform: translateY(-50%);
      height: 100%;
      //height: min(calc(100vh - 56px - 16px - 16px), calc(100vw * 9 / 16));
      width: 100%;
      transition: width 0.7s ease-in-out;

      @media all and (min-width: $tab-width) {
        &.compressed {
          width: calc(100% - 300px - 36px);
        }
      }
    }
    .user-interactions-video {
      @apply md:com-right-1/2 #{!important};
    }

    .user-interactions {
      position: absolute;
      right: 60px;
      bottom: 8px;

      button {
        position: relative;
        border: none;
        height: 44px;
        width: 44px;
        margin: 0 $space-4;
        padding: $space-12;
        font-size: $fs-20;
        font-weight: $fw-400;
        color: $white;
        background-color: transparent;
        transition: all 0.2s ease-in-out;

        &.active {
          &::before {
            content: '';
            position: absolute;
            bottom: 40px;
            border-top: 12px solid $white;
            border-left: 12px solid transparent;
            border-right: 12px solid transparent;
          }
        }

        &:hover {
          background-color: rgba($spanish-gray, 0.4);
        }

        nb-badge {
          display: none;

          &.notification {
            display: initial;
          }
        }

        nb-icon {
          margin: 0;
        }
      }
    }

    .not-embedded-video {
      @apply com-right-0  md:com-right-[45%] com-top-0 #{!important};
    }
    .session-page-window {
      @apply com-bg-white;
      display: none;
      position: absolute;
      width: 328px;
      right: 0;
      top: 40px;
      bottom: 44px;
      margin: $space-16 $space-8;
      border-radius: $border-4;
      overflow: hidden;

      &.remove-overflow {
        overflow: unset;
      }

      &.open {
        display: block;
      }

      .actions {
        padding: $space-8;
        box-shadow: rgba(17, 17, 26, 0.1) 0 0 16px;

        .heading {
          @apply com-text-gunmetal;
          margin: 0;
          font-weight: $fw-500;
        }
      }

      app-session-page-details {
        &::ng-deep {
          nb-card {
            border-radius: 0;
            margin: $space-16 0 0;

            nb-card-body {
              padding: 0 $space-8 $space-8;
            }
          }
        }
      }
    }
  }

  &.fullscreen {
    position: fixed;
    margin: 0;
    border-radius: 0;
    height: 100vh;
    width: 100vw;
    top: 0;
    left: 0;
    z-index: 1050;
  }
}

@media all and (max-width: $tab-width) {
  .session-page-video {
    height: calc(100vh - 56px - 16px - 16px - 44px);
  }
}
