.grid-view {
  @include absolute(0);

  overflow: hidden;

  .scrollbars__vertical-wrapper {
    // We don't want to scrollbar to go over the header and footer.
    top: 33 + 3px;
    bottom: 48 + 3px;
  }

  &.grid-view--disable-selection {
    user-select: none;
  }
}

%grid-view__divider-width-handle {
  width: 9px;
  height: 26px;
  cursor: col-resize;

  &::before {
    content: '';

    @include absolute(0, 2px, 0, 2px);

    border-radius: 2px;
  }

  &:hover::before,
  &.dragging::before {
    background-color: $color-primary-500;
  }
}

.grid-view__left,
.grid-view__right {
  @include absolute(0, auto);

  z-index: 1;
  overflow: hidden;
}

.grid-view__inner {
  @include absolute(0);

  overflow: hidden;
}

// The width of the first column can be adjusted that is why it is specified in the html
// file.
.grid-view__left {
  left: 0;
  background-color: $color-neutral-50;
}

// The width of the first column can be adjusted that is why the left offset is
// specified in the html file.
.grid-view__right {
  right: 0;
}

// The divider has not left property because the width of the left column can be
// adjusted that is why it is specified in the html file.
.grid-view__divider {
  @include absolute(0, auto);

  z-index: 3;
  width: 4px;
  border-left: 1px solid $color-neutral-400;
  overflow: hidden;
  pointer-events: none;

  &::before {
    display: none;
    content: '';

    @include absolute(0, auto, 0, 0);

    width: 4px;
    left: -4px;
    background-color: black;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
  }

  &.shadow::before {
    display: block;
  }
}

.grid-view__divider-width {
  @extend %grid-view__divider-width-handle;
  @include absolute(3px, auto, auto, auto);

  margin-left: -4.5px;
  z-index: 3;
}

.grid-view__head {
  @include absolute(0, 0, auto, 0);

  display: flex;
  height: 33px;
  background-color: $color-neutral-50;
  border-bottom: 1px solid $color-neutral-200;
}

.grid-view__head-row-identifier {
  @include flex-align-items();

  height: 100%;
}

.grid-view__head-row-identifier-dropdown {
  position: relative;
  z-index: 1;
  padding-left: 8px;
  color: $color-neutral-600;

  &:hover {
    color: $color-neutral-900;
  }
}

.grid-view__head-group {
  position: relative;
  height: 33px;
}

.grid-view__head-group-width-handle {
  @extend %grid-view__divider-width-handle;
  @include absolute(3px, auto, auto, auto);

  margin-left: -4.5px;
  z-index: 3;
}

.grid-view__body {
  position: absolute;
  left: 0;
  top: 33px;
  right: 0;
  bottom: 48px;
  overflow: hidden;
}

.grid-view__body-inner {
  padding-bottom: 100px;
}

.grid-view__foot {
  @include absolute(auto, 0, 0, 0);

  display: flex;
  height: 48px;
  background-color: $color-neutral-50;
  border-top: 1px solid $color-neutral-200;
}

.grid-view__foot-info {
  @extend %ellipsis;

  @include fixed-height(32px, 13px);

  min-width: 70px;
  padding-left: 6px;
}

.grid-view__foot-logo {
  position: fixed;
  right: 12px;
  bottom: 16px;

  img {
    display: block;
    max-height: 100%;
  }
}

.grid-view__placeholder {
  position: relative;
  background-color: $white;
  background-image: linear-gradient(
    0deg,
    $color-neutral-200 1.52%,
    $white 1.52%,
    $white 50%,
    $color-neutral-200 50%,
    $color-neutral-200 51.52%,
    $white 51.52%,
    $white 100%
  );
  background-size: 66px 66px;
}

.grid-view__placeholder-groups {
  @include absolute(0, auto, 0, 0);

  background-color: $color-neutral-50;
}

.grid-view__placeholder-column {
  @include absolute(0, auto, 0, auto);

  border-right: 1px solid $color-neutral-200;

  &.grid-view__placeholder-column--no-border-right,
  .grid-view__left & {
    border-right: none;
  }
}

.grid-view__filtered-no-results {
  @include absolute(50%, auto, auto, 50%);

  margin: -33px 0 0 -150px;
  width: 300px;
  height: 66px;
  text-align: center;
}

.grid-view__filtered-no-results-icon {
  font-size: 26px;
  margin-bottom: 10px;
}

.grid-view__filtered-no-results-content {
  font-size: 24px;
  font-weight: 600;
}

.grid-view__rows {
  position: absolute;
  z-index: 1;
  top: 0;
  background-color: $white;
}

