//
// @description :
// @author      : Adarsh Pastakia
// @copyright   : 2017
// @license     : MIT
.ui-datagrid {
  position: relative;
  overflow: hidden;

  &:not(.ui-auto-size) {
    @include flex-fill();
    @include flex-column();

    .ui-dg-body {
      @include flex-fill(1em);
    }

    .ui-dg-footer,
    .ui-dg-header {
      @include flex-auto();
    }
  }

  .ui-dg-ghost {
    top        : 0;
    bottom     : 0;
    z-index    : 10;
    position   : absolute;
    border-left: 2px dotted $base-border-color;
  }

  .ui-dg-empty {
    z-index   : 5;
    background: $datagrid-base-bg;
    width     : 100%;
    padding   : 1em;
  }

  .ui-dg-loader {
    @include position(absolute, 0);
    background: rgba($base-bg, .15);
    cursor    : wait;
    direction : ltr;
    z-index   : $z-index-splash;

    .ui-loader-div {
      @include box-shadow(0 0 20px 0 $base-shadow-color);
      @include position(absolute, 50% auto auto 50%);
      @include transform(translateX(-50%) translateY(-50%));

      background   : $base-bg;
      overflow     : hidden;
      padding      : 0.5em;
      font-size    : 1.5em;
      line-height  : 1;
      z-index      : $z-index-splash;
      border-radius: $base-border-radius;
    }
  }

  .ui-dg-body {
    height: 100%;
    width : 100%;
    @include scroll();
    @include flex-column($align: stretch);

    > .ui-dg-filler {
      @include flex-fill();

      .ui-dg-expander {
        padding: 0;
      }
    }

    > div {
      @include flex-auto();
    }

    .ui-dg-row {
      &.odd {
        background: $datagrid-row-odd-bg;
      }

      &.even {
        background: $datagrid-row-even-bg;
      }

      &.odd .ui-dg-cell,
      &.odd .ui-dg-expander {
        background: $datagrid-row-odd-bg;
        color     : $datagrid-row-odd-text;
      }

      &.even .ui-dg-cell,
      &.even .ui-dg-expander {
        background: $datagrid-row-even-bg;
        color     : $datagrid-row-even-text;
      }

      &.last .ui-dg-cell,
      &.ui-expanded .ui-dg-cell {
        border-bottom: 1px dotted $base-border-color;
      }

      .ui-dg-subview {
        @include flex-fill();
        border-bottom: 1px dotted $base-border-color;
      }

      &:not(.ui-dg-filler):hover .ui-dg-cell {
        background: $datagrid-row-hover-bg;
        color     : $datagrid-row-hover-text;
      }

      &.ui-expanded > .ui-dg-cell,
      &.ui-expanded > .ui-dg-lock-holder > .ui-dg-cell {
        font-weight: $font-weight-strong;
      }

      &.level-1 .ui-level-pad {
        padding-left: 1em;
      }

      &.level-2 .ui-level-pad {
        padding-left: 2em;
      }

      &.level-3 .ui-level-pad {
        padding-left: 3em;
      }

      &.level-4 .ui-level-pad {
        padding-left: 4em;
      }

      &.level-5 .ui-level-pad {
        padding-left: 5em;
      }
    }
  }

  .ui-dg-row {
    @include flex-row($wrap:false, $align:stretch);

    .ui-dg-lock-holder {
      z-index: 5;
      @include flex-auto();
      @include flex-row($wrap:false, $align:stretch);
      @include border(end, 1px solid $base-border-color);
    }

    .ui-dg-cell {
      @include flex-auto();
      @include ellipsis();
      line-height: 1.75rem;
      font-size  : 0.9em;
      @include border(end, 1px solid rgba($base-border-color, .25));

      .ui-link {
        font-weight: 600;
      }

      &:not(.btn-fix) {
        padding: 0 0.5em;
      }

      &.btn-fix {
        line-height: 1.5rem;
      }
    }

    > .ui-dg-filler {
      @include flex-fill();
    }

    .ui-locked {
      z-index: 5;
    }

    .ui-dg-expander {
      @include flex-auto();
      z-index  : 5;
      position : relative;
      min-width: 1.5rem;
      font-size: 0.7em;
      padding  : 0.5em 6px;
      @include border(end, 1px solid rgba($base-border-color, .25));

      &:before {
        @include position(absolute,0);
        content   : '';
        background: rgba($muted, .2);
      }
    }
  }

  .ui-dg-header .ui-dg-row {
    background: $datagrid-header-bg;

    .ui-dg-expander {
      background: $datagrid-header-bg;
    }

    .ui-dg-group {
      @include flex-auto();
      color     : $datagrid-header-text;
      background: $datagrid-header-bg;
      @include border(end, 1px solid rgba($base-border-color, .25));

      > .ui-title {
        display      : block;
        text-align   : center;
        border-bottom: 1px solid rgba($base-border-color, 0.25);
        font-weight  : 600;
        font-size    : 0.9em;
      }

      .ui-dg-cols {
        @include flex-row($wrap:false, $align:stretch);
      }
    }

    .ui-dg-cell {
      @include flex-row($wrap:false, $align:stretch);
      font-weight: 600;
      padding    : 0;
      color      : $datagrid-header-text;
      background : $datagrid-header-bg;

      .ui-title {
        content: ' ';
        padding: 0 0.5em;
        @include ellipsis();
        @include flex-fill();
        @include align-self(center);
      }

      .ui-sort {
        padding: 0 0.2em;
        @include align-self(center);
        @include flex-auto();

        &:after,
        &:before {
          font-size  : 0.5em;
          display    : block;
          position   : relative;
          line-height: 1;
          color      : rgba($datagrid-header-text,.25);
        }

        &:before {
          content: '\25B2';
        }

        &:after {
          content: '\25BC';
        }

        &.asc:before {
          color: rgba($datagrid-header-text,.75);
        }

        &.desc:after {
          color: rgba($datagrid-header-text,.75);
        }
      }

      .ui-resizer {
        cursor: ew-resize;
        @include flex(0 0 2px);
        @include border(start, 1px solid rgba($datagrid-header-text, .5));
      }
    }
  }

  .ui-dg-footer .ui-dg-row {
    background: $datagrid-footer-bg;

    .ui-dg-expander {
      background: $datagrid-footer-bg;
    }

    .ui-dg-cell {
      font-weight: 600;
      background : $datagrid-footer-bg;
      color      : $datagrid-footer-text;
    }
  }
}

.ui-pager {
  border-radius: $base-border-radius;
  border       : 1px solid rgba($base-border-color, .5);
  @include flex-row($display: inline-flex, $wrap:false, $align:stretch);

  a {
    padding  : 0.25em 0.4em;
    font-size: 0.8em;
    color    : $secondary;

    &:hover {
      color: shade($secondary, 5%);
    }

    &.disabled {
      color         : $muted;
      pointer-events: none;
    }

    &.pg-first,
    &.pg-last {
      font-size  : 0.9em;
      line-height: 1.2em;
    }
  }

  span {
    font-size  : 0.9em;
    line-height: 1rem;
    @include align-self(center);

    input {
      margin    : 0;
      border    : none;
      text-align: center;
    }
  }
}

.rtl,
[dir="rtl"] {
  .ui-pager a > .ui-icon {
    @include transform(scaleX(-1));
  }
}