@import "../../../themes/core/variables";
@import "../../../themes/theme/variable";
@import "../../../themes/theme/mixins";
@import "../../../themes/qms-icon-font";

.mat-tree.qms-nav-drawer-container {
  font-family: Open Sans;

  .mat-tree-node {
    &:hover,
    &:active,
    &:focus {
      background: black(0.08);
      padding-right: 5px;

      .btn-action {
        display: block;
      }
    }

    &:active {
      background: black(0.12);
    }

    &.active {
      color: theme-apply($primary);
      background: theme-apply($primary-light-6-opacity);

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

      button,
      .mat-icon-rtl-mirror,
      .type-icon,
      .text-name {
        color: theme-apply($primary);
      }
    }
  }

  .mat-tree-node.collapse-node {
    &.active {
      button,
      .mat-icon-rtl-mirror,
      .type-icon,
      .text-name {
        color: theme-apply($primary);
      }
      &:hover {
        background: theme-apply($primary-light-6-opacity);
      }

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

  .mat-tree-node.expand-node {
    color: theme-apply($primary);
    button,
    .mat-icon-rtl-mirror,
    .type-icon,
    .text-name {
      color: theme-apply($primary);
    }

    &:hover {
      background: theme-apply($primary-light-6-opacity);
    }

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

  .type-icon {
    margin-right: 5px;
    color: theme-apply($ws-action-active);
    font-size: 18px;
  }

  .text-name {
    color: theme-apply($default-color);
  }

  .mat-icon-rtl-mirror,
  .mat-icon {
    color: black(0.6);
  }

  button.qms-btn-icon {
    width: 40px;
    height: 40px;
    line-height: 40px;
  }
}

.text-name {
  position: relative;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  cursor: pointer;
  width: 100%;
  min-width: 20px;
}

.cursor-pointer {
  cursor: pointer;
}

.btn-action {
  display: none;

  .material-icons-outlined.primary {
    color: theme-apply($checkbox-color);
  }
}
