@import 'node_modules/@angular/material/theming';
@mixin o-datatable-theme($theme) {
  $primary: map-get($theme, primary);
  $accent: map-get($theme, accent);
  $warn: map-get($theme, warn);
  $background: map-get($theme, background);
  $foreground: map-get($theme, foreground);

  .o-table {
    input[type="checkbox" ]:focus {
      outline: none;
    }

    .spinner-container {
      background-color: mat-color($background, background);
    }

    .expandable-container {
      border-width: 1px;
      border-style: solid;
      border-color: mat-color($foreground, divider);
    }

    .o-table-container {

      &.disabled {
        tbody {
          tr {
            &.selected {
              background-color: transparent;
            }
          }
        }
      }

      .dt-buttons .dt-button {
        color: mat-color($foreground, secondary-text);

        &:not(.hidden-action-text):not(.disabled):hover {
          background-color: mat-color($background, hover);
        }

        &.hidden-action-text:not(.disabled):hover {
          background-color: mat-color($background, hover);
        }

        &.active {
          color: mat-color($foreground, secondary-text);

          &::after {
            background: #eee;
          }
        }

        &.disabled {
          color: mat-color($background, disabled-button);
        }
      }

      .dataTables_filter {
        color: mat-color($foreground, secondary-text);

        input {
          background: transparent;
          color: mat-color($foreground, secondary-text);
          border: 0px;
          border-bottom-width: 1px;
          border-bottom-style: solid;
          border-bottom-color: mat-color($foreground, secondary-text);
        }

      }

      table {
        &.fixedHeader-locked,
        &.fixedHeader-floating {
          background-color: mat-color($background, background);
        }

        thead tr th,
        tbody td {

          &.o-table-column-select-checkbox {

            .mat-checkbox-inner-container {

                .mat-checkbox-frame {
                  background-color: transparent;
                  border-width: 2px;
                  border-style: solid;
                  border-color: mat-color($foreground, secondary-text);
                }

                .mat-checkbox-background {
                  background-color: mat-color($accent);
                }
            }

          }
        }

        thead {

          tr {
            background-color: mat-color($background, status-bar, 0.9);

            th {
              color: mat-color($foreground, text);

              &:last-child:not(.o-table-column-action) {
                border-left-width: 1px;
                border-left-style: solid;
                border-left-color: mat-color($foreground, divider);
              }

              &:first-child:not(.o-table-column-select-checkbox) {
                border-right-width: 1px;
                border-right-style: solid;
                border-right-color: mat-color($foreground, divider);
              }

              &:nth-child(n+3):nth-last-child(n+2):not(.o-table-column-action) {
                border-left-width: 1px;
                border-left-style: solid;
                border-left-color: mat-color($foreground, divider);
              }

              &.sorting_desc::after,
              &.sorting_asc::before {
                color: mat-color($accent, 400);
              }

              &.grouping {
                background: #eee;
              }

            }

          }

        }

        tbody {

          tr {

            &.selected {
              background-color: mat-color($foreground, base, 0.18) !important;
            }

            &.even {
              background-color: mat-color($background, hover);
            }

            &:not(.group):not(.empty):not(.insertRow):hover {
              background-color: mat-color($foreground, base, 0.18) !important;
            }

            &:last-child.odd {

              td {
                border-bottom-width: 1px;
                border-bottom-style: solid;
                border-bottom-color: mat-color($foreground, divider)
              }

            }

            &.group {

              td {
                color: rgba(0,0,0,.9);
                border-top: 1px rgba(0, 0, 0, 0.12) solid;
                border-bottom: 1px solid rgba(0,0,0,.9);
              }

            }

            &.editRow {
              input:not([type="checkbox"]) {
                background: #f5f5f5;
              }
              select {
                background: #f5f5f5;
              }
              &.selected {
                select {
                  background-color: #fff;
                }
              }
            }

            &.insertRow {
              td {
                input:not([type="checkbox"]) {
                  background: #f5f5f5;
                }
                select {
                  background: #f5f5f5;
                }
              }
            }

          }


          td {
            color: mat-color($foreground, secondary-text);

            &.focus {
              outline-width: 1px;
              outline-style: solid;
              outline-color: mat-color($accent, 200);
            }

            &.editing {
              outline-width: 1px;
              outline-style: solid;
              outline-color: mat-color($accent, 200);
              background-color: mat-color($background, background);
            }

            input {
              background-color: mat-color($background, background);
            }

            input.select-row {
              background-color: transparent;
            }

            select {
              background-color: mat-color($background, background);
            }

            &:last-child:not(.o-table-column-action) {
              border-left-width: 1px;
              border-left-style: solid;
              border-left-color: mat-color($foreground, divider);
            }

            &:first-child:not(.o-table-column-action):not(.o-table-column-select-checkbox) {
              border-right-width: 1px;
              border-right-style: solid;
              border-right-color: mat-color($foreground, divider);
            }

            &:nth-child(n+3):nth-last-child(n+2):not(.o-table-column-action) {
              border-left-width: 1px;
              border-left-style: solid;
              border-left-color: mat-color($foreground, divider);
            }

            &.o-table-column-action {
              .o-table-row-action {
                color: mat-color($foreground, secondary-text);
              }
            }

          }

        }

      }

      .dataTables_length {

        color: mat-color($foreground, secondary-text);

        select {
          color: mat-color($foreground, secondary-text);
          background-color: mat-color($background, background);
        }

      }

      .dataTables_info {
        color: mat-color($foreground, secondary-text);
      }

      .dataTables_paginate {
        color: mat-color($foreground, text);

        .paginate_button {

          &.disabled {
            color: mat-color($foreground, disabled-text);
          }

        }

      }

    }

    .o-table-menu-button {
      color: mat-color($foreground, secondary-text);
    }

    .JCLRgrip:not(.JCLRLastGrip):not(.JCLRdisabledGrip) {
      color: mat-color($foreground, text);
    }

    .JCLRgripDrag {
      border: none;
    }

    .JCLRgrip .JColResizer {
      opacity: 1;
      width: 3px;
      background-color: mat-color($foreground, divider);
    }

  }

  .o-table-option-active {
    background: mat-color($foreground, divider);
  }

  div.dt-button-collection {
    background-color: white;
  }
  div.dt-button-collection button.dt-button,
  div.dt-button-collection div.dt-button,
  div.dt-button-collection a.dt-button {
    color: #000;
  }
  div.dt-button-collection a.dt-button:hover {
    background: #eee;
  }
  div.dt-button-background {
    background: rgba(0, 0, 0, 0.8);
  }

}