@import '~ag-grid-community/dist/styles/ag-grid.css';
@import '~ag-grid-community/dist/styles/ag-theme-balham.css';


// Set default customise component variables here,
// Override it in theme variables files

$x-ag-row-disabled-opacity: 0.5                                       !default;
$x-ag-row-draft-opacity: 0.75                                         !default;
$x-ag-row-drag-icon-color: theme-color('info')                        !default;
$x-ag-row-drag-icon: str-replace(url("data:image/svg+xml;chatset=uft8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$x-ag-row-drag-icon-color}' viewBox='0 0 96 96'%3E%3Cg%3E%3Cpath d='M67.4931301,35.5159946 L47.9960743,15.9698266 L28.4990186,35.5159946 L22,29.0006052 L47.9960743,3.20097978 L73.9921487,29.0006052 L67.4931301,35.5159946 Z M67.5,61.2009798 L74,67.717353 L48,93.5208744 L22,67.717353 L28.5,61.2009798 L48,80.7500994 L67.5,61.2009798 Z M8,44 L88,44 L88,52 L8,52 L8,44 Z'/%3E%3C/g%3E%3C/svg%3E"), "#", "%23") !default;
$x-ag-icon-arrows:   str-replace(url("data:image/svg+xml;chatset=uft8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{$x-ag-row-drag-icon-color}' viewBox='0 0 96 96'%3E%3Cg%3E%3Cpolygon points='62.995 34.996 67.994 29.997 47.997 10.201 28 29.997 32.999 34.996 47.997 19.998'/%3E%3Cpolygon points='63 61 68 66 48 85.799 28 66 33 61 48 76 63 61'/%3E%3C/g%3E%3C/svg%3E"), "#", "%23") !default;
$x-row-selected-color:        #ebf1f4;
$x-row-hover-color:             theme-color('light-secondary');

.x-drag-drop {
  .ag-row-drag {
    @extend .d-none;
    .ag-row-hover:not(.ag-row-group) &,
    .ag-row-focus:not(.ag-row-group) & {
      @extend .d-flex;
    }
  }
}


.ag-body-viewport {
  @extend .bg-white;
  transform: translateZ(0); // Make scroll smooth
}


// Overrides
.ag-header-cell-menu-button {
  @extend .d-none;
}

// AG-Grid Layout
.ag-header-cell-label,
.ag-header-group-cell-label {
  @extend %font-size-sm,
					.text-uppercase,
					.font-weight-bold;
}

.ag-header-cell-label {
  @extend .text-default;
}

.ag-header-group-cell-label {
  @extend .text-primary;
}

.ag-header {
  @extend .text-antialiased,
          .border-bottom;

  .x-ag-header-none & {
    @extend .d-none;
  }
}

.ag-header-icon {
  @extend .position-absolute,
          .ml-1;
}

.ag-sort-order {
  @extend .d-none;
}

.ag-row {

  @extend .bg-white,
          .border-bottom;

  .x-btn-favourite {
    @extend .d-none;
  }

  &.ag-row-level-0 {
    &.ag-full-width-row {
      @extend .overflow-visible;
    }
    //.ag-floating-bottom & {
    //  @extend .border-0;
    //}
    //&:not(.ag-row-group-expanded) {
    //  @extend .border-bottom;
    //}
    // Row group top level background
    &.x-ag-section {
      background-color: theme-color('light-transparent') !important;
    }
  }

  // Remove footer rows' border as they have styled border
  .ag-floating-bottom & {
    @extend .border-0;
  }

  &.is-deleted > *,
  &.is-disabled > * {
		opacity: $x-ag-row-disabled-opacity;
	}

  &.ag-row-dragging {
    @extend .bg-secondary-transparent;
  }

  &.is-deleted,
  &.is-disabled {
    @extend .d-flex;
    &::after {
      @extend .d-none,
              .card,
              .text-white,
              .px-3,
              .py-2,
              .align-self-center,
              .m-auto;
      content: var(--x-disabled-message, "");
    }

  }

  &.is-draft {
    @extend .font-italic;
    opacity: $x-ag-row-draft-opacity;
  }

  &.matter-deleted {
    --x-disabled-message: "Matter Deleted - Undelete matter and try again.";
    @include hover-focus-active {
      &::after {
        @extend .bg-danger,
                .d-flex;
      }
    }
  }

  &.matter-locked {
    --x-disabled-message: "Matter Locked - You don't have permission to access this matter.";
    @include hover-focus-active {
      &::after {
        @extend .bg-secondary,
                .d-flex;
      }
    }
  }

  // Only rows in body have hover bg
  div[class^="ag-body"] & {
    &.ag-row-hover {
      background-color: $x-row-hover-color !important;

      .x-btn-favourite {
        @extend .d-flex;
      }
    }
  }

  &.ag-row-focus,
  &.ag-row-selected {
    background: $x-row-selected-color !important;
    &.ag-row-hover {
      // when hovering selected row, show darker bg color.
      background-color: darken(theme-color("primary-transparent"), 5%)!important;
    }
  }

	@include hover-focus {
    @extend %cursor-pointer;

    &.x-cursor-default {
      @extend %cursor-default;
    }

    &.is-disabled {
      @extend %cursor-not-allowed;
    }
	}
  .ag-row-animation & {
    @extend .x-transition-transform; // Animation for Dragging
  }
}

