// Core variables and mixins
@import "../bootstrap/functions";
@import "../bootstrap/mixins";
@import "../bootstrap-extended/mixins";

// Load variable overrides
@import "../core/variables/bootstrap-variables";
@import "../bootstrap/variables";

@import "../core/variables/components-variables";
/* Todo Application css */
/*----------------------*/
.sidebar {
    width: 270px !important;
  }
  
  .content-right {
    width: calc(100% - 270px) !important;
  }
  
  .todo-application {
    border-radius: $border-radius;
  
    .border-bottom,
    .border,
    .form-control {
      border-color: $todo-border-color !important;
    }
  
  
    //   Sidebar menu area starts
    .sidebar {
      position: inherit;
  
      .todo-sidebar {
        /* todo-sidebar menu */
        width: $menu-expanded-width;
        height: calc(100vh - 8.5rem);
        border-top-left-radius: $border-radius;
        border-bottom-left-radius: $border-radius;
  
        // Close Icon
        .sidebar-close-icon {
          position: absolute;
          right: .25rem;
          top: .25rem;
          cursor: pointer;
          font-size: 1.25rem;
          visibility: hidden;
        }
  
        .todo-app-menu {
          width: 100%;
          padding: .5rem 0;
  
          // sidebar menu add task
          .add-task {
            padding: 1px 1.5rem;
            margin-bottom: 0.25rem;
          }
  
          // sidebar menu list
          .sidebar-menu-list {
            padding: 0 1.5rem;
            position: relative;
            height: calc(100% - 5.4rem);
  
            .filter-label {
              font-family: $font-family-monospace;
              letter-spacing: 1px;
              color: $todo-filters-color;
            }
  
            .list-group {
              .list-group-item {
                box-shadow: none;
                padding: .8rem 1rem;
                color: $body_color;
                font-weight: 500;
                background-color: transparent;
                border-radius: 0.25rem !important;
  
                &.active {
                  background-color: $primary !important;
  
                }
              }
            }
          }
        }
      }
    }
  
    .todo-new-task-sidebar {
      /* todo-new-task-sidebar */
      height: calc(100vh - 8.3rem);
      width: 400px;
      border-radius: $border-radius;
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      background-color: $white;
      position: absolute;
      transform: translateX(120%);
      transition: all .3s ease-in-out;
      z-index: 8;
      right: 2.6rem;
      bottom: 0;
  
      // Compose new task
      &.show {
        transform: translateX(9%);
      }
  
      // specific card and card body style for new task sidebar
      .card {
        .card-header {
          .task-header {
            height: 32px;
          }
  
          .mark-complete-btn {
            i {
              top: 0;
            }
          }
  
          // dropdown arrow hide
          .dropdown-toggle {
            color: $gray-600;
  
            &::after {
              display: none;
            }
          }
        }
  
        .card-body {
          padding: 1.53rem;
        }
      }
  
      // close icon
      .close-icon {
        position: absolute;
        top: 13px;
        right: 10px;
        outline: none;
  
        i {
          font-size: 1.75rem;
        }
      }
  
      // Textarea for new task heading specific style
      .task-title {
        font-family: $font-family-monospace;
        font-size: 1.1rem;
      }
  
      .assigned {
        .avatar {
          .avatar-content {
            height: 30px;
          }
        }
  
        // select2 for user select
        .select-box {
          .select2-container {
            .select2-selection--single {
              border-color: $todo-border-color !important;
  
              &:hover {
                border: 1px solid $border-color !important;
                outline: none;
              }
  
              &:focus {
                outline: none;
                border-color: $border-color !important;
                box-shadow: none !important;
              }
  
              // dropdown arrow
              .select2-selection__arrow {
                display: none;
              }
  
              .select2-selection__rendered {
                padding: 0;
              }
            }
  
            &.select2-container--open {
              .select2-selection--single {
                border-color: $todo-border-color !important;
              }
            }
          }
        }
  
        // date picker
        .date-picker {
          .pickadate {
            &:hover {
              border-color: $border-color;
            }
  
            &:focus {
              border-color: $border-color;
              box-shadow: none;
            }
          }
        }
      }
  
      //  select2 for add badge in new task
      .select2-assign-label {
        +.select2-container {
          &.select2-container--disabled {
            .select2-selection--multiple {
              background-color: transparent;
              border: none;
              box-shadow: none !important;
            }
          }
  
          .select2-selection__rendered {
            .select2-selection__choice {
              border-radius: 2rem;
  
              span {
                color: $gray-600 !important;
              }
  
              // select2 options specific style
              &[title="Frontend"] {
                background-color: #E2ECFF !important;
                color: $primary !important;
              }
  
              &[title="Backend"] {
                background-color: #D2FFE8 !important;
                color: $success !important;
              }
  
              &[title="Issue"] {
                background-color: #FFDEDE !important;
                color: $danger !important;
              }
  
              &[title="Design"] {
                background-color: #FFEED9 !important;
                color: $warning !important;
              }
  
              &[title="Wireframe"] {
                background-color: #CCF5F8 !important;
                color: $info !important;
              }
            }
          }
        }
      }
  
      // quill editor for comment and description
      .snow-container {
        position: relative;
  
        .ql-container {
          &.ql-snow {
            border: none;
  
            .ql-tooltip {
              left: 0 !important;
            }
          }
        }
  
        .ql-toolbar {
          border: none;
        }
  
        // Comment btn
        .comment-btn {
          box-shadow: 0 2px 4px 0 rgba($primary, 0.6);
        }
      }
  
      // Description Editor
      .ql-editor {
        min-height: 70px;
        padding-left: 0;
        padding-right: 0;
  
        &.ql-blank::before {
          left: 0;
        }
      }
  
      // Comment Editor
      .comment-editor {
        .ql-editor {
          min-height: 120px;
        }
      }
  
      .avatar {
        background-color: $todo-avatar-bg;
        border-radius: 50%;
        cursor: pointer;
        color: $white;
        margin: 5px;
  
        i {
          right: 17px;
          bottom: 18px;
        }
      }
    }
  
    // Right content area starts
    .content-right {
      .content-wrapper {
        padding: 0;
      }
  
      .todo-app-list-wrapper {
        border-left: 1px solid $border-color;
  
        .todo-fixed-search {
          /* Todo Fixed search */
          padding: .51rem .1rem;
          border-bottom: 1px solid $border-color;
          background-color: $white;
          border-top-right-radius: $border-radius;
  
          input {
            border: 0;
            font-family: $font-family-sans-serif;
  
            &:focus {
              box-shadow: none;
            }
          }
  
          // list sorting
          .todo-sort {
            .sorting {
              padding: .6rem 1.2rem;
              border: 1px solid $border-color;
            }
          }
        }
  
        .sidebar-toggle {
          /* Sidebar toggle icon */
          cursor: pointer;
          margin: 0.5rem 0.99rem;
          line-height: 1;
  
          i {
            font-size: 1.75rem;
          }
        }
  
        .todo-app-list {
          .todo-task-list {
            position: relative;
            height: calc(100vh - 12.12rem);
            border-bottom: 1px solid $border-color;
  
            // task list wrapper
            .todo-task-list-wrapper {
              margin: 0;
              background-color: $white;
              transition: all .3s ease-in-out;
  
              .todo-item {
                /* todo item */
                cursor: pointer;
                animation: fadeIn 0.5s linear;
                animation-fill-mode: both;
                position: relative;
                padding: .8rem 1rem .4rem .5rem;
                border-top: 1px solid $border-color;
  
                // task list area for heading and checkbox
                .todo-title-area {
                  width: 70%;
  
                  i {
                    font-size: 1.5rem;
                  }
                }
  
                // badge text
                .badge {
                  text-transform: uppercase;
                }
  
                // task list dragabble handle
                .handle {
                  transition: all .3s ease-out;
                  opacity: 0;
                  margin-right: .2rem;
                  cursor: move;
                }
  
                &:hover {
                  box-shadow: 0 0 10px 0 rgba(58, 70, 93, 0.25);
                  border-color: transparent;
  
                  .handle {
                    opacity: 1;
                    transition: all .35s ease 0s !important;
                  }
                }
  
                // task title
                .todo-title {
                  font-family: $font-family-monospace;
                  color: $gray-600;
                }
  
                // task favorite and delete
                .todo-item-favorite,
                .todo-item-delete {
                  color: $todo-star-color;
                }
              }
  
              // Set delay per List Item
              @for $i from 1 through 5000 {
                li:nth-child(#{$i}) {
                  animation-delay: .1s * $i;
                }
              }
            }
  
            // completed class use when task is completed
            .completed {
              .todo-title {
                text-decoration: line-through;
              }
            }
          }
        }
  
        .no-results {
          /* When searching for item and no-results found */
          display: none;
          padding: 1.5rem;
          text-align: center;
  
          &.show {
            display: block;
          }
        }
      }
  
      .app-content-overlay {
        /* Content area overlay */
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        position: absolute;
        display: block;
        z-index: 4;
        visibility: hidden;
        opacity: 0;
        transition: all .3s ease;
  
        &.show {
          visibility: visible;
          transition: all .3s ease;
          opacity: 1;
          background-color: rgba($black, 0.2);
          border-radius: .25rem;
        }
      }
    }
    // horizontal menu nav
  &.horizontal-layout{
    height: auto !important;
    .sidebar{
      .todo-sidebar{
        height: calc(100vh - 16.5rem) ;
        .todo-app-menu {
          .sidebar-menu-list{
            height: calc(100% - 2.4rem) ;
          }
        }
      }
    }
    .content-right .todo-app-list-wrapper .todo-app-list .todo-task-list{
      height: calc(100vh - 17.5rem) ;
    }
    .todo-new-task-sidebar{
      height: calc(100vh - 13.7rem) ;
      bottom: 0.1rem ;
      position: absolute ;
    }
    // horizontal menu
    &.horizontal-menu-padding {
      .content-right .todo-app-list-wrapper .todo-app-list .todo-task-list{
        height: calc(100vh - 19rem);
      }
      .todo-new-task-sidebar{
        height: calc(100vh - 15.2rem);
      }
      .content-header{
        margin-bottom: 0;
      }
    }
  }
  
  }
  
  // Keyframe animation
  @keyframes fadeIn {
    0% {
      opacity: 0;
      top: 100px;
    }
  
    75% {
      opacity: 0.5;
      top: 0px;
    }
  
    100% {
      opacity: 1;
    }
  }
  
  @include media-breakpoint-down(xs) {
  
    // sidebar menu position set on extra small screen
    .todo-application {
  
      // new task sidebar style for exra small screen
      .todo-new-task-sidebar {
        width: auto;
        right: calc(100% - 88%) !important;
  
        &.show {
          transform: translateX(8%) translateY(1px);
        }
  
        .assigned {
          flex-wrap: wrap;
        }
      }
    }
  }
  
  @include media-breakpoint-down(sm) {
  
    // sidebar menu close btn show on small screen
    .todo-application {
      .todo-sidebar {
  
        .sidebar-close-icon {
          visibility: visible !important;
        }
      }
  
      .todo-new-task-sidebar {
        right: 2.4rem !important;
      }
    }
  }
  
  @include media-breakpoint-down(md) {
    .todo-application {
      .app-content {
        .sidebar-left {
          .todo-sidebar {
            /* sidebar menu position on medium screeen */
            transform: translateX(-130%);
            transition: all .3s ease-in-out;
            background-color: $white;
            left: 0;
            position: absolute;
            z-index: 5;
            bottom: 0px;
            height: calc(100vh - 8.4rem);
          }
  
          &.show {
            .todo-sidebar {
              transform: translateX(0);
            }
          }
        }
  
        // right side content style
        .content-right {
          width: 100% !important;
  
          .todo-app-list-wrapper {
            border-left: 0;
          }
        }
  
        .todo-app-list {
          .todo-task-list {
            position: relative;
            height: calc(100vh - 12.9rem);
          }
        }
      }
    }
  }
  
  @media screen and (max-width:675px) {
    .todo-task-list-wrapper {
  
      // task list content wrap in specific screen
      .todo-item {
        .todo-title-wrapper {
          flex-wrap: wrap;
  
          .todo-title-area {
            width: 100% !important;
          }
        }
      }
    }
  }
  
  @media (max-width: 349.98px) {
    .todo-application {
      .sidebar {
  
        // sidebar menu width on specific screen
        .todo-sidebar {
          width: 230px;
        }
      }
    }
  }
  @media (max-width: 1200px){
    // horizontal layout
    .todo-application{
      &.horizontal-menu-padding{
        .app-content{
        .todo-task-list{
          height: calc(100vh - 13.6rem);
        }
        .todo-sidebar{
          height: calc(100vh - 9.6rem);
        }
        .todo-new-task-sidebar{
        height: calc(100vh - 9.7rem);
        bottom: 0rem;
        }
        .sidebar-left{
          .todo-sidebar{
            height: calc(100vh - 9.6rem);
          }
        }
        .content-right .todo-app-list-wrapper .todo-app-list .todo-task-list{
          height: calc(100vh - 13.6rem);
        }
      }
      }
    }
  
      // horizontal menu nav
    .todo-application{
      &.horizontal-layout{
        height: auto !important;
        .sidebar{
          .todo-sidebar{
            height: calc(100vh - 8.35rem) ;
            .todo-app-menu {
              .sidebar-menu-list{
                height: calc(100% - 2.4rem) ;
              }
            }
          }
        }
        .content-right .todo-app-list-wrapper .todo-app-list .todo-task-list{
          height: calc(100vh - 12.12rem) ;
        }
        .todo-task-list{
        }
        .todo-new-task-sidebar{
          height: calc(100vh - 8.3rem) ;
        }
      }
    }
  }
  
  // material specific css
  span {
    font-size: 1rem;
  }
  
  .todo-sort {
    .btn {
      &:focus {
        color: $black;
      }
    }
  }