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

.start-ui-transition-fadein {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
  transition:
    visibility 0s,
    all var(--animation-timing-slow) var(--ease-out-expo) var(--animation-timing-fast);
  visibility: visible;
}

.start-ui-transition-fadeout {
  opacity: 0;
  pointer-events: none;
  transform: translateY(var(--start-ui-search-bar-offset));
  transition: visibility 0s;
  transition-delay: 0s;
  transition-duration: var(--animation-timing-fast);
  transition-property: all;
  transition-timing-function: var(--ease-in-expo);
  visibility: hidden;
}

.fade-in-out {
  &-enter {
    opacity: 0;
    transform: translateY(88px);
    transition: all 500ms var(--ease-out-expo);

    &&-active {
      opacity: 1;
      transform: translateY(0);
    }
  }
  &-exit {
    opacity: 1;
    transform: translateY(0);
    transition: all 300ms var(--ease-in-expo);

    &&-active {
      opacity: 0;
      transform: translateY(88px);
    }
  }
}

.slide-in-left {
  &-enter {
    opacity: 0;
    transform: translateX(24px);
    transition: all var(--animation-timing-slow) var(--ease-out-expo);

    &&-active {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

.right-column {
  animation: slide-left var(--animation-timing-fast) ease;
}

@keyframes slide-left {
  0% {
    transform: translateX(304px);
  }
  100% {
    transform: translateX(0);
  }
}

.right-to-left-enter,
.right-to-left-exit,
.left-to-right-enter,
.left-to-right-exit {
  position: absolute;
  top: 0;
}

// new
.right-to-left-enter {
  .panel__header {
    opacity: 0;
  }

  .panel__content,
  .panel__footer {
    transform: translateX(var(--panel-width));
  }
}

.right-to-left-enter-active {
  .panel__header {
    opacity: 1;
    transition: opacity var(--animation-timing-fast) var(--ease-out-quart);
  }

  .panel__content,
  .panel__footer {
    transform: translateX(0);
    transition: transform var(--animation-timing-fast) var(--ease-out-quart);
  }
}

.right-to-left-exit {
  .panel__header {
    opacity: 1;
  }

  .panel__content,
  .panel__footer {
    transform: translateX(0);
  }
}

.right-to-left-exit-active {
  .panel__header {
    opacity: 0;
    transition: opacity var(--animation-timing-fast) var(--ease-out-quart);
  }

  .panel__content,
  .panel__footer {
    transform: translateX(calc(var(--panel-width) * -1));
    transition: transform var(--animation-timing-fast) var(--ease-out-quart);
  }
}

.left-to-right-enter {
  .panel__header {
    opacity: 0;
  }

  .panel__content,
  .panel__footer {
    transform: translateX(calc(var(--panel-width) * -1));
  }
}

.left-to-right-enter-active {
  .panel__header {
    opacity: 1;
    transition: opacity var(--animation-timing-fast) var(--ease-out-quart);
  }

  .panel__content,
  .panel__footer {
    transform: translateX(0);
    transition: transform var(--animation-timing-fast) var(--ease-out-quart);
  }
}

.left-to-right-exit {
  .panel__header {
    opacity: 1;
  }

  .panel__content,
  .panel__footer {
    transform: translateX(0);
  }
}

.left-to-right-exit-active {
  .panel__header {
    opacity: 0;
    transition: opacity var(--animation-timing-fast) var(--ease-out-quart);
  }

  .panel__content,
  .panel__footer {
    transform: translateX(var(--panel-width));
    transition: transform var(--animation-timing-fast) var(--ease-out-quart);
  }
}

@keyframes fadeInUserHighlighting {
  0%,
  50% {
    background-color: var(--background-fade-0);
  }
  100% {
    background-color: var(--background-fade-8);
  }
}