/*
 * Wire
 * Copyright (C) 2018 Wire Swiss GmbH
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 *
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 * GNU General Public License for more details.
 *
 * You should have received a copy of the GNU General Public License
 * along with this program. If not, see http://www.gnu.org/licenses/.
 *
 */

.group-video-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.tile-wrapper {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
}

.group-video {
  position: relative;
  width: 100%;
  height: 100%;

  &__minimized-wrapper {
    position: relative;
    overflow: hidden;
    height: 168px;
    border-radius: 8px;
    margin-bottom: 8px;

    &--no-camera-access {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--foreground-fade-16);
      color: var(--background);
      font-size: var(--font-size-small);
      font-weight: 600;
      text-align: center;
      text-transform: uppercase;
    }

    &__overlay {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background-color: rgba(159, 161, 167, 0.4);
      color: var(--white);
      cursor: pointer;
      opacity: 0;
      transition: opacity var(--animation-timing-fast) var(--ease-out-quart);

      body.theme-dark {
        background-color: var(--background-fade-40);
      }

      svg {
        path {
          fill: currentColor;
        }
      }

      &:hover {
        opacity: 1;
      }
    }
  }

  &-grid {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    flex-wrap: wrap;
    justify-content: center;
    --rows: 1;
    --columns: 1;

    &__element {
      position: relative;
      overflow: hidden;
      width: calc(100% / var(--columns));
      height: calc(100% / var(--rows));
      box-sizing: border-box;
      padding: 0;
      border: none;
      background-color: inherit;

      &:focus {
        z-index: 1;
      }

      &__overlay {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border-radius: 8px;
        opacity: 0;
        transition: opacity 0.35s ease-in-out;
        &:hover {
          opacity: 1;
        }
        &__label {
          .label-small-medium;
          position: absolute;
          top: 7px;
          right: 7px;
          padding: 5px 10px;
          border-radius: 6px;
          background-color: var(--accent-color);
          color: var(--app-bg-secondary);
        }
      }

      &--empty {
        overflow: hidden;
        width: 0;
        height: 0;
      }

      &--rounded video {
        border-radius: 8px;
      }

      &-video {
        width: 100%;
        height: 100%;
        border-radius: 8px;
        object-fit: cover;
      }

      &__label {
        .label-small-medium;
        position: absolute;
        bottom: 0;
        left: 50%;
        display: flex;
        max-width: calc(100% - 16px);
        height: 20px;
        align-items: center;
        padding: 8px;
        border-radius: 3px;
        margin: 8px 0;
        background-color: var(--black);
        transform: translate(-50%);
        white-space: nowrap;

        &__icon {
          position: absolute;
          bottom: 0;
          left: 0;
          display: flex;
          padding: 4px;
          border-radius: 4px;
          margin: 8px;
          background-color: var(--app-bg-secondary);
          svg {
            width: 16px;
            & path {
              fill: var(--red-500);
            }
          }
        }

        &__name {
          overflow: hidden;
          text-overflow: ellipsis;
        }
      }
    }

    &__mute-overlay,
    &__pause-overlay {
      position: absolute;
      top: 0;
      left: 0;
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      background-color: var(--background-fade-16);
      transform: translateZ(0);

      svg path {
        fill: #fff;
      }

      &__label {
        z-index: 1;
        max-width: 50%;
        color: #fff;
        font-size: var(--font-size-medium);
        font-weight: var(--font-weight-bold);
        text-align: center;
      }

      .background {
        border-radius: 8px;
        transition: none;
      }
    }
  }

  &__thumbnail {
    position: absolute;
    z-index: 2;
    top: 12px;
    right: 12px;
    display: flex;
    overflow: hidden;
    width: 200px;
    max-width: 33%;
    height: 120px;
    max-height: 33%;
    border-radius: 4px;
    background-color: #54585a;
    box-shadow: 0 0 0 1px var(--gray-90);
    line-height: 0;

    &-video {
      width: 100%;
      border-radius: 4px;
      object-fit: cover;
    }
  }
}