/*
This file is part of the Meeds project (https://meeds.io/).
Copyright (C) 2020 Meeds Association
contact@meeds.io
This program is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser 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
Lesser General Public License for more details.
You should have received a copy of the GNU Lesser General Public License
along with this program; if not, write to the Free Software Foundation,
Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
*/

/*=================uiComposer =================*/

.uiComposer {
  margin-bottom: 30px;

  div#ActivityComposerExt {
    height: 30px;

    .ActivityComposerExtItem {
      height: 30px;
      margin-left: 15px ~'; /** orientation=lt */ ';
      margin-right: 15px ~'; /** orientation=rt */ ';

      a {
        color: @textLightColor;
        &:hover {
          color: @linkColorHover;
        }
        i.uiIconSocLightGray {
          padding-right: 4px ~'; /** orientation=lt */ ';
          padding-left: 4px ~'; /** orientation=rt */ ';
        }
      }

      &.ActivityComposerExtItemSelected {
        height: 30px;
        box-sizing: content-box;
        border-bottom: 1px solid @linkColorHover;

        a {
          color: @linkColorHover;
          font-weight: bold;
          i.uiIconSocLightGray {
            color: @linkColorHover;
            font-weight: bold;
          }
        }
      }
    }
  }

  .desktop-input {
    margin-bottom: 10px;

    .blastInputPeople, .blastInputSpace {
      textarea {
        display: none;
      }
    }
  }
}


/*======= User Profile and Space Popup ==========*/
.profile-popup #loading-indicator {
  background: @baseBackground;
  position: relative;
  width: 30px;
  height: 37px;
  margin: 2px auto;
  display: block;
}

.profile-popup #loading-text {
  padding: 12px;
  text-align: center;
}

.profile-popup .blockG{
  position:absolute;
  background-color: @baseBackground;
  width:3px;
  height:12px;
  -moz-border-radius:4px 4px 0 0;
  -webkit-border-radius:4px 4px 0 0;
  -webkit-transform:scale(0.4);
  -webkit-animation-name:fadeG;
  -webkit-animation-duration:0.5599999999999999s;
  -webkit-animation-iteration-count:infinite;
  -webkit-animation-direction:linear;
  -moz-transform:scale(0.4);
  -moz-animation-name:fadeG;
  -moz-animation-duration:0.5599999999999999s;
  -moz-animation-iteration-count:infinite;
  -moz-animation-direction:linear;
  border-radius:4px 4px 0 0 ~'; /** orientation=lt */ ';
  border-radius:4px 0 0 4px ~'; /** orientation=rt */ ';
  -o-transform:scale(0.4);
  -o-animation-name:fadeG;
  -o-animation-duration:0.5599999999999999s;
  -o-animation-iteration-count:infinite;
  -o-animation-direction:linear;
  -ms-transform:scale(0.4);
  -ms-animation-name:fadeG;
  -ms-animation-duration:0.5599999999999999s;
  -ms-animation-iteration-count:infinite;
  -ms-animation-direction:linear;
}

.profile-popup #rotateG_01{
  left:0 ~'; /** orientation=lt */ ';
  right:0 ~'; /** orientation=rt */ ';
  top:13px;
  -webkit-animation-delay:0.20999999999999996s;
  -webkit-transform:rotate(-90deg);
  -moz-animation-delay:0.20999999999999996s;
  -moz-transform:rotate(-90deg);
  -o-animation-delay:0.20999999999999996s;
  -o-transform:rotate(-90deg);
  -ms-animation-delay:0.20999999999999996s;
  -ms-transform:rotate(-90deg);
}

.profile-popup #rotateG_02{
  left:4px ~'; /** orientation=lt */ ';
  right:4px ~'; /** orientation=rt */ ';
  top:5px;
  -webkit-animation-delay:0.27999999999999997s;
  -webkit-transform:rotate(-45deg);
  -moz-animation-delay:0.27999999999999997s;
  -moz-transform:rotate(-45deg);
  -o-animation-delay:0.27999999999999997s;
  -o-transform:rotate(-45deg);
  -ms-animation-delay:0.27999999999999997s;
  -ms-transform:rotate(-45deg);
}

