// ngx-datatable support for light and dark colors
@mixin at-ngx-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);
  .ngx-datatable.material {
    background: transparent;
    box-shadow: none;

    .mat-link {
      text-decoration: none;
      font-weight: 500;
      color: map-get($primary, 500);
    }

    &.striped .datatable-row-odd {
      background: #eee;
    }
    &.single-selection .datatable-body-row.active, &.multi-selection .datatable-body-row.active, &.multi-click-selection .datatable-body-row.active {
      background-color: map_get($primary, 500);
      color: #FFF;
      .mat-link {
        color: whitesmoke;
      }
      .datatable-row-group {
        background-color: map_get($primary, 500);
        color: #FFF;
      }
      .datatable-body-cell {
        color: #FFF;
      }
    }
    &.single-selection .datatable-body-row.active:hover, &.multi-selection .datatable-body-row.active:hover, &.multi-click-selection .datatable-body-row.active:hover {
      background-color: map_get($primary, 500);
      color: #FFF;
      .datatable-row-group {
        background-color: map_get($primary, 500);
        color: #FFF;
      }
    }
    &.single-selection .datatable-body-row.active:focus, &.multi-selection .datatable-body-row.active:focus, &.multi-click-selection .datatable-body-row.active:focus {
      background-color: map_get($primary, 500);
      color: #FFF;
      .datatable-row-group {
        background-color: map_get($primary, 500);
        color: #FFF;
      }
    }
    &:not(.cell-selection) .datatable-body-row {
      &:hover {
        background-color: map_get($background, focused-button);
        transition-property: background;
        transition-duration: .3s;
        transition-timing-function: linear;
        .datatable-row-group {
          background-color: map_get($background, focused-button);
          transition-property: background;
          transition-duration: .3s;
          transition-timing-function: linear;
        }
      }
      &:focus {
        background-color: map_get($background, focused-button);
        .datatable-row-group {
          background-color: map_get($background, focused-button);
        }
      }
    }
    &.cell-selection .datatable-body-cell {
      &:hover {
        background-color: map_get($background, raised-button);
        transition-property: background;
        transition-duration: .3s;
        transition-timing-function: linear;
        .datatable-row-group {
          background-color: map_get($background, raised-button);
          transition-property: background;
          transition-duration: .3s;
          transition-timing-function: linear;
        }
      }
      &:focus {
        background-color: map_get($background, raised-button);
        .datatable-row-group {
          background-color: map_get($background, raised-button);
        }
      }
      &.active {
        background-color: map_get($primary, 500);
        color: #FFF;
        .datatable-row-group {
          background-color: map_get($primary, 500);
          color: #FFF;
        }
        &:hover {
          background-color: map_get($primary, 500);
          color: #FFF;
          .datatable-row-group {
            background-color: map_get($primary, 500);
            color: #FFF;
          }
        }
        &:focus {
          background-color: map_get($primary, 500);
          color: #FFF;
          .datatable-row-group {
            background-color: map_get($primary, 500);
            color: #FFF;
          }
        }
      }
    }
    .empty-row {
      height: 50px;
      text-align: left;
      padding: .5rem 1.2rem;
      vertical-align: top;
      border-top: 0;
    }
    .loading-row {
      text-align: left;
      padding: .5rem 1.2rem;
      vertical-align: top;
      border-top: 0;
    }
    .datatable-header .datatable-row-left, .datatable-body .datatable-row-left {
      background-color: #FFF;
      background-position: 100% 0;
      background-repeat: repeat-y;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQIHWPSkNeSBmJhTQVtbiDNCgASagIIuJX8OgAAAABJRU5ErkJggg==);
    }
    .datatable-header .datatable-row-right, .datatable-body .datatable-row-right {
      background-position: 0 0;
      background-color: #fff;
      background-repeat: repeat-y;
      background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAABCAYAAAD5PA/NAAAAFklEQVQI12PQkNdi1VTQ5gbSwkAsDQARLAIGtOSFUAAAAABJRU5ErkJggg==);
    }
    .datatable-header {
      border-bottom: 1px solid map_get($foreground, divider);
      .datatable-header-cell {
        text-align: left;
        padding: .9rem 1.2rem;
        font-weight: 500;
        color: map_get($foreground, base);
        vertical-align: bottom;
        font-size: 14px;
        .datatable-header-cell-wrapper {
          position: relative;
        }
        &.longpress .draggable::after {
          transition: transform 400ms ease, opacity 400ms ease;
          opacity: .5;
          transform: scale(1);
        }
        .draggable::after {
          content: " ";
          position: absolute;
          top: 50%;
          left: 50%;
          margin: -30px 0 0 -30px;
          height: 60px;
          width: 60px;
          background: map_get($background, raised-button);
          border-radius: 100%;
          opacity: 1;
          filter: none;
          transform: scale(0);
          z-index: 9999;
          pointer-events: none;
        }
        &.dragging .resize-handle {
          border-right: none;
        }
      }
      .resize-handle {
        border-right: solid 1px map_get($foreground, divider);
      }
    }
    .datatable-body {
      .datatable-row-detail {
        background: map_get($background, disabled-button);
        padding: 10px;
      }
      .datatable-group-header {
        background: #f5f5f5;
        border-bottom: solid 1px #D9D8D9;
        border-top: solid 1px #D9D8D9;
      }
      .datatable-body-row {
        .datatable-body-cell, .datatable-body-group-cell {
          text-align: left;
          padding: .9rem 1.2rem;
          vertical-align: top;
          border-top: 0;
          color: map_get($foreground, base);
          transition: width 0.3s ease;
          font-size: 14px;
          font-weight: 400;
        }
      }
      .progress-linear {
        display: block;
        position: relative;
        width: 100%;
        height: 5px;
        padding: 0;
        margin: 0;
        position: absolute;
        .container {
          display: block;
          position: relative;
          overflow: hidden;
          width: 100%;
          height: 5px;
          -webkit-transform: translate(0, 0) scale(1, 1);
          transform: translate(0, 0) scale(1, 1);
          background-color: map_get($primary, 100);
          .bar {
            transition: all .2s linear;
            -webkit-animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
            animation: query 0.8s infinite cubic-bezier(0.39, 0.575, 0.565, 1);
            transition: -webkit-transform .2s linear;
            transition: transform .2s linear;
            background-color: map_get($primary, 500);
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            width: 100%;
            height: 5px;
          }
        }
      }
    }
    .datatable-footer {
      border-top: 1px solid map_get($foreground, divider);
      font-size: 12px;
      font-weight: 400;
      color: map_get($foreground, base);
      .page-count {
        line-height: 50px;
        height: 50px;
        padding: 0 1.2rem;
      }
      .datatable-pager {
        margin: 0 10px;
        li {
          vertical-align: middle;
          &.disabled a {
            color: map_get($foreground, disabled) !important;
            background-color: transparent !important;
          }
          &.active a {
            color: map_get($primary, 500);
            background-color: transparent;
            font-weight: bold;
          }
        }
        a {
          height: 22px;
          min-width: 24px;
          line-height: 22px;
          padding: 0 6px;
          border-radius: 3px;
          margin: 6px 3px;
          text-align: center;
          color: map_get($foreground, base);
          text-decoration: none;
          vertical-align: bottom;
          &:hover {
            color: map_get($foreground, base);
            background-color: transparent;
          }
        }
        .datatable-icon-left, .datatable-icon-skip, .datatable-icon-right, .datatable-icon-prev {
          font-size: 20px;
          line-height: 20px;
          padding: 0 3px;
        }
      }
    }
  }
}