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

.conversation-input-bar {
  position: relative;
  display: flex;
  width: 100%;
  min-height: var(--conversation-input-min-height);
  box-sizing: content-box;
  flex-direction: column;

  &__input {
    z-index: 10;
    display: flex;
    flex-wrap: wrap;
    padding-right: 8px;
    background-color: var(--input-bar-bg);

    &--editing,
    &--editing .editor-container {
      background-color: var(--text-input-editing);
      transition: background-color var(--animation-timing-faster) var(--ease-in-quad);
    }
  }
}

.conversation-input-bar-text-placeholder::before {
  padding-left: 8px;
  color: var(--text-input-placeholder);
  content: attr(data-placeholder);
  .label-xs;
}

.conversation-input-bar-text {
  .accent-selection;
  .reset-textarea;

  width: 100%;
  max-width: var(--conversation-max-width);
  height: auto;
  min-height: var(--conversation-input-line-height);
  max-height: var(--conversation-input-max-height);
  flex: 1 1;
  margin-top: calc((var(--conversation-input-min-height) - var(--conversation-input-line-height)) / 2);
  margin-bottom: calc((var(--conversation-input-min-height) - var(--conversation-input-line-height)) / 2);
  background-color: transparent;
  font-weight: inherit;
  line-height: var(--conversation-input-line-height);
  overflow-x: hidden;
  overflow-y: auto;
  text-rendering: optimizeLegibility;

  .input-mention {
    color: var(--accent-color);
  }

  &::placeholder {
    .label-xs;

    padding-left: 8px;
    color: var(--gray-70);

    body.theme-dark & {
      color: var(--gray-60);
    }
  }

  &--accent,
  &--accent::placeholder {
    color: var(--accent-color) !important;
  }
}

.controls-left {
  .flex-center;

  width: var(--conversation-message-sender-width);
  height: var(--conversation-input-min-height);
}

.controls-center {
  position: relative;
  display: flex;
  width: 100%;
  flex: 1 1;
  align-items: center;
}

.controls-right {
  .list-unstyled;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin: 0;

  &.controls-right-shrinked {
    min-width: auto;
  }

  .conversation-button {
    padding: 0;
  }
}

.controls-right-button {
  .button-icon-primary;

  display: flex;

  @media (max-width: 768px) {
    width: 75px;
    margin-bottom: 5px;
  }

  body.theme-dark &:focus-visible,
  &:focus-visible {
    border: 1px solid var(--accent-color-focus);
    outline: none;
  }

  &.no-radius {
    border-radius: 0;
  }

  &--send,
  body.theme-dark &--send {
    width: 40px;
    height: 40px;
    align-self: center;
    border: 0;
    border-radius: 50%;
    margin-left: 10px;
    background-color: var(--accent-color-500);
    color: var(--white);

    > svg {
      margin-left: 4px;
    }

    > * {
      display: flex;
    }

    &[disabled]:not([disabled='false']) {
      background-color: var(--gray-70);
      color: var(--white);
    }

    &:hover {
      background-color: var(--button-primary-hover);
    }

    &:focus-visible {
      border: 1px solid var(--accent-color-800);
      background-color: var(--button-primary-hover);
      outline: 1px solid var(--accent-color-800);
    }

    &:active {
      border: 1px solid var(--accent-color-focus);
      background-color: var(--accent-color);
    }

    body.theme-dark & {
      color: #34383b;

      &[disabled]:not([disabled='false']) {
        color: #34383b;
      }

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

// paste modal
@keyframes paste-fade-in {
  to {
    opacity: 1;
  }
}

.conversation-input-bar-paste-modal {
  .full-screen;

  display: flex;
  animation-duration: var(--animation-timing-slow);
  animation-fill-mode: forwards;
  animation-name: paste-fade-in;
  animation-timing-function: var(--ease-out-expo);
  background-color: var(--input-bar-bg);
  opacity: 0;
}

.conversation-input-bar-paste-icon {
  margin-right: 16px;

  .file-icon {
    display: flex;
  }

  svg path {
    fill: var(--foreground);
  }
}

.conversation-input-bar-paste-image {
  .square(16px);

  object-fit: contain;
}

.conversation-input-bar-paste-send {
  .circle(32px);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;

  background-color: var(--accent-color);
  cursor: pointer;
  line-height: 0;

  .send-icon {
    margin-left: 2px;

    svg path {
      fill: #fff;
    }
  }
}

.conversation-input-bar-paste-cancel {
  margin-right: 32px;
  fill: var(--foreground);
  line-height: 0;
}

.conversation-input-bar-emoji-list {
  position: fixed;
  z-index: @z-index-context;
  display: block;
  border: 0.5px solid var(--background-fade-16);
  border-radius: 8px;
  background-color: var(--modal-bg);
  box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.08);
  font-size: var(--font-size-small);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-xl);
}

.input-bar__reply {
  display: flex;
  width: 100%;
  padding: 12px 16px 10px 30px;
  animation: reply-box 0.15s ease-out;
  background-color: var(--input-bar-bg);
  fill: var(--main-color);

  .close-icon {
    margin-top: 4px;
    cursor: pointer;
    fill: var(--background);
  }

  &__body {
    display: flex;
    overflow: hidden;
    max-width: 640px;
    margin-right: 40px;
    margin-left: 28px;
    font-weight: 400;
  }

  &__vert-bar {
    width: 4px;
    height: 100%;
    border-radius: 2px;
    margin-right: 12px;
    background-color: var(--message-quote-bg);
  }

  &__text {
    overflow: hidden;
  }

  &__sender-name {
    display: flex;
    align-items: center;
    font-size: var(--font-size-small);
    font-weight: var(--font-weight-bold);

    .edit-icon {
      width: 8px;
      height: 8px;
      margin-left: 4px;
      fill: var(--background-fade-40);
    }
  }

  &__message {
    overflow: hidden;
    max-width: var(--conversation-message-max-width);
    margin-top: 4px;
    font-size: var(--font-size-medium);
    font-weight: var(--font-weight-regular);
    text-overflow: ellipsis;
    white-space: nowrap;

    &__text {
      height: 1.2em;
      line-height: 1.0625rem;

      pre {
        margin: 0;
        text-overflow: ellipsis;
      }
    }

    .message-mention {
      .text-medium;
    }

    &__image img {
      max-height: 40px;
      border-radius: 2px;

      &[src=''],
      &[src='#'],
      &:not([src]) {
        width: 40px;
        height: 40px;
        background-color: var(--foreground);
      }
    }
  }

  &__icon {
    margin-right: 8px;
    svg {
      max-width: 12px;
      max-height: 12px;
      fill: currentColor;
    }

    & + span {
      font-size: var(--font-size-xsmall);
      text-transform: uppercase;
    }
  }
}

@keyframes reply-box {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}