.profile-popup #rotateG_03{
  left:13px ~'; /** orientation=lt */ ';
  right:13px ~'; /** orientation=rt */ ';
  top:1px;
  -webkit-animation-delay:0.35s;
  -webkit-transform:rotate(0deg);
  -moz-animation-delay:0.35s;
  -moz-transform:rotate(0deg);
  -o-animation-delay:0.35s;
  -o-transform:rotate(0deg);
  -ms-animation-delay:0.35s;
  -ms-transform:rotate(0deg);
}

.profile-popup #rotateG_04{
  right:4px ~'; /** orientation=lt */ ';
  left:4px ~'; /** orientation=rt */ ';
  top:5px;
  -webkit-animation-delay:0.41999999999999993s;
  -webkit-transform:rotate(45deg);
  -moz-animation-delay:0.41999999999999993s;
  -moz-transform:rotate(45deg);
  -o-animation-delay:0.41999999999999993s;
  -o-transform:rotate(45deg);
  -ms-animation-delay:0.41999999999999993s;
  -ms-transform:rotate(45deg);
}

.profile-popup #rotateG_05{
  right:0 ~'; /** orientation=lt */ ';
  left:0 ~'; /** orientation=rt */ ';
  top:13px;
  -webkit-animation-delay:0.48999999999999994s;
  -webkit-transform:rotate(90deg);
  -moz-animation-delay:0.48999999999999994s;
  -moz-transform:rotate(90deg);
  -o-animation-delay:0.48999999999999994s;
  -o-transform:rotate(90deg);
  -ms-animation-delay:0.48999999999999994s;
  -ms-transform:rotate(90deg);
}

.profile-popup #rotateG_06{
  right:4px ~'; /** orientation=lt */ ';
  left:4px ~'; /** orientation=rt */ ';
  bottom:3px;
  -webkit-animation-delay:0.5599999999999999s;
  -webkit-transform:rotate(135deg);
  -moz-animation-delay:0.5599999999999999s;
  -moz-transform:rotate(135deg);
  -o-animation-delay:0.5599999999999999s;
  -o-transform:rotate(135deg);
  -ms-animation-delay:0.5599999999999999s;
  -ms-transform:rotate(135deg);
}

.profile-popup #rotateG_07{
  bottom:0;
  left:13px ~'; /** orientation=lt */ ';
  right:13px ~'; /** orientation=rt */ ';
  -webkit-animation-delay:0.63s;
  -webkit-transform:rotate(180deg);
  -moz-animation-delay:0.63s;
  -moz-transform:rotate(180deg);
  -o-animation-delay:0.63s;
  -o-transform:rotate(180deg);
  -ms-animation-delay:0.63s;
  -ms-transform:rotate(180deg);
}

.profile-popup #rotateG_08{
  left:4px ~'; /** orientation=lt */ ';
  right:4px ~'; /** orientation=rt */ ';
  bottom:3px;
  -webkit-animation-delay:0.7s;
  -webkit-transform:rotate(-135deg);
  -moz-animation-delay:0.7s;
  -moz-transform:rotate(-135deg);
  -o-animation-delay:0.7s;
  -o-transform:rotate(-135deg);
  -ms-animation-delay:0.7s;
  -ms-transform:rotate(-135deg);
}

@-webkit-keyframes fadeG{
  0%{ background-color:@baseColor }
  100% { background-color:@baseColor }
}

@-moz-keyframes fadeG{
  0% { background-color:@baseColor }
  100%  { background-color: @baseBackground
  }
}

