@import "~devextreme/dist/css/dx.common.css";
@import "devextreme_theme";
@import "~@netapp/luci/tokens/tokens";
@import "lucix-tokens";
/* Our variables over bs4 variables due to !default behavior */
@import "theme_variables";
@import "~bootstrap/scss/variables";

.dx-widget {
  font-family: $font-family-base;
}

/* datagrid */
.dx-datagrid {
  border-right: $luci-border-component-on-light;
  border-left: $luci-border-component-on-light;
  border-top: $luci-border-component-on-light;

  .dx-row {
    > td {
      padding: 12px 12px 9px 12px;

      &.dx-command-expand {
        > div {
          margin-top: 5px;
          margin-left: 5px;
        }
      }
    }

    /* checkbox column smaller */

    .dx-command-select {
      width: 40px !important;
      min-width: 40px !important;
    }
  }

  .dx-datagrid-group-closed {
    font: 0/0 a;

    @include nwfjsChevron("down", $luci-link-color-default-on-light);
  }

  .dx-datagrid-group-opened {
    font: 0/0 a;

    @include nwfjsChevron("up", $luci-link-color-default-on-light);
  }

  .custom-control-input {
    margin: 0 !important;
    width: auto !important;
    right: 0 !important;
    left: 0 !important;
  }

  /* override border color */
  .dx-row-lines {
    td {
      border-bottom-color: $luci-border-component-on-light-color;
    }
  }

  /* All .btn need to have override for min-height to fit right */
  .btn {
    min-height: inherit !important;
  }
}

/* Sorting icons */
.dx-sort {
  &:before {
    content: "" !important;
  }
}

.dx-sort-up {
  font: 0/0 a;
  width: 18px;
  height: 18px;
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='icon-columnsort-up' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cpolygon id='Triangle-up' fill='%23888888' points='9 2 14 7 4 7'%3E%3C/polygon%3E %3Cpolygon id='Triangle-down' fill='%23C2C2C2' transform='translate(9.000000, 13.500000) scale(1, -1) translate(-9.000000, -13.500000) ' points='9 11 14 16 4 16'%3E%3C/polygon%3E %3C/g%3E %3C/svg%3E");
}

.dx-sort-down {
  font: 0/0 a;
  width: 18px;
  height: 18px;
  display: inline-block;
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3C?xml version='1.0' encoding='UTF-8'?%3E %3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E %3Cg id='icon-columnsort-down' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'%3E %3Cpolygon id='Triangle-up' fill='%23C2C2C2' points='9 2 14 7 4 7'%3E%3C/polygon%3E %3Cpolygon id='Triangle-down' fill='%23888888' transform='translate(9.000000, 13.500000) scale(1, -1) translate(-9.000000, -13.500000) ' points='9 11 14 16 4 16'%3E%3C/polygon%3E %3C/g%3E %3C/svg%3E");
}

.dx-datagrid
  .dx-datagrid-table
  .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row)
  > td:not(.dx-focused) {
  background-color: $luci-background-color-light;
}

.dx-datagrid-table
  .dx-data-row.dx-state-hover:not(.dx-selection):not(.dx-row-inserted):not(.dx-row-removed):not(.dx-edit-row)
  > .dx-datagrid-readonly
  .dx-texteditor
  .dx-texteditor-input {
  background-color: $luci-background-color-light;
}

/* custom borders just apply to the body parts, not the toolbar part at the top */

.dx-datagrid-scroll-container {
  border-right: $luci-border-component-on-light-color;
}

.dx-datagrid-headers {
  color: inherit;
  background-color: $white;
}

.dx-header-row {
  > td {
    .dx-datagrid-text-content,
    .dx-treelist-text-content {
      font-weight: $luci-font-weight-bold;
      font-size: $luci-font-size-sm;
      color: $luci-text-color-primary-on-light;
      flex: 1;
    }

    /* hover treatment just on sortable columns */
    &.dx-datagrid-action[aria-sort]:hover {
      background: $lucix-background-color-lightest-blue;
    }

    &:first-child {
      border-left: none !important;
    }

    font-size: $luci-font-size-sm;
    font-weight: $luci-font-weight-bold;
    color: inherit;

    &:not(.dx-command-select) {
      border-right: $luci-border-component-on-light !important;

      &:last-child {
        border-right-width: 0 !important;
      }
    }
  }
}