.ag-cell,
.ag-header-cell,
.ag-header-group-cell {
  @extend .px-2,
          .d-flex,
					.align-items-center;

  > * {
    @extend .mw-100;
  }

  &.is-centered {
		@extend .justify-content-center,
						.text-center;
	}

	&.is-right {
		@extend .justify-content-end,
						.text-right;
	}
}


.ag-cell {
	@extend %white-space-normal,
          .py-2;

  min-height: map_get($spacers, 5);

  .ag-floating-bottom & {
    @extend .p-0;
  }

  .ag-floating-bottom &,
  .ag-grid-slim & {
    min-height: auto;
  }

  &.ag-cell-inline-editing {

    .ag-cell-edit-input {
      @extend .form-control;
    }

    .ag-input-text-wrapper {
      @extend .w-100;
    }
	}
}


// Group Header
.ag-row-group {
	@extend .text-secondary-darker,
					.d-flex;
}

.ag-row-group-indent-0 {
	@extend .d-flex,
					.w-100,
          .h-100,
          .position-absolute,
					.align-items-center;

  .ag-row-group-contracted > & {
    @extend .bg-light-transparent;
  }

}

// Group Header - title container
.ag-group-value,
.ag-group-value > * {
	@extend .d-flex,
					.flex-row,
					.w-100,
					.px-2,
					.justify-content-start,
					.align-items-center;
}

// Group Header - Title
.ag-group-header {
  @extend %font-size-sm,
          .text-uppercase,
					.font-weight-bold,
					.mb-0;
}

// Group Header -  Toggle
.ag-group-header-toggle {
	@extend .text-secondary-darker,
					.mr-2;
}

// Group Header - Hide other stuff
.ag-group-expanded,
.ag-group-contracted,
.ag-group-child-count {
  @extend .d-none;
}

//
// Content
//

// number icon
.ag-content-label {
	@extend %font-size-sm,
          .d-flex,
		      .align-items-center;
}

.ag-number-icon {
	@extend .x-icon-sm,
					.text-secondary-darker,
					.mr-1,
					.d-none;

	.ag-row.is-disabled & {
		@extend .d-inline-flex;
	}
}


// number icon
.ag-content-name {
  @extend .font-weight-bold,
          .text-info,
          .text-truncate,
          .mb-0;

  &.text-info {
    @extend .text-info;
  }

  .ag-row-level-1 & {
    opacity: 0.85;
  }
}

.ag-content-description,
.ag-content-description dd {
	@extend %font-size-sm,
          .text-grey,
          .text-truncate,
          .mb-0;
}

.ag-content-number {
	@extend .px-2,
					.text-muted;
}


.x-ag-icon {
  @extend .d-flex,
          .text-muted,
          .x-icon-lg;

  &.text-success {
    @extend .text-success;
  }

  &.text-danger {
    @extend .text-danger;
  }

  &.x-icon-md {
    @extend .x-icon-md;
  }

  @include hover-focus-active {
    @extend .text-primary !optional;
  }
}