.grid-view__row {
  @extend .clearfix;

  position: relative;
  display: flex;
  height: 32px + 1px;

  &.grid-view__row--warning::before {
    @include absolute(-2px, -2px, -2px, -2px);

    content: '';
    z-index: 2;
    border: 2px solid $color-warning-500;
    pointer-events: none;
  }
}

.grid-view__row-placeholder {
  height: 32px + 1px;
  width: 1px;
}

.grid-view__row-warning {
  @include absolute(auto, auto, -20px, 0);
  @include fixed-height(20px, 12px);

  z-index: 1;
  background-color: $color-warning-500;
  color: $white;
  padding: 0 4px;
}

// Because the width of a column can be adjusted it is specified in the html file.
.grid-view__column {
  position: relative;
  height: 32px + 1px;
  border-right: 1px solid $color-neutral-200;
  border-bottom: 1px solid $color-neutral-200;

  .grid-view__head & {
    height: 32px;
    border-bottom: none;
    background-color: $color-neutral-100;
  }

  .grid-view__foot & {
    border-right: 0;
    border-bottom: 0;
  }

  &.grid-view__column--no-border-right,
  .grid-view__left & {
    border-right: none;
  }

  &.grid-view__column--sorted::after,
  &.grid-view__column--grouped::after,
  &.grid-view__column--filtered::after {
    content: '';

    @include absolute(0, 0, 0, 0);
  }

  &.grid-view__column--sorted::after {
    background-color: rgba($color-warning-100, 0.8);
  }

  &.grid-view__column--grouped::after {
    background-color: rgba($color-purple-100, 0.5);
  }

  &.grid-view__column--filtered::after {
    background-color: rgba($color-success-100, 0.5);
  }

  &.grid-view__column--group-end::before {
    @include absolute(auto, auto, -1px, 0);

    content: '';
    height: 1px;
    background-color: $color-neutral-400;
    width: 100%;
    pointer-events: none;
  }
}

.grid-view__group-by-divider {
  @include absolute(0, auto, 0, auto);

  z-index: 3;
  width: 1px;
  background-color: $color-neutral-400;
}

.grid-view__groups {
  position: absolute;
  z-index: 1;
  top: 0;
  display: flex;
  background-color: $color-neutral-50;
}

.grid-view__group-span {
  position: relative;

  &::after {
    @include absolute(auto, auto, 0, 0);

    content: '';
    height: 1px;
    background-color: $color-neutral-400;
    width: 100%;
    pointer-events: none;
  }
}

.grid-view__group {
  position: sticky;
  top: 0;
  background-color: $color-neutral-50;
  width: 100%;
}

.grid-view__group-cell {
  display: flex;
  height: 33px;
  align-items: center;
  width: 100%;
  padding: 0 8px;
}

.grid-view__group-name {
  @extend %ellipsis;

  line-height: 33px;
  font-size: 12px;
  font-weight: 600;
}

