@import '~app/styles/init';

.picture-uploader {
  > .picture-url {
    margin-top: 1rem;
    overflow: hidden;
  }

  > .picture-group {
    border: 1px dashed #b8b8b8;
    width: 100%;
    height: auto;
    min-height: 50px;
    position: relative;
    cursor: pointer;
  
    &.uploading {
      cursor: no-drop;
      opacity: .9;
    }
  
    .picture-wrapper {
      width: 100%;
      height: 100%;
      overflow: hidden;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  
    img {
      max-width: 100%;
      max-height: 100%;
    }
  
    .remove-icon {
      display: none;
      position: absolute;
      font-size: 35px;
      line-height: 29px;
      background: $default;
      cursor: pointer;
      color: $primary;
      top: -11px;
      right: -11px;
      height: 28px;
      width: 28px;
      border-radius: 50%;
  
      &:before {
        line-height: 26px;
      }
      &:hover {
        color: $danger;
      }
    }
  
    a.change-picture {
      display: none;
      width: 100%;
      background: rgba(0, 0, 0, 0.7);
      transition: all 200ms ease-in-out;
      color: $default-text;
      text-decoration: none;
      position: absolute;
      bottom: 0;
      left: 0;
      line-height: 32px;
      text-align: center;
    }

    &:hover {
      .remove-icon {
        display: block;
      }
      .change-picture {
        display: block;
      }
    }
  
    .loading {
      width: 100%;
      height: 100%;
      left: 0;
      display: flex;
      position: absolute;
      justify-content: center;
      align-items: center;
      background-color: rgba(210, 210, 210, 0.9);
  
      .spinner {
        width: 60px;
        height: 60px;
        position: relative;
      }
  
      .load-progress {
        position: absolute;
        bottom: 5%;
        color: black;
      }
    }
  
    .double-bounce1, .double-bounce2 {
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: #fff;
      opacity: 0.6;
      position: absolute;
      top: 0;
      left: 0;
  
      -webkit-animation: sk-bounce 2.0s infinite ease-in-out;
      animation: sk-bounce 2.0s infinite ease-in-out;
    }
  
    .double-bounce2 {
      -webkit-animation-delay: -1.0s;
      animation-delay: -1.0s;
    }
  
    @-webkit-keyframes sk-bounce {
      0%, 100% {
        -webkit-transform: scale(0.0)
      }
      50% {
        -webkit-transform: scale(1.0)
      }
    }
  
    @keyframes sk-bounce {
      0%, 100% {
        transform: scale(0.0);
        -webkit-transform: scale(0.0);
      }
      50% {
        transform: scale(1.0);
        -webkit-transform: scale(1.0);
      }
    }
  }
}