.dx-datagrid-rowsview {
  background-color: #fff;
  border-top: none;
}

/* Filter */

.dx-datagrid-filter-row {
  td {
    padding: 0 !important;

    &:first-child {
      border-left-width: 0 !important;
    }
  }

  .dx-has-context-menu {
    // display: none;
  }

  .dx-state-focused {
    .dx-texteditor-input {
      background-color: $lucix-background-color-lightest-blue;
    }
  }

  .dx-editor-with-menu {
    height: 33px;

    //make it fill up the cell ( this is minus one from the 34 height)

    .dx-menu-item-content,
    .dx-item-content,
    .dx-menu-item,
    .dx-texteditor-container,
    .dx-menu-popout-container {
      height: 33px;
      margin-left: 0;
    }
  }

  .dx-menu-item-wrapper {
    border-bottom-width: 0 !important;
  }

  .dx-menu {
    border-top-width: 0;
    border-left-width: 0;
    margin: 0;
  }

  .dx-menu-popout-container {
    left: 0 !important;
  }

  .dx-dropdowneditor-icon:before {
    background-repeat: no-repeat !important;
  }

  .dx-menu-horizontal {
    display: flex;
    justify-content: center;

    .dx-menu-item-content {
      display: flex !important;
      align-items: center !important;
    }

    .dx-filter-menu {
      border-right: 0;
    }
  }

  td.dx-focused {
    .dx-filter-menu {
      background-color: $white;
    }
  }

  /* the actual spyglass button */
  .dx-menu-item-has-submenu.dx-menu-item-expanded {
    > .dx-item-content {
      background: $luci-background-color-light;
    }
  }

  .dx-menu-item-content {
    /* this colors all dx-icon-filter-* icons in the search popovers */
    i[class*=" dx-icon-filter"] {
      color: $lucix-interactive-color-default;
    }
  }
}

/* Filter Submenus */
/* this is down outside of the main grid container */
.dx-context-menu.dx-datagrid {
  .dx-submenu {
    background-color: $luci-background-color-light;
    box-shadow: none;
    border: $luci-border-component-on-light;

    /* this colors all dx-icon-filter-* icons in the search popovers */
    i[class*=" dx-icon-filter"] {
      color: $lucix-interactive-color-default;
    }

    .dx-menu-item {
      color: $lucix-interactive-color-default;

      &.dx-menu-item-expanded {
        background: $luci-background-color-light;
      }

      &.dx-state-hover {
        color: $luci-link-color-default-on-dark;
        background: $lucix-interactive-color-active;

        i[class*=" dx-icon-filter"] {
          color: $luci-icon-color-on-interactive;
        }
      }

      &.dx-menu-item-selected {
        color: $luci-link-color-default-on-dark;
        background-color: $lucix-interactive-color-active;

        i[class*=" dx-icon-filter"] {
          color: $luci-icon-color-on-interactive;
        }
      }
    }
  }
}

.dx-datagrid-filter-row {
  td {
    height: 34px;

    //matches above the filter menu

    .dx-texteditor-container {
      height: 34px;
    }

    &:not(.dx-command-select) {
      border-right: $luci-border-component-on-light !important;
    }

    &:first-child {
      border-left-width: 0 !important;
    }
  }

  .dx-menu {
    margin: 0;
    margin-left: 1px;
    border-right: $luci-border-component-on-light;
  }

  .dx-texteditor-input {
    text-indent: 5px !important;
  }
}

/* Selection */

/* selected and hovered state */
.dx-datagrid-rowsview {
  .dx-row.dx-selection {
    > td {
      background-color: $lucix-background-color-lightest-blue;
    }
  }
}

.dx-datagrid-checkbox-size {
  .dx-checkbox-icon {
    height: 18px;
    width: 18px;
    top: 2px;
  }
}

