@import '~ag-grid/src/styles/ag-grid.scss';

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

$x-ag-row-disabled-opacity: 0.5                                       !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%3Ccircle cx='8' cy='8' r='8'/%3E%3Ccircle cx='8' cy='32' r='8'/%3E%3Ccircle cx='8' cy='64' r='8'/%3E%3Ccircle cx='8' cy='88' r='8'/%3E%3Ccircle cx='32' cy='8' r='8'/%3E%3Ccircle cx='32' cy='32' r='8'/%3E%3Ccircle cx='32' cy='64' r='8'/%3E%3Ccircle cx='32' cy='88' r='8'/%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;

.ag-body-viewport-wrapper {
  margin-bottom: -4px;
}

.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;

  &.ag-row-has-border {
    @extend .border-bottom;

  }

  &.ag-row-level-0 {
    .ag-floating-bottom & {
      @extend .border-0;
    }
    &:not(.ag-row-group-expanded) {
      @extend .border-bottom;
    }
  }

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

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

	&.is-deleted {
		box-shadow: inset 3px 0 0 0 rgba(theme-color("danger"), .5);
	}
  // Only rows in body have hover bg
  .ag-body & {
    &.ag-row-hover {
      @extend .bg-light-transparent;
    }
  }

  &.ag-row-focus,
  &.ag-row-selected {
    @extend .bg-primary-transparent;
    &.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;
      > * {
        pointer-events: none;
      }
    }
	}
  .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;
    }
	}
}


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

.ag-row-group-indent-0 {
	@extend .d-flex,
					.w-100,
					.bg-light-transparent,
					.align-items-center;
}

// 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-primary-lighter,
          .text-truncate,
          .mb-0;
}

.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;
  }

  &.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(20px);

  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;
  }
}