/*
 * 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/.
 *
 */

@keyframes video-fade-in {
  to {
    opacity: 1;
  }
}

.video-calling-wrapper {
  position: relative;
  z-index: @z-index-video;
  display: flex;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background-color: var(--app-bg-secondary);
}

.video-calling {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  background-color: #323739;
}

// common
.video-element-overlay {
  .full-screen;
  .flex-center;

  background-color: fade(#000, 24%);
  color: #fff;
  pointer-events: none;
}

.video-element-remote {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 0 4px 0 4px;
  // fade in animation
  animation: video-fade-in var(--animation-timing-slower) var(--ease-out-quart) forwards;
  background-color: var(--app-bg-secondary);
  opacity: 0;
}

.video-element-remote-participant {
  .flex-center;

  height: 100%;
  background: #fff;
}

.video-message {
  .full-screen;
  .flex-center;

  color: #fff;
}

.video-title {
  display: flex;
  align-items: baseline;
  justify-content: center;
  background-color: var(--sidebar-bg);
  grid-column-start: 2;

  &__info-bar {
    .label-small-medium;
    padding: 5px 10px;
    border-radius: 6px;
    background-color: var(--accent-color);
    color: var(--app-bg-secondary);
  }
}

.video-remote-name {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video-remote-title {
  .heading-h3;
  overflow: hidden;
  margin: 0;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.video-controls {
  position: relative;
  width: 100%;
  background-color: var(--app-bg-secondary);
  transition: opacity 0.25s ease-in-out;

  &__item {
    position: relative;
  }

  &__centered-items {
    display: flex;
    justify-content: space-between;

    @media (max-width: 500px) {
      width: 100%;
      justify-content: space-around;
    }
  }

  &__fit-info {
    width: 100%;
    color: #fff;
    font-size: var(--font-size-xsmall);
    font-weight: var(--font-weight-regular);
    text-align: center;
    text-transform: uppercase;
  }

  .video-controls-emoji-bar {
    position: absolute;
    bottom: 130%;
    left: 50%;
    display: grid;
    padding: 0.4rem;
    border-radius: 12px;
    background-color: var(--inactive-call-button-bg);
    box-shadow: 0px 7px 15px 0 #0000004d;
    gap: 0.5rem;
    grid-template-columns: repeat(3, 1fr);
    transform: translateX(-50%);

    &::after {
      position: absolute;
      bottom: -0.5rem;
      left: 50%;
      width: 0;
      height: 0;
      border-top: 0.5rem solid var(--inactive-call-button-bg);
      border-right: 0.5rem solid transparent;
      border-left: 0.5rem solid transparent;
      content: '';
      transform: translateX(-50%);
    }

    button {
      .button-reset-default;
      padding: 0.5rem;
      border-radius: 1rem;
      font-size: 1.5rem;
      &:hover {
        background-color: var(--inactive-call-button-hover-bg);
      }

      &.disabled {
        cursor: not-allowed;
        opacity: 0.5;
      }
    }
  }

  &__wrapper {
    .list-unstyled;

    display: flex;
    width: 100%;
    justify-content: space-between;
    margin: 10px 0;

    @media (max-width: 680px) {
      justify-content: center;
    }
  }

  &__item__minimize {
    display: flex;
    min-width: 157px;
  }

  &__view-mode div[class$='-Control'] {
    display: none;
  }

  &__button_primary {
    .button-icon-primary;
  }

  &__button {
    .button-reset-default;
    position: relative;
    display: flex;
    width: 68px;
    height: 32px;
    align-items: center;
    justify-content: center;
    border-radius: 24px;
    margin: 0 10px;
    cursor: pointer;
    line-height: 0;

    @media (max-width: 500px) {
      margin: 0 5px;
    }

    &--small {
      width: 40px;
      border-radius: 12px;
    }

    &__label {
      position: absolute;
      bottom: -16px;
      left: 50%;
      margin: 0;
      color: var(--main-color);
      font-size: 11px;
      font-weight: var(--font-weight-regular);
      transform: translateX(-50%);
      white-space: nowrap;
    }

    &:focus-visible {
      outline: 2px solid var(--accent-color-focus);
    }

    &--red {
      border: 1px solid var(--red-500);
      background-color: var(--red-500);
      svg > path {
        fill: var(--app-bg-secondary);
      }
      &:hover {
        background-color: #9b000f;
        body.theme-dark & {
          background-color: #ff928d;
        }
        &:active {
          border: 1px solid #74000b;
          background-color: var(--red-500);
          body.theme-dark & {
            border: 1px solid #ffc9c6;
            background-color: var(--red-500);
          }
        }
      }
    }
  }
}

.video-controls {
  .emoji {
    position: fixed;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    animation:
      flyUp 4s linear forwards,
      fadeIn 1s;
    font-size: 1.75rem;
    gap: 0.1rem;
  }

  .emoji-text {
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    background-color: rgba(0, 0, 0, 0.804);
    color: white;
    font-size: 0.875rem;
    font-size: bold;
    font-weight: bold;
  }

  @keyframes flyUp {
    0% {
      bottom: 0;
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    75% {
      opacity: 1;
    }
    100% {
      bottom: 100%;
      opacity: 0;
    }
  }

  @keyframes fadeIn {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}

.video-controls .video-element-dark {
  color: #fff;
}

.device-toggle-button {
  .button-reset-default;
  position: absolute;
  top: -5px;
  left: 60px;
  width: 18px;
  height: 18px;
  border: 1px solid var(--inactive-call-button-border);
  border-radius: 50%;
  margin-bottom: 30px;
  background-color: var(--inactive-call-button-bg);
  cursor: pointer;
  line-height: 0;
  > svg {
    fill: var(--main-color);
  }
}