@import "../../../themes/core/variables";
@import "../../../themes/theme/variable";
@import "../../../themes/theme/mixins";

.qms-select-department-tree-container {
  font-family: 'Open Sans', sans-serif;
  .mr10 {
    margin-right: 10px;
  }

  .mt5 {
    margin-bottom: 5px;
  }

  .mb5 {
    margin-top: 5px;
  }

  .w100 {
    width: 100%;
  }
  .h100{
    height: 100%;
  }

  .fw500{
    font-weight: 500 !important;
  }

  .text-right {
    text-align: right;
  }

  .mt20 {
    margin-top: 20px;
  }

  .d-flex{
    display: flex;
  }

  .align-items-center{
    align-items: center;
  }

  .justify-content-end {
    justify-content: flex-end;
  }

  .text-selected {
    color: black(0.6);
    font-size: 12px;
    line-height: 16px;
    margin-top: 1rem;
  }

  .input-field {
    display: flex;
    align-items: center;
    position: relative;
    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    ::ng-deep .mat-form-field-wrapper{
      padding-bottom: 8px !important;
    }
    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    ::ng-deep .mat-form-field-underline{
      bottom: 8px !important;
    }

    input.input-search {
      width: 100%;
      padding: 10px;
      outline: none;
      border: none;
      background: theme-apply($background-input-text);
    }

    .btn-search {
      cursor: pointer;
      vertical-align: middle;
      position: absolute;
      top: 50%;
      right: 10px;
      transform: translateY(-50%);
    }

    .line__divider {
      border-bottom: 1px solid #ccc;
      height: 1px;
      margin-top: 10px;
      min-width: 300px;
      max-width: 100%;
    }
  }

  .header-title {
    font-weight: 500;
    color: theme-apply($ws-text-primary);
    font-size: 16px;
    display: flex;
    align-items: center;
    .header-view{
      padding: 4px 0;
    }
  }

  .sticky-position{
    position: sticky;
    top: 0;
    left: 0;
    z-index: 1;
    background: #FFFFFF;
  }

  .header-view-tree{
    display: grid;
    grid-template-columns: 1fr 200px;
    column-gap: 2px;
    padding: 4px 12px 4px 0;
    .header-view:nth-child(1){
      padding-left: 12px;
    }
  }

  .tree-department-wrapper {
    padding-right: 4px;
    overflow: hidden;
    position: relative;
    transition: height .3s ease-in-out;
    .tree-view{
      &.active-mode-external-view{
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 200px;
        column-gap: 2px;
        .tree-view-main{
          &> .separate{
            height: 38px;
            &.h-0{
              height: 0;
            }
          }
          &:last-child{
            height: 100%;
            padding-left: 4px;
            position: relative;
            &::after{
              position: absolute;
              content: "";
              top: 0;
              bottom: -38px;
              left: 0;
              width: 1px;
              background: rgba(0, 0, 0, 0.12);
            }
          }
          .external-list-item-container{
            .node-external{
              overflow: hidden;
              transition: all .1s ease-in-out;
              .node-external-content {
                  padding: 5px 15px 5px 15px;
                  height: calc(100% - 2px);
                  color: theme-apply($default-color);
                  font-size: 14px;
                  display: flex;
                  align-items: center;
                  span{
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                }
            }
          }
        }
      }
    }
  }

  .mask-overlay{
    z-index: 1000;
    background-color: rgba(34, 33, 33, 0.1);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    overflow: hidden;
    display: grid;
    place-items: center;
  }
  //Custom tree
  .select-department-tree{
    & > .cdk-virtual-scroll-orientation-vertical .cdk-virtual-scroll-content-wrapper{
      padding: 0 4px !important;
    }
    .qms-tree-node{
      display: flex;
      align-items: center;
      border-radius: 4px;
      &:hover{
        background-color: rgba(0,0,0,.08);
      }
      &> .node-expand-area{
        width: 48px;
        height: 48px;
        position: relative;
      }
      &.active-external-view{
        .mat-mdc-checkbox.qms-group-options{
          width: calc(100% - 250px) ;
        }
      }
      &.node-loading{
        background: theme-apply($primary-light-6-opacity);
      }
      &> .external-view-node{
        flex-basis: 200px;
        overflow: hidden;
        .node-external{
          overflow: hidden;
          transition: all .1s ease-in-out;
          display: block;
          .node-external-content {
              padding: 5px 15px 5px 15px;
              height: calc(100% - 2px);
              color: theme-apply($default-color);
              font-size: 14px;
              display: flex;
              align-items: center;
              span{
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
              }
            }
        }
      }
      &.expand-node {
            color: theme-apply($primary);
            &:hover {
              background: theme-apply($primary-light-6-opacity);
            }

            &:active {
              background: theme-apply($primary-light-12-opacity);
            }

            .mat-icon{
              color: theme-apply($primary);
            }
        }
      .node-without-checkbox{
        cursor: pointer;
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .mat-icon{
          color: theme-apply($primary);
          margin-right: 4px;
        }
      }
      &.selected-theme{
        background: theme-apply($primary-light-12-opacity);
      }

          &.mat-tree-node-disabled-all {
        cursor: default !important;
        pointer-events: none;
        user-select: none;
        /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
        button.mat-button-disabled,
        .mat-icon-rtl-mirror,
        .type-icon {
          color: black(0.38);
        }

        .text-name {
          &.disabled {
            color: black(0.38);
            cursor: default !important;
            pointer-events: none;
            user-select: none;
          }
        }

        &.active {
          background-color: transparent;
        }
      }
    }
  }
  .text-name {
    position: relative;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    cursor: pointer;
    width: 100%;
  }

  .cursor-pointer {
    cursor: pointer;
  }

  .ml5 {
    margin-left: 15px !important;
  }
  .pl-10{
    padding-left: 10px;
  }

  ::ng-deep .mat-mdc-checkbox.qms-group-options.flex-direction-row {
    /*TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
    .mat-checkbox-layout {
      white-space: normal;
    }

    .node-text{
      &> span{
        display: block;
      }
    }
    /*TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
    .mat-checkbox-label {
      flex-direction: row;
      align-items: center;
      position: relative;
      padding-bottom: 2px;
    }
  }

  .qms-view-search-result{
    width: 100%;
    overflow: hidden;
    &__header{
      position: relative;
      &::after{
        position: absolute;
        content: "";
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: black(.1);
      }
      .header-title{
        padding: 8px 0;
        display: inline-block;
        &:nth-child(1){
          padding-left: 12px;
        }
        &:nth-child(2){
        flex-basis: 200px;
        }
      }
    }
    &> .no-result{
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    &__wrapper{
      height: calc(100% - 50px);
      &.active-external{
        height: calc(100% - 90px) !important;
      }
      width: 100%;
      .result {
        max-height: calc(100% - 44px);
        overflow-y: auto;
        margin-bottom: 4px;
        padding-right: 4px;
        &.active-paging{
          max-height: calc(100% - 40px);
        }
      }
      .result-item{
        border-radius: 4px;
        display: grid;
        grid-template-columns: 45px 1fr;
        align-items: center;
        cursor: pointer;
        transition: background .3s ease;
        min-height: 40px;
        &:not(:nth-child(1)){
          margin-top: 4px !important;
        }
        &:hover{
          background: linear-gradient(0deg, rgba(1, 99, 178, 0.12), rgba(1, 99, 178, 0.12)), #FFFFFF;
        }
        &.active{
          background: linear-gradient(0deg, rgba(1, 99, 178, 0.12), rgba(1, 99, 178, 0.12)), #FFFFFF;
        }
        &__content{
          display: flex;
          align-items: center;
          .item-result-content-wraper{
            padding: 5px 15px 5px 15px;
            width: 100%;
          }
          .external-name{
            flex-basis: 200px;
            span{
              width: 200px;
              display: inline-block;
            }
          }
        }
      }
    }
    ::ng-deep .mat-mdc-checkbox.qms-group-options{
      display: flex;
      height: 100%;
    }
  }

  ::ng-deep .breadcrumb-container{
    flex-wrap: wrap;
  }
  /*TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
  ::ng-deep .mat-button-focus-overlay {
    background-color: transparent;
  }

  ::ng-deep .qms-breadcrumb-item{
    margin: 0;
  }

  ::ng-deep .qms-breadcrumb-item-text{
    white-space: nowrap;
    &:not(:last-child){
      max-width: 150px !important;
    }
    text-overflow: ellipsis;
    overflow: hidden;
    transition: color .3s ease;
    &:not(:last-child):hover{
      // color : theme-apply($primary)
    }
  }

  ::ng-deep .qms-paginator{
    .mat-mdc-paginator-container .qms-total-result{
      margin-bottom: 0;
      margin-right: 12px;
      height: 100%;
      display: flex;
      align-items: center;
      span{
        font-weight: 600;
        color: black(0.8);
      }
    }
    .mat-mdc-paginator-container .qms-paginator-range-actions{
      margin-bottom: 0;
      column-gap: 2px;
      & > .qms-total-result{
        margin-bottom: 0;
      }
    }
    /*TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
    .mat-form-field-wrapper{
      padding-bottom: 0;
    }
    .qms-paginator-page-size{
      align-items: center;
    }
  }

  .text-gray{
    color: #242424;
  }

  .mb0{
    margin-bottom: 0 !important;
  }

  .fs-base{
    font-size: 14px !important;
  }

  .user-select-none{
    user-select: none;
  }

  .item-breadcrumb-disable{
    cursor: not-allowed;
    color: rgba(0, 0, 0, 0.6);
    font-weight: 400;
    font-size: 14px;
    // max-width: 250px;
  }
  /*TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
  ::ng-deep .mat-mdc-checkbox.checkbox-all .mat-checkbox-label{
    flex-direction: row;
    align-items: center;
    column-gap: 4px;
  }
  ::ng-deep .btn-arrow{
    width: 40px;
    height: 40px;
    line-height: 40px;
  }

  .qms-loading-container{
    overflow: hidden;
    display: grid;
    grid-template-rows: repeat(60px);
    .qms-loader{
      position: relative;
      width: 100%;
      height: 100%;
      padding: 10px 0;
      overflow: hidden;
      &::after {
          content: "";
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background: linear-gradient(110deg, rgba(233, 233, 233, 0) 0%, rgba(227, 227, 227, 0) 40%, rgba(227, 227, 227, 0.5) 50%, rgba(227, 227, 227, 0) 60%, rgba(227, 227, 227, 0) 100%);
          animation: animate-loading 1.2s linear infinite;
        }
      &__wrapper{
        position: relative;
        width: 100%;
        height: 100%;
        .row-loader{
          background-color: #eeeeee;
          position: absolute;
          left: 0;
          width: 100%;
          height: 40px;
        }
      }
      @keyframes animate-loading {
        0% {
          transform: translateX(-100%);
        }

        100% {
          transform: translateX(100%);
        }
      }
    }
  }

  .qms-spinner {
    font-size: 20px;
    position: relative;
    display: inline-block;
    width: 1em;
    height: 1em;
    &.center {
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      bottom: 0;
      margin: auto;
    }
  }
  ::ng-deep .mat-mdc-progress-spinner circle, .mat-mdc-progress-spinner circle{
    stroke: #1b75be !important;
  }
  // Responsive
  @media screen and (max-width: 600px) {
    .external-view-node {
      flex-basis: 65px !important;
    }

    .qms-tree-node.active-external-view .mat-mdc-checkbox.qms-group-options {
      width: calc(100% - 110px)!important ;
    }

    .header-view-tree {
      grid-template-columns: 1fr 80px !important;
    }

    ::ng-deep .cdk-virtual-scroll-content-wrapper{
      right: 0 !important;
    }
    .header-title{
      font-size: 14px !important;
    }
    .text-name, .node-external, .text-label, .text-label+span{
      font-size: 12px;
    }
    .node-expand-area{
      width: 30px !important;
      height: 30px !important;
      .qms-btn-icon{
        width: 30px;
        height: 30px;
        line-height: 30px;
      }
    }
    .fs-base{
      font-size: 12px !important;
    }
    .qms-select-department-tree-container .breadcrumb-container{
      flex-wrap: nowrap !important;
    }
    ::ng-deep .qms-breadcrumb-item-text{
      font-size: 12px !important;
      max-width: 175px !important;
    }

    ::ng-deep .qms-paginator .mat-mdc-paginator-container .qms-total-result{
      display: none !important;
    }

    ::ng-deep .qms-paginator .size-small .mat-mdc-paginator-container{
      justify-content: center !important;
    }

    .qms-view-search-result__header > .header-title:nth-child(2){
      flex-basis: 120px !important;
    }

    .result-item__content .external-name{
      flex-basis: 75px !important;
      span{
        width: 75px !important;
      }
    }
  }
}

