/*
 * Spreed WebRTC.
 * Copyright (C) 2013-2014 struktur AG
 *
 * This file is part of Spreed WebRTC.
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero 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 Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
 *
 */

.buddyPictureUpload {
  position: relative;

  .loader {
    left: 90px;
    position: absolute;
    z-index: 1;

    .fa-spin {
      color: $componentfg4;
    }
  }

  >p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .showUploadPicture {
    background-color: $componentbg;
    border: 1px solid $bordercolor;
    height: 200px;
    line-height: 200px;
    margin-bottom: 10px;
    overflow: hidden;
    position: relative;
    text-align: center;
    user-select: none;
    width: 200px;

    &.imgData {
      background-color: #000;

      .chooseUploadPicture {
        display: none;
      }
    }

    .chooseUploadPicture {
      color: $componentfg4;
      left: 0;
      margin: 0 auto;
      position: absolute;
      right: 0;
      z-index: 1;
    }

    .fa {
      color: $componentbg;
      opacity: .8;
      text-shadow: 0 0 5px #000;
    }
  }

  .preview {
    left: 0;
    position: relative;
    top: 0;
  }

  .imageUtilites {
    line-height: 30px;
    position: absolute;
    visibility: hidden;
    width: 200px;
    z-index: 1;

    .fa {
      cursor: pointer;
      font-size: 40px;
      height: 50px;
      width: 50px;
    }
  }

  .showUploadPicture.imgData:hover .imageUtilites {
    visibility: visible;
  }

  .moveHorizontal {
    position: relative;
    top: -4px;
  }

  .moveVertical {
    left: 158px;
    position: absolute;
  }

  .resize {
    position: relative;
    top: 108px;
  }
}