@import '../custom.less';

@grid-prefix-cls: ~'@{css-prefix}grid';
@grid-header-prefix-cls: ~'@{css-prefix}grid-header';
@grid-cell-prefix-cls: ~'@{css-prefix}grid-cell';
@grid-checkbox-prefix-cls: ~'@{css-prefix}grid-checkbox';

.@{grid-prefix-cls}__header-wrapper {
  @apply bg-color-fill-8;

  .@{grid-prefix-cls}__repair {
    @apply absolute;
    @apply left-0;
    @apply bottom-0;
    @apply h-0;
    @apply border-b border-b-color-border-separator;
  }
}

.@{grid-header-prefix-cls}__column {
  @apply relative;
  @apply text-xs;
  @apply text-color-text-primary;

  // 在表格个性化场景，动态的设置冻结列，这里需要在非冻结列情况下消除之前设置的left和right样式，并提升权重覆盖style属性
  &:not(.fixed__column) {
    left: unset !important;
    right: unset !important;
  }

  &.col__title-checked {
    @apply bg-color-bg-2;
    .@{grid-prefix-cls}-edit-icon {
      &.@{grid-prefix-cls}-icon__edit-outline {
        &:before {
          @apply bg-color-bg-2;
        }
      }
    }
  }

  &.col__ellipsis {
    .@{grid-prefix-cls}-cell-text.is__sortable {
      min-width: 23px;
    }
    .@{grid-prefix-cls}-edit-icon {
      @apply static;
      @apply translate-y-0;
      @apply shrink-0;
    }
  }

  .@{grid-prefix-cls}-required-icon {
    @apply inline-block;
    @apply text-color-error;
    line-height: 14px;
    @apply text-sm;
    &:before {
      @apply ~"content-['*']";
      @apply ~'w-2.5';
      @apply ~'h-2.5';
      @apply block;
      @apply text-left;
    }
    + .@{grid-prefix-cls}-cell-text {
      @apply w-auto;
    }
  }

  .@{grid-prefix-cls}-cell-text {
    @apply w-full;
    line-height: 1.375rem;
  }

  .@{grid-prefix-cls}-edit-icon {
    @apply mr-1;
    order: -1;
    @apply text-base;
    @apply fill-color-icon-disabled;
    @apply shrink-0;
    + .@{grid-prefix-cls}-cell-text {
      @apply w-auto;
    }
  }

  .@{grid-prefix-cls}-thead-partition,
  .@{grid-prefix-cls}-resizable {
    @apply absolute;
    @apply right-0;
    @apply translate-x-1/2;
    @apply bottom-0;
    @apply top-0;
    @apply m-auto;
    @apply w-4;
    @apply h-4;
    @apply text-center;
    // 因为与AUI冻结实现方式不一样，此处不要同步  @apply ~'z-[1]'
    @apply select-none;
    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
      @apply m-0;
    }

    &.is__line {
      &:before,
      &:after {
        @apply content-[''];
        @apply block;
        @apply align-middle;
        @apply my-0 mx-auto;
      }
      &:before {
        @apply w-px;
        @apply h-full;
        @apply bg-color-border-separator;
      }
      &:after {
        @apply w-0;
        @apply h-full;
      }
    }
  }

  .@{grid-prefix-cls}-resizable {
    @apply cursor-col-resize;
  }

  &.is__multilevel {
    .@{grid-prefix-cls}-resizable {
      height: calc(100% - 16px);
    }
  }

  .@{grid-checkbox-prefix-cls} {
    > input {
      &:not(:checked) {
        & + .@{grid-checkbox-prefix-cls}__icon {
          &:hover {
            @apply border-color-border;
          }
        }
      }
    }
  }

  .@{grid-checkbox-prefix-cls}.is__indeterminate {
    > input {
      & + .@{grid-checkbox-prefix-cls}__icon {
        &:hover {
          @apply border-color-border-focus;
        }
      }
    }
  }
}

.@{grid-prefix-cls} {
  th.col__selection > .@{grid-cell-prefix-cls} {
    @apply relative;

    & > .selection-dropdown-wrapper {
      @apply absolute;
      @apply -right-2;
      @apply -top-1;
      @apply cursor-pointer;
    }
  }
}