/**
 * This file is part of the Meeds project (https://meeds.io/).
 * Copyright (C) 2023 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.
 */

 @import "variables.less";
 @import "mixins.less";
 @import (css) "/platform-ui/skin/css/component/ImageCropper/cropper.min.css";
/*----------- Task comment Drawer CSS ---------------*/

#task-Drawer {
  .drawerHeader {
    .drawerTitle {
      justify-content: space-between!important;
      align-items: center!important;
      > * {
        flex: unset!important;
      }
      > span {
        margin-top: 6px;
      }
      #taskActionMenu {
        .uiThreeDotsIcon {
          cursor: pointer;
          .fas();
          .fa-ellipsis-v();
          font-size: 15px;
          margin-right: 6px ~'; /** orientation=lt */ ';
          margin-left: 6px ~'; /** orientation=rt */ ';
          &:before {
            color: @greyColorLighten1Default;
          }
        }
        .taskActionMenu {
          right: 60px ~'; /** orientation=lt */ ';
          left: 60px ~'; /** orientation=rt */ ';
          left: auto ~'!important; /** orientation=lt */ ';
          right: auto ~'!important; /** orientation=rt */ ';
          top: 45px!important;
          background: white;
          .v-list-item {
            min-height: 40px!important;
            cursor: pointer;
          }
        }
      }
      .drawerTitleAndProject {
        max-width: 300px;
        align-items: center;
        .uiArrowBAckIcon {
          cursor: pointer;
          color: @btnDisableColor!important;
          padding-right: 10px ~'; /** orientation=lt */ ';
          padding-right: 10px ~'; /** orientation=rt */ ';
          &:before {
            font-style: normal;
            font-size: 22px;
          }
        }
        .taskProjectName {
          .projectName {
            max-width: 200px;
          }
        }
      }
    }
    .drawerIcons {
      margin-left: 2px ~'!important; /** orientation=lt */ ';
      margin-right: 2px ~'!important; /** orientation=rt */ ';
    }
  }
  .taskProjectName {
    .inputTaskProjectName {
      box-shadow: none!important;
      border: none!important;
      .v-input__prepend-outer {
        margin-top: 8px;
        i {
          color: @primaryColor;
          font-size: 18px;
        }

      }
      .v-input__control {
        min-height: 27px!important;
        height: 27px;
        > .v-input__slot {
          box-shadow: none!important;
          padding: 0!important;
          .v-select__slot {
            label {
              color: @greyColorLighten1;
            }
            .v-select__selections {
              max-width: 90%!important;
            }
          }
        }
        .v-input__append-inner {
          display: none;
        }
      }
      .v-menu__content {
        position: fixed!important;
        max-width: 70%!important;
        left: 100px ~'!important; /** orientation=lt */ ';
        right: 100px ~'!important; /** orientation=rt */ ';
        top: 50px!important;
        &::-webkit-scrollbar {
          width: 5px;
        }
        &::-webkit-scrollbar-track {
          background: @primaryBackground;
        }
        &::-webkit-scrollbar-thumb {
          background: @greyColorLighten1;
        }
        &::-webkit-scrollbar-thumb:hover {
          background: @borderColorLight;
        }
        .v-list-item {
          min-height: 35px!important;
        }
      }
    }
  }
  .taskTitleAndMark {
    .task-name {
      .v-input__slot {
        &:before {
          border: none!important;
        }
        &:after {
          border: none!important;
        }
        textarea {
          border: none!important;
          width: 100%!important;
          padding: 2px 3px;
          line-height: 1.2em;
          font-size: 20px;
          color: @textColor!important;
          &::placeholder {
            font-size: 19px!important;
          }
          &:focus {
            box-shadow: none!important;
          }
        }
      }
    }
    .taskCompleted {
      textarea {
        text-decoration: line-through;
      }
    }
    .markAsCompletedBtn {
      color: @primaryColor!important;
    }
  }
  .lastUpdatedTask {
    color: @greyColorLighten1;
    font-style: italic;
    font-size: 14px;
    padding-left: 32px ~'; /** orientation=lt */ ';
    padding-right: 32px ~'; /** orientation=rt */ ';
    cursor: pointer;
  }
  .taskLabelsName {
    .inputTaskLabel{
      box-shadow: none!important;
      border: none!important;
      .v-input__prepend-outer {
        margin-top: 8px;
        i {
          color: @primaryColor;
          font-size: 18px;
        }
      }
      .v-input__control {
        min-height: 38px!important;
        > .v-input__slot {
          box-shadow: none!important;
          padding: 0!important;
          margin-bottom: 0!important;
          .v-select__slot {
            .v-select__selections {
              max-width: 100%!important;
            }
            label {
              color: @greyColorLighten1;
            }
          }
        }
        .v-input__append-inner {
          display: none;
        }
      }
    }
  }
  .datePickerMenu {
    .v-menu__content {
      right: 30px ~'!important; /** orientation=rt */ ';
      left: auto ~'!important; /** orientation=rt */ ';
    }
  }
  .taskAssignement {
    .taskAssignItem {
      .user-name {
        cursor: pointer;
      }
      .taskAssignBtn {
        .uiAddAssignIcon {
          margin-top: -4px !important;
          padding-right: 6px ~'; /** orientation=lt */ ';
          padding-left: 6px ~'; /** orientation=rt */ ';
          .fa();
          .fa-user-plus();
          &:before {
            color: @greyColorLighten1Default;
            font-size: 15px;
          }
        }
      }
    }
    .taskAssignMenu {
      position: relative;
      .v-menu__content {
        top: 10px!important;
        right: 30px ~'!important; /** orientation=rt */ ';
      }
    }
    .assignTaskMenu {
      .uiAssignToMeIcon {
        margin-top: -4px;
        .fa();
        .fa-user();
        &:before {
          padding-right: 6px ~'; /** orientation=lt */ ';
          padding-left: 6px ~'; /** orientation=rt */ ';
          font-size: 16px;
        }
      }
      .uiAddMeCoworkerIcon {
        margin-top: -4px;
        .fa();
        .fa-user-friends();
        &:before {
          font-size: 18px;
          padding-right: 8px ~'; /** orientation=lt */ ';
          padding-left: 8px ~'; /** orientation=rt */ ';
        }
      }
    }
    .identitySuggester {
      margin: 8px 12px !important;
      padding: 5px!important;
      &::-webkit-scrollbar {
        width: 5px;
      }
      &::-webkit-scrollbar-track {
        background: @primaryBackground;
      }
      &::-webkit-scrollbar-thumb {
        background: @greyColorLighten1;
      }
      &::-webkit-scrollbar-thumb:hover {
        background: @borderColorLight;
      }
      .v-input__control {
        .v-input__slot {
          height: auto!important;
          .v-select__slot {
            .v-select__selections {
              padding-left: 0 ~'!important; /** orientation=lt */ ';
              padding-right: 0 ~'!important; /** orientation=rt */ ';
              .identitySuggesterItem {
                margin-bottom: 3px!important;
              }
            }
          }
        }
      }
    }
  }
  .taskDates {
    max-width: 50%;
    padding-right: 10px ~'; /** orientation=lt */ ';
    padding-left: 10px ~'; /** orientation=rt */ ';
    .datePickerComponent {
      &:after {
        display: none!important;
      }
      input {
        max-width: 90%!important;
        min-height: auto;
        height: auto;
        line-height: 1em;
        margin: auto 0;
        padding-right: 10px ~'!important; /** orientation=lt */ ';
        padding-left: 10px ~'!important; /** orientation=rt */ ';
        padding-left: 2px ~'!important; /** orientation=lt */ ';
        padding-right: 2px ~'!important; /** orientation=rt */ ';
        border: none!important;
        box-shadow: none;
        box-sizing: border-box;
        &::placeholder {
          font-size: 16px!important;
        }
      }
    }
    .taskPlanDateCalender {
      .uiIconStartDate {
        color: @primaryColor;
        font-size: 24px;
      }
      .v-picker__actions.v-card__actions {
        border-top: 1px solid  @borderColor;
        margin-top: 4px;
        .dateFooter {
          width: 100%;
        }
      }
    }
    .taskDueDateCalender {
      .uiIconDueDate {
        &:before {
          color: @primaryColor;
          font-size: 24px;
        }
      }
      .v-picker__actions.v-card__actions {
        border-top: 1px solid  @borderColor;
        margin-top: 4px;
        .dateFooter {
          width: 100%;
        }
      }
    }
  }
  .taskStatusAndPriority {
    max-width: 50%;
    justify-content: space-between;
    .v-input__control {
      > .v-input__slot {
        box-shadow: none!important;
        padding: 0!important;
      }
    }
    .v-input__prepend-outer {
      margin-top: 8px;

      i {
        color: @primaryColor;
        font-size: 22px;
      }
    }
    .taskPriority, .taskStatus {
      max-height: 48px;
      min-height: 48px;
    }
    .taskPriority {
      .v-input__control {
        > .v-input__slot {
          justify-content: flex-end!important;
          .v-select__slot {
            .v-input__append-inner {
              position: absolute;
              width: 100%;
              height: 30px;
              i {
                position: absolute;
                right: 0 ~'; /** orientation=lt */ ';
                left: 0 ~'; /** orientation=rt */ ';
                top: 4px;
              }
            }
            .v-select__selections {
              margin-top: -6px;
              max-width: 84%!important;
              .v-select__selection {
                max-width: 100%;
                width: 100%;
                text-align: end;
                display: inline;
                margin-right: 0 ~'!important; /** orientation=lt */ ';
                margin-left: 0 ~'!important; /** orientation=rt */ ';
              }
            }
          }
        }
      }
      .v-menu__content {
        top: 40px !important;
        .v-list {
          padding: 0!important;
          .v-list-item {
            min-height: 40px;
            .v-list-item__content {
              padding: 0!important;
            }
          }
        }
      }
    }
    .taskStatus {
      .v-input__control {
        > .v-input__slot {
          justify-content: flex-end!important;
          .v-select__slot {
            i {
              font-size: 28px!important;
            }
            .v-input__append-inner {
              position: absolute;
              width: 100%;
              height: 30px;
              i {
                position: absolute;
                right: 0 ~'; /** orientation=lt */ ';
                left: 0 ~'; /** orientation=rt */ ';
              }
            }
            .v-select__selections {
              margin-top: -6px;
              max-width: 84%!important;
              .v-select__selection {
                max-width: 100%;
                width: 100%;
                text-align: end;
                display: inline;
                margin-right: 0 ~'!important; /** orientation=lt */ ';
                margin-left: 0 ~'!important; /** orientation=rt */ ';
              }
            }
          }
        }
      }
      .v-menu__content {
        top: 40px !important;
        .v-list {
          padding: 0!important;
          .v-list-item {
            min-height: 40px;
            .v-list-item__content {
              padding: 0!important;
            }
          }
        }
      }
    }
  }
  .taskDescription {
    position: relative;

    li {
      list-style-position: inside;
      list-style-type: inherit;
    }
    .taskDescriptionToShow {
      &:focus {
        outline-width: 0 !important;
      }
    }
    [contentEditable=true]:empty:not(:focus):before{
      content:attr(data-text);
      color: @greyColorLighten1Default;
      font-size: 16px;
    }
    #cke_descriptionContent {
      display: none;
    }
  }

  .taskDescription.active {
    .taskDescriptionToShow {
      display: none!important;
    }
    #cke_descriptionContent {
      display: block;
    }
  }
}

