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

.mat-tree.basic-tree-container {
  font-family: Open Sans;

  .mat-tree-node {
    &:hover {
      background: black(0.08);
    }

    &: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);
  }

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

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

  .mat-mdc-icon-button.btn-toggle {
    width: 35px;
    height: 35px;
    line-height: 35px;
  }

  .mat-tree-node {
    &.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;
      }
    }

    &.mat-tree-node-disabled {
      /* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version. */
      button.mat-button-disabled,
      .type-icon {
        color: black(0.38);
      }

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

      &.active,
      &:hover,
      &:active,
      &.expand-node:hover,
      &.expand-node: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;
}

.ml-5 {
  margin-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;
  }
  /* 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;
  }
}