.activityReactionsContainer {
  .likersNumber {
    color: @baseColorLight;
    cursor: pointer;
  }
  .likersList {
    border-bottom: 1px solid @greyColorLighten1Opacity1;
    &:after {
      content: "\e77e";
      font-family: "PLF-FONT-ICONS";
      color: @primaryColor;
      font-size: 18px;
      position: absolute;
      left: 30px ~'; /** orientation=lt */ ';
      right: 30px ~'; /** orientation=rt */ ';
      top: 30px;
    }
  }
  .KudosList {
    border-bottom: 1px solid @greyColorLighten1Opacity1;
    &:after {
      content: "\eb6d";
      font-family: "PLF-FONT-ICONS";
      color: @secondaryColor;
      font-size: 18px;
      position: absolute;
      left: 30px ~'; /** orientation=lt */ ';
      right: 30px ~'; /** orientation=rt */ ';
      top: 30px;
    }
  }
  .activityReactionsTitle {
    .v-tabs-bar {
      height: auto;
      .v-tabs-slider-wrapper {
        display: none;
      }
    }
    .v-tab {
      width: auto;
      min-width: inherit;
      font-weight: bold;
      font-size: 16px;
      text-transform: capitalize;
      &:hover {
        &:before {
          display: none;
        }
      }
    }
    .text-color.v-tab {
      color: @textColor !important;
    }
    .KudosNumberLabel {
      color: @secondaryColor;
    }
    .allLikers {
      padding: 0 12px;
      color: @primaryColor;
      .uiIconThumbUp {
        font-size: 22px;
        padding-right: 5px ~'; /** orientation=lt */ ';
        padding-left: 5px ~'; /** orientation=rt */ ';
        margin-top: -5px;
        &:before {
          color: @primaryColor;
        }
      }
    }
    .allKudos {
      color: @secondaryColor;
      .uiIconKudos {
        font-size: 18px;
        padding-right: 4px;
          &:before {
            color: @secondaryColor!important;
          }
        }
      }
    }
  .activityLikersAndKudosDrawer {
    .seeMoreReactionsContainer {
      display: flex;
      min-height: 30px;
      .seeMoreLikers {
        width: 30px;
        position: relative;
        height: 30px;
        &:before {
          content: "";
          width: 100%;
          height: 100%;
          position: absolute;
          background: @baseColorMedium;
          border-radius: 50%;
          opacity: .5;
          z-index: 1;
        }
        .seeMoreLikersDetails {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          text-align: center;
          width: 30px;
          height: 30px;
          color: white;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          font-size: 15px;
          font-weight: bold;
          z-index: 1;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  .uiComposer .blastContainer {
    .share-buttons-down {
      .btn-primary {
        float: left ~'; /** orientation=lt */ ';
        float: right ~'; /** orientation=rt */ ';
        margin-right: 10px ~'; /** orientation=lt */ ';
        margin-left: 10px ~'; /** orientation=rt */ ';
      }
      .btn-cancel {
        display: block;
        visibility: visible;
      }
    }

    .uiComposerLink {
      .buttonLink, .inputLink {
        display: block;
        width: inherit;
      }
      .buttonLink {
        padding-top: 0px;

        .btn {
          width: 100%;
        }
      }
    }
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  .uiComposer {
    .share-buttons-top {
      display: block;
      visibility: visible;

      float: right ~'; /** orientation=lt */ ';
      float: left ~'; /** orientation=rt */ ';
    }
    .blastContainer {
      padding-top: 5px;
      .share-buttons-down {
        display: none;
      }
    }
  }
}

.activity-comment-head-time {
  height: 19px;
}

.activity-comment-background {
  background: @commentBackgroundColor;
}

.activityRichEditor {
  position: relative;
  textarea {
    width: 100%;
    border-radius: 10px;
    min-height: 142px;
    resize: none !important;
  }
  .cke_bottom {
    box-sizing: border-box;
    border-top: none;
    background-color: transparent;
    padding-left: 2px ~'; /** orientation=lt */ ';
    padding-right: 2px ~'; /** orientation=rt */ ';
    height: 30px;
    .cke_button_icon {
      filter: opacity(0.2);
    }
    .cke_button__bulletedlist_icon {
      background-image: none!important;
      font-family: "PLF-FONT-ICONS";
  
      &:before {
        content: "\e69b";
      }
    }
  }
  .cke_focus .cke_button_icon {
    filter: opacity(0.4);
  }
  .activityCharsCount {
    position: absolute;
    bottom: 8px;
    right: 10px ~'; /** orientation=lt */ ';
    left: 10px ~'; /** orientation=rt */ ';
    color: #adadad;
  }
  .uiIconMessageLength {
    font-size: 14px;
    color: #2eb58c;
  }
  .uiIconMessageLength:before {
    content: "\e910";
  }
  .tooManyChars {
    color: #bc4343;
  }
  .tooManyChars .uiIconMessageLength {
    color: #bc4343;
  }
  .loadingRing {
    position: absolute;
    display: block;
    width: 30px;
    height: 30px;
    top: 50%;
    left: 50% ~'; /** orientation=lt */ ';
    right: 50% ~'; /** orientation=rt */ ';
    transform: translate(-50%, -50%);
    color: @primaryColor;
  }
}


.box {
  .border-radius(3px 3px 3px 3px);
  .box-shadow(0px 1px 1px @primaryBackgroundHover);
  padding: 7px 15px 7px 45px ~'; /** orientation=lt */ ';
  padding: 7px 45px 7px 15px ~'; /** orientation=rt */ ';
  margin: 10px 0;
  border: 1px solid @borderColor;
  .box-sizing(border-box);
  display: block;
}

// Like Comment Popup
#likersDetail {
  .liker {
    display: flex;
    clear: both;
    height: 34px;
    line-height: 34px;
    padding: 10px 0px;

    .likerAvatar {
      float: left ~'; /** orientation=lt */ ';
      float: right ~'; /** orientation=rt */ ';
      width: 34px;
      img {
        border-radius: 3px;
        max-height: 34px;
        max-width: 34px;
      }
    }

    .likerName {
      display: inline-block;
      height: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-weight: bold;
      margin: 0 8px;
                        flex: 1;
    }

    .likeClick {
      margin-left: auto ~'; /** orientation=lt */ ';
      margin-right: auto ~'; /** orientation=rt */ ';
    }
  }
}

@media (min-width: @minTabletWidth) {
  #likersDetail {
    .likeClick {
      .btn {
        span {
          display: block;
        }
        i {
          display: none;
        }
      }
    }
  }
}

@media (min-width: 481px) and (max-width: 767px) {
  #likersDetail {
    .likeClick {
      .btn {
        width: 20px;
        &.confirmConnection {
          background: #5bb75b linear-gradient(to bottom, #62c462, #51a351) repeat-x;
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        }
        span {
          display: none;
        }
        i {
          display: block;
        }
      }
    }
  }
}

@media (max-width: 480px) {
  #likersDetail {
    .likerName {
      max-width: 165px;
    }

    .likeClick {
      .btn {
        width: 20px;
        padding: 6px 10px;
        &.confirmConnection {
          background: #5bb75b linear-gradient(to bottom, #62c462, #51a351) repeat-x;
          border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
        }
        span {
          display: none;
        }
        i {
          display: block;
        }
      }
    }
  }
}

#ActivityStream {
  max-width: ~"calc(100vw - 22px)";
  margin: 0 auto;

  .activity-thumbnail-box {
    width: 100%;
    max-width: 100%;
  }
  .newActivitiesButtonContainer {
    position: sticky;
    top: 23px;
    z-index: 1000;

    .newActivitiesButton {
      box-shadow: ~"0px -3px 1px -2px rgb(0 0 0 / 20%), 0px -2px 2px 0px rgb(0 0 0 / 14%), 0px -1px 5px 0px rgb(0 0 0 / 12%) !important";
      transform: translateX(-50%) translateY(-50%);
      z-index: 1;
    }
  }
  .postContent {
    ul, ol {
      margin: 0 0 10px 25px ~'; /** orientation=lt */ ';
      margin: 0 25px 10px 0 ~'; /** orientation=rt */ ';
      padding: 0;
      li {
        list-style-position: inside;
      }
    }
    ul li {
      list-style-type: disc;
    }
    blockquote {
      margin: 20px 0 7px 20px ~'; /** orientation=lt */ ';
      margin: 20px 20px 7px 0 ~'; /** orientation=rt */ ';
      background: @baseBackground;
      border-left: 5px solid @primaryColor ~'!important; /** orientation=lt */ ';
      border-right: 5px solid @primaryColor ~'!important; /** orientation=rt */ ';
      padding: 10px 0 10px 10px ~'!important; /** orientation=lt */ ';
      padding: 10px 10px 10px 0 ~'!important; /** orientation=rt */ ';
      p {
        margin-bottom: 0;
        font-size: 14px!important;
        font-weight: 300;
        line-height: 1.25;
        font-style: italic;
        color: @textColor!important;
      }
    }
  }
}