.x-icon-pinned {
	@extend .position-absolute,
					.text-secondary-darker,
					.x-icon-xl;
	left: 0;
	top: 0;
	z-index: $zindex-fixed;
}

// AG Footer
// Total count
.ag-total-count {
  @extend .py-2,
          .px-4,
          .d-block,
          .bg-light-transparent;
  p {
   @extend %font-size-sm,
           .m-0,
           .text-grey;
  }
}

// Hide enterprise filter for ag-grid
.ag-bl-east.ag-bl-normal-east {
	@extend .d-none,
					.invisible;
}


// Hide enterprise filter for ag-grid
.x-ag-popover {
	@extend .popover,
					.fade,
					.show,
					.bs-popover-bottom,
					.p-2,
					.position-absolute;

	strong {
		@extend .text-secondary-darker,
						.font-weight-bold;
	}
}


// Icons
// Start: temp icons placeholders untill we fix icons

.ag-icon {
	@extend .text-info,
					.d-flex,
					.align-items-center,
					.justify-content-center;
  top: 0.75rem;
  left: 1rem;

  .ag-row-group-expanded & {
		@extend .text-default;
  }
}

.ag-icon-up {
	 @extend .text-primary;
	 @include caret(up);
}

.ag-icon-forward {
	 @extend .text-primary;
	 @include caret(right);
}

.ag-icon-back {
	 @extend .text-primary;
	 @include caret(left);
}

.ag-icon-down {
	 @extend .text-primary;
	 @include caret(down);
}

// End: temp icons placeholders untill we fix icons

.x-cell-title {
	@extend %font-size-xs,
          .ag-content-name,
					.mt-2;
}

.x-cell-subtitle {
	@extend %font-size-xs,
          .m-0,
          .mb-1;
}

.x-cell-recipient-type {
	.x-icon {
		margin-top: ($spacer * .75);
	}
}

// Row Dragging Styles
.ag-row-drag {
  @extend %cursor-grab,
          .d-flex,
          .float-left;
  @include size(14px);

  background-image: $x-ag-row-drag-icon;
  background-size: cover;

  .ag-row:not(.ag-row-hover) & {
    opacity: $x-ag-row-disabled-opacity;
  }
}

.ag-dnd-ghost {
  @extend .dropdown-menu,
          .d-flex,
          .align-items-center,
          .p-2;

  font-family: inherit;
  height: auto !important;

  .ag-dnd-ghost-icon {
      .ag-icon-arrows {
        @include size(1rem);

        background-image: $x-ag-icon-arrows;
        background-size: cover;
      }
  }
  .ag-dnd-ghost-label {
    @extend %font-size-xs,
            .ml-2;
  }
}

.x-ag-auto-height {
  .ag-body,
  .ag-body-viewport-wrapper,
  .ag-body-viewport {
    @extend .h-auto,
            .mh-100;
  }
  .ag-body {
    flex: unset;
  }
}

// Show the bottom pinned row
.ag-floating-bottom-full-width-container {
  @extend .h-100,
          .w-100;
}

// Remove unnecessary scrollbar
.ag-body-container {
  @extend .mb-0;

  &.ag-layout-auto-height {
    min-height: 48px;
  }
}

.ag-layout-auto-height {
  .ag-full-width-viewport-wrapper {
    padding-bottom: 0 !important;
  }

  // Hide the last row's bottom border
  + .ag-floating-bottom {
    transform: translateY(-1px);
  }

  &.ag-overlay-no-rows-wrapper {
    @extend .pt-0;
  }
}


// No results styles for dynamic cell
.x-dynamic-cell {
  @extend .d-flex,
  .align-items-center;

  *, *:hover, *:focus {
    color: theme-color('default') !important;
  }
}

// Top Spacing on before total for single line
.x-no-results-active .ag-floating-bottom {
  margin-top: 50px;
}

//Grid group row edits(background colour and removed border)
span[class^=ag-row-group-indent] {
  background: theme-color('light-secondary');
}

.ag-row-group:not(.ag-row-group-contracted){
  border: 0 !important;
}


// disable focus generated by ag-grid
.x-row-no-focus {
  &.ag-row.ag-row-focus {
    background: unset !important;
  }
}