@import "../../app/theme";
@import "../../app/typography";
@import "../../app/buttons";
@import "../../app/dropdowns";
@import "../../app/validation";
@import "../../app/menu";

.gp-tree-table-view {
  .gp-dropdown-tree-table-cell {
    -fx-border-width: 0 0 2 0;

    &.selected {
      .combo-box-base {
        .list-cell {
          -fx-fill: white;
          -fx-text-fill: white;
        }
        &:hover .list-cell, &:focused .list-cell {
          -fx-fill: derive($gp-dark-gray, -20%);
          -fx-text-fill: derive($gp-dark-gray, -20%);
        }

        & .arrow {
          -fx-background-color: white, white;
        }
        &:hover .arrow, &:focused .arrow {
          -fx-background-color: derive($gp-dark-gray, -20%), derive($gp-dark-gray, -20%);
        }
      }
    }
    .combo-box-base  {
      @include btn-normal(transparent, transparent);

      .arrow-button {
        @include btn-normal(transparent, transparent);
      }

      &:hover {
        @include btn-hovered();
        .arrow-button {
          @include btn-hovered(transparent);
        }
      }

      &:focused {
        @include btn-hovered();
        @include btn-focused();

        .arrow-button {
          @include btn-hovered(transparent);
        }
      }

      &:disabled {
        -fx-opacity: .4;
      }
    }

    &.focused {
      -fx-border-color: $gp-orange;
    }
  }
  .gp-check-box-tree-table-cell {
    -fx-border-width: 0 0 2 0;

    Button {
      -fx-background-color: transparent;
    }
    &:hover {
     // -fx-background-color: derive($gp-light-gray, -15%);
      & .glyph-icon {
        -fx-fill: derive($gp-medium-gray, -10%);
      }
    }
    &.focused {
      -fx-border-color: $gp-orange;
    }
  }
    .column-header {
      -fx-background-color: $gp-light-gray, $gp-dark-gray, $gp-light-gray;
      -fx-background-insets: 0 0 0 0, 5 0 5 0, 5 1 5 0;
      -fx-font-weight: normal;
    }
    -fx-border-width: 0;
    & > .column-header-background {
      -fx-background-color: $gp-light-gray;
        & > .show-hide-columns-button {
            -fx-cursor: hand;
        }
    }

    &:hover .scroll-bar {
      -fx-opacity: 1;
    }
    .scroll-bar {
      @include scroll-bar(15);
    }

    &:focused {
        -fx-border-width: 0;
    }
    // This is a normal operational mode: the treetable is :focused,
    // rows automatically become :selected or :focused as user changes the selection,
    // a cell becomes .focused as row focus position changes (".focused" class is controlled by our TextCell)
    &:row-selection, &:focused:row-selection {
        -fx-border-insets: 0;
        -fx-border-width: 0;
        -fx-padding: 0;
        .virtual-flow {
            & > .tree-table-row-cell:selected, .tree-table-row-cell:selected:focused {
                & .tree-table-cell {
                    -fx-fill: white;
                    -fx-text-fill: white;
                    .badge.colored {
                      -fx-border-color: $gp-light-gray;
                      .glyph-icon {
                        -fx-fill: black;
                      }
                    }
                }
                & .glyph-icon {
                    -fx-fill: white;
                }
            }
            & > .tree-table-row-cell:selected {
              -fx-background-color: $gp-medium-gray;
              & .tree-table-cell {
                &.odd {
                  -fx-background-color: $gp-medium-gray;
                }
              }
            }
        }
    }
  .tree-table-row-cell:filled:selected:focused,
  .tree-table-row-cell:filled:selected {
    -fx-background-color: $gp-medium-gray;
    -fx-text-fill: white;
  }
  .tree-table-row-cell:filled:odd {
    -fx-background-color: $gp-zebra-gray;
  }
  .tree-table-row-cell:filled:odd:selected {
    -fx-background-color: $gp-medium-gray;
  }
  .gp-tree-table-cell {
        -fx-border-width: 0 0 2 0;
        -fx-border-color: transparent;
        -fx-padding: 0 10 0 10;
        .badge {
          -fx-background-radius: 50%;
          -fx-border-width: 0;
          -fx-padding: 0;
          -fx-background-insets: 0;
          -fx-border-color: $gp-medium-gray;
          -fx-border-radius: 50%;
          &.colored {
            -fx-border-width: 1;
          }
          .button {
            -fx-background-color: transparent;
            -fx-border-color: transparent;
            -fx-border-radius: 0;
            -fx-padding: 0;
          }
        }
        .badge-error {
          -fx-background-color: $gp-error;
        }
        .badge-warning {
          -fx-background-color: $gp-warning;
        }
        &.focused {
            -fx-border-color: $gp-orange;
        }
        //&.odd {
        //    -fx-background-color: lighten($gp-light-gray, 5%);
        //}
        &.validation-error {
            @include validation-error();
        }
        .text-field {
            -fx-padding: 0;
            -fx-background-color: transparent;
            -fx-border-color: transparent;
            -fx-text-fill: white;
        }
    }
  // This is when editing starts. The treetable itself is not :focused anymore because the focus
    // is now in the text field.
    & > .virtual-flow {
      & > .tree-table-row-cell:selected {
            -fx-background: $gp-light-gray;
        }
    }
//
    .tree-table-row-cell {
        & > .tree-disclosure-node {
            -fx-padding: 0 0 0 5;
            //-fx-background-color: yellow;
            -fx-border-width: 0 0 2 0;
            -fx-border-color: transparent;
            & > .glyph-icon {
                -fx-fill: $gp-medium-gray;
            }
            -fx-pref-width: 15;
        }
    }

  @include context-menu();
}