.grid-view__group-value {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

.grid-view__group-count {
  font-size: 11px;
  line-height: 18px;
  font-weight: 600;
  padding: 0 5px;
  background-color: $color-neutral-200;
  margin-left: 8px;

  @include rounded($rounded);
}

.grid-view__row-info {
  display: flex;
  align-items: center;
  line-height: 32px;

  &.grid-view__row-info--matches-search {
    background-color: $color-primary-100;
  }
}

.grid-view__row-drag {
  @include absolute(0, auto, 0, 0);

  width: 18px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  cursor: grab;
  display: none;

  &::before {
    @include absolute(0);

    content: '';
    width: 8px;
    background-image: radial-gradient($color-neutral-200 40%, transparent 40%);
    background-size: 4px 4px;
    background-repeat: repeat;
  }

  .grid-view__row--hover & {
    display: block;
  }
}

.grid-view__row-count {
  @extend %ellipsis;

  flex: 1;
  margin-left: 8px;

  &.grid-view__row-count--small {
    font-size: 11px;
  }

  .grid-view__row--loading & {
    color: $white;

    &::after {
      @include loading();
      @include absolute(50%, auto, auto, 6px);

      content: '';
      margin-top: -0.7rem;
    }
  }
}

.grid-view__row-more {
  padding: 2px;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: $color-neutral-400;
  visibility: hidden;
  @include rounded($rounded);

  @include flex-align-items();

  .grid-view__row--hover &,
  .grid-view__row--selected & {
    display: flex;
    visibility: visible;
  }

  &:hover {
    background-color: $color-primary-100;
    color: $color-primary-800;
  }
}

.grid-view__cell {
  @include absolute(0);

  -moz-user-select: none;

  &.active {
    @include absolute(-2px);

    z-index: 2;
    border: 2px solid $color-primary-500;
    border-radius: 2px;

    &.editing {
      @include absolute(-3px);

      border: 3px solid $color-primary-600;
    }

    &.invalid {
      border: 3px solid $color-error-400;
      border-bottom: 0;
      border-bottom-left-radius: 0;
      border-bottom-right-radius: 0;
    }
  }

  &.cell-error {
    background-color: $color-error-100;
    color: $color-neutral-500;
  }

  .grid-view__row--selected & {
    &.active {
      background-color: rgba(255, 255, 255, 0.7);
    }

    &.cell-error {
      background-color: $color-error-100;
    }
  }

  .grid-view__column--matches-search & {
    background-color: $color-primary-100;

    &.active {
      background-color: $color-primary-100;
    }
  }

  .grid-view__column--multi-select & {
    background-color: $color-primary-100;

    &.active {
      background-color: $color-primary-100;
    }
  }

  .grid-view__column--multi-select-top & {
    top: -2px;
    z-index: 2;
    border-top: 2px solid $color-primary-500;
  }

  .grid-view__column--multi-select-right & {
    right: -2px;
    z-index: 2;
    border-right: 2px solid $color-primary-500;
  }

  .grid-view__column--multi-select-bottom & {
    bottom: -2px;
    z-index: 2;
    border-bottom: 2px solid $color-primary-500;
  }

  .grid-view__column--multi-select-left & {
    left: -2px;
    z-index: 2;
    border-left: 2px solid $color-primary-500;
  }

  .grid-view__cell--error {
    @extend %ellipsis;

    @include absolute(100%, -3px, auto, -3px);

    border: 3px solid $color-error-400;
    border-top: 0;
    background-color: $color-error-100;
    color: $color-error-900;
    padding: 0 6px;
    line-height: 34px;
    height: 34px;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
  }

  &.active-by {
    border-color: $color-success-500;
  }

  .grid-view__cell--active-by {
    @include absolute(-8px, 0, auto, auto);
    @include fixed-height(18px, 12px);

    background-color: $color-success-500;
    color: $white;
    padding: 0 3px;
    transform: translateX(50%);
    @include rounded($rounded);

    .icon {
      font-size: 9px;
    }
  }
}

.grid-view__description {
  position: relative;
  z-index: 1;
  padding: 0 0 0 10px;
  height: 100%;

  @include flex-align-items(5px);

  .grid-view__description-icon,
  .grid-view__description-options {
    line-height: inherit;
    color: $color-neutral-600;
  }

  .grid-view__description-icon {
    font-size: 16px;
  }

  .grid-view__description-icon-error {
    line-height: inherit;
    color: $color-error-400;
    padding-right: 45px;
    text-align: right;
  }

  .grid-view__description-options {
    margin-left: auto;
    cursor: pointer;
    padding: 0 10px;
    height: 100%;
    display: flex;
    align-items: center;

    &:hover {
      color: $color-neutral-900;
    }
  }

  .grid-view__description-width {
    @extend %grid-view__divider-width-handle;
    @include absolute(3px, -4.5px, 3px, auto);

    z-index: 2;
  }

  .grid-view__description-name {
    @extend %ellipsis;

    user-select: none;
    line-height: 15px;
  }

  &.grid-view__description--loading {
    &::after {
      @include loading();
      @include absolute(50%, 12px, auto, auto);

      content: '';
      margin-top: -0.7rem;
    }

    .grid-view__description-options {
      display: none;
    }
  }
}

.grid-view__add-column {
  @include flex-align-items();

  color: $color-neutral-900;
  height: 100%;
  justify-content: center;

  &:hover {
    background-color: $color-primary-100;
  }
}

.grid-view__add-column-icon {
  font-size: 22px;
}

.grid-view__add-column-placeholder {
  display: none;

  &.hover {
    display: block;
  }
}

.grid-view__add-row {
  color: $color-neutral-900;
  background-color: $white;
  padding-left: 8px;
  height: 100%;

  @include flex-align-items();

  &:hover {
    text-decoration: none;
  }

  &.hover {
    background-color: $color-primary-100;
  }
}

.grid-view__field-dragging {
  @include absolute(0, auto);

  z-index: 4;
  background-color: rgba(0, 0, 0, 0.08);
}

.grid-view__field-target {
  @include absolute(0, auto, 48px, auto);

  z-index: 5;
  border-left: solid 1px $color-neutral-900;
}

.grid-view__row-dragging-container {
  // Compensation for the head and foot.
  @include absolute(33px, 0, 48px, 0);

  z-index: 4;
  overflow: hidden;
}

.grid-view__row-dragging {
  @include absolute(auto, auto, auto, 0);

  background-color: rgba(0, 0, 0, 0.08);
  height: 33px;
}

.grid-view__row-target {
  @include absolute(auto, auto, auto, 0);

  border-top: solid 1px $color-neutral-900;
}

.grid-view__add-row-icon {
  font-size: 22px;
}