.dx-checkbox-icon {
  border-radius: $luci-border-radius-default;
}

.dx-checkbox-checked {
  .dx-checkbox-icon {
    color: #fff;
    border-color: $lucix-interactive-color-default;
    background-color: $lucix-interactive-color-default;
  }
}

.dx-checkbox-indeterminate .dx-checkbox-icon:before {
  margin-top: -5px !important;
}

.dx-datagrid-content .dx-datagrid-table .dx-row > td {
  &[aria-sort="descending"],
  &[aria-sort="ascending"] {
    align-items: center;
  }
}

/* Toolbar */

.dx-datagrid-header-panel {
  .dx-toolbar {
    margin-bottom: 0;
    padding-bottom: 10px;
  }
}

/* Form */
.dx-texteditor-input {
  border-color: $input-border-color;
  min-height: auto;
}

.dx-textbox {
  &.dx-state-focused {
    box-shadow: $input-focus-box-shadow !important;
  }
  &.dx-state-hover {
    border-color: $input-border-color;
  }
}

/* drop down */
.dx-dropdowneditor-icon {
  background: none !important;
}

.dx-dropdowneditor-icon:before {
  font: 0/0 a;
  background-image: $custom-select-indicator;
  width: 20px;
  height: 20px;
}

//selectbox. these styles apply on all lists.
.dx-list-group-body {
  .dx-item.dx-list-item {
    padding-left: 15px;
    font-size: 12px;
    color: $luci-link-color-default-on-light;

    &.dx-list-item-selected:not(.dx-state-hover) {
      background-color: $blue-300;
      color: white;
    }

    &.dx-list-item-selected.dx-state-hover:not(.dx-state-focused) {
      background-color: $blue-100;
      color: white;
    }

    &.dx-state-hover {
      background-color: $blue-100;
      color: white;
    }
  }
}

.dx-list-group-header {
  padding-top: 10px;
  padding-left: 12px;
  font-size: 14px;
  font-weight: normal;
  border-bottom: 0;
}

/* TreeList */
.dx-treelist-headers {
  td[role="columnheader"] {
    height: 42px;
    vertical-align: middle;
    padding-top: 12px;
  }
}

.dx-treelist-expanded {
  > span {
    &::before {
      @include nwfjsChevron("down");
    }
  }
}

.dx-treelist-collapsed {
  > span {
    &::before {
      @include nwfjsChevron("right");
    }
  }
}

/* Load Indicator */

/* had to bump it behind the modal dialogs in the bs z-index hierarchy */
.dx-overlay {
  z-index: $zindex-modal - 1 !important;
}

.dx-loadindicator-segment {
  display: none !important;
}

.dx-loadindicator-icon {
  position: absolute;
  padding-top: 45%;
  padding-left: 45%;
  z-index: 1;
  height: 100%;
  width: 100%;
  background: rgba(255, 255, 255, 0.5);
  top: auto;
  left: auto;
}

/* TODO get luci vars in here */
.dx-loadindicator-icon {
  width: 32px;
  height: 32px;
  border: 4px solid transparent;
  border-top: 4px solid $luci-chart-color-2;
  border-right: 4px solid $luci-chart-color-2;
  border-bottom: 4px solid $luci-chart-color-2;
  border-radius: 50%;
  animation: spin 1s infinite linear;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(359deg);
  }
}

.dx-overlay-shader {
  background: rgba(255, 255, 255, 0.5) !important;
}

/* Scrollbar */

.dx-scrollable-scrollbar.dx-scrollbar-hoverable.dx-scrollbar-vertical,
.dx-scrollable-scrollbar.dx-scrollbar-hoverable.dx-scrollbar-vertical .dx-scrollable-scroll {
  width: 12px;
}

.dx-scrollable-scrollbar.dx-scrollbar-hoverable.dx-scrollbar-horizontal,
.dx-scrollable-scrollbar.dx-scrollbar-hoverable.dx-scrollbar-horizontal .dx-scrollable-scroll {
  height: 12px;
}