@import '../custom.less';

@grid-custom-modal-prefix-cls: ~'@{css-prefix}grid-toolbar-modal';
@grid-custom-prefix-cls: ~'@{css-prefix}grid-custom';
@grid-modal-prefix-cls: ~'@{css-prefix}grid-modal';
@split-prefix-cls: ~'@{css-prefix}split';
@checkbox-prefix-cls: ~'@{css-prefix}checkbox';
@search-prefix-cls: ~'@{css-prefix}search';
@filter-box-prefix-cls: ~'@{css-prefix}filter-box';
@input-prefix-cls: ~'@{css-prefix}input';
@popover-prefix-cls: ~'@{css-prefix}popover';

.@{grid-custom-modal-prefix-cls} {
  .@{grid-modal-prefix-cls}__box {
    .@{grid-modal-prefix-cls}__body {
      @apply ~'pb-2.5';
      @apply px-0;
      @apply pt-0;
    }
  }

  .@{grid-modal-prefix-cls}__content {
    @apply relative;
  }

  .@{grid-modal-prefix-cls}__header {
    @apply border-none;

    .@{grid-modal-prefix-cls}__close-btn {
      @apply ~'h-4.5';
      @apply ~'w-4.5';
    }
  }

  .@{grid-modal-prefix-cls}__close-btn,
  .@{grid-modal-prefix-cls}__zoom-btn {
    @apply ~'top-4.5';
  }

  .@{grid-custom-prefix-cls} {
    .@{grid-custom-prefix-cls}__tabs {
      @apply pt-7;

      .@{grid-custom-prefix-cls}__tabs-head {
        @apply whitespace-nowrap;
        @apply m-0;
        @apply overflow-hidden;
        @apply w-144;
        @apply absolute;
        @apply left-0;
        @apply top-0;
        z-index: 5000;
        @apply h-10;
        @apply ~'pt-0.5';

        ul {
          @apply h-full;
          @apply border-none;

          li {
            @apply float-left;
            @apply -mr-px;
            @apply ml-6;
            @apply cursor-pointer;
            @apply py-0;
            @apply ~'px-0.5';
            @apply text-color-text-primary;
            @apply h-full;
            min-width: auto;
            @apply leading-none;

            &.@{grid-custom-prefix-cls}__tabs-selected {
              @apply text-color-brand;
            }

            &.@{grid-custom-prefix-cls}__tabs-base {
              @apply font-bold;
            }
          }
        }
      }

      .@{grid-custom-prefix-cls}__tabs-body {
        .tabs-body-item {
          @apply h-96;

          .other-setting {
            @apply h-full;
            @apply border-y border-y-color-border-separator;
            @apply p-6;
            @apply relative;
            @apply -top-px;
            @apply box-border;

            .label {
              @apply mr-5;
              @apply text-xs;
            }
          }

          .@{split-prefix-cls}-wrapper {
            .@{split-prefix-cls}-pane {
              &.left-pane {
                @apply overflow-y-auto;
              }

              .header {
                @apply ~'pb-2.5';
                @apply mb-2;
                @apply text-color-none;
                @apply border-b border-b-color-border-separator;
                @apply flex;
                @apply justify-between;

                p {
                  @apply flex-1;
                  @apply m-0;
                }

                .clear-all {
                  @apply text-color-brand;
                  @apply cursor-pointer;
                  @apply ml-3;
                }

                span:not(.clear-all) {
                  @apply inline-block;
                  @apply text-center;
                  @apply w-16;
                }
              }

              .@{input-prefix-cls} {
                .@{input-prefix-cls}__inner {
                  @apply border-0;
                  @apply p-0;
                  @apply pl-2;
                  @apply h-6;

                  &:focus {
                    @apply border;
                  }
                }

                .@{input-prefix-cls}__suffix {
                  @apply hidden;
                  @apply ~'right-1.5';

                  svg {
                    @apply w-3;
                    @apply h-3;
                  }
                }
              }

              .column-list-panel {
                height: calc(100% - theme('spacing.5'));
                @apply overflow-y-auto;

                .column-list-item {
                  @apply grid;
                  @apply h-auto;
                  @apply overflow-hidden;
                  @apply cursor-pointer;
                  @apply origin-center;
                  @apply ~"min-h-[theme(spacing.8)]";
                  @apply transition-all;
                  @apply duration-300;
                  @apply ease-in-out;
                  grid-template-rows: 1fr;

                  &.item-collapse {
                    grid-template-rows: 0fr;
                  }

                  > div {
                    @apply w-full;
                    @apply min-h-0;
                  }

                  &.show-dropdown .dropdown-column .set-btn {
                    @apply visible;
                  }

                  .sort-number {
                    @apply w-10;
                    @apply text-center;

                    .sort-number-display {
                      @apply h-6;
                      @apply flex;
                      @apply justify-center;
                      @apply items-center;
                      @apply bg-transparent;
                      @apply cursor-pointer;

                      &:hover {
                        @apply bg-color-bg-1;
                      }
                    }
                  }

                  .name {
                    @apply flex-1;
                    @apply my-0;
                    @apply mx-2;
                    @apply overflow-hidden;
                    @apply whitespace-nowrap;
                    @apply text-ellipsis;
                    @apply h-8;
                    @apply leading-8;

                    &.dragable {
                      @apply cursor-move;
                    }
                  }

                  .child-name {
                    @apply pl-8;
                  }

                  .close-icon {
                    @apply ~'ml-4.5';
                    @apply cursor-pointer;
                    @apply invisible;
                  }

                  .drag-icon {
                    @apply grid;
                    @apply cursor-move;
                    @apply ~'mr-1.5';

                    @apply grid-cols-2;
                    @apply ~'gap-x-0.5';
                    @apply gap-y-1;

                    span {
                      @apply inline-block;
                      @apply ~'w-0.5';
                      @apply ~'h-0.5';
                      @apply bg-color-none;
                    }
                  }

                  .dropdown-btn {
                    @apply inline-block;
                    @apply w-6;
                    @apply h-6;
                    @apply leading-6;
                    @apply bg-color-bg-2;
                  }

                  .dropdown-column {
                    @apply w-16;
                    @apply text-center;

                    .is-text {
                      @apply inline-block;
                      @apply w-16;

                      .set-btn.visibility-hidden {
                        @apply invisible;
                      }
                    }

                    &.visibility-hidden {
                      @apply invisible;
                    }
                  }

                  .set-btn {
                    @apply text-xs;
                    @apply text-center;
                    @apply inline-block;
                    @apply invisible;
                    @apply w-16;
                  }

                  .column-container {
                    @apply flex;
                    @apply items-center;

                    &.with-padding {
                      @apply pr-2;
                      @apply ~'pl-1.5';
                    }

                    .icon-expand {
                      @apply ml-1;
                      @apply -mr-1;
                      @apply rotate-0;
                      @apply transition-transform;
                      @apply duration-300;
                      @apply ease-in-out;
                    }

                    .icon-collapse {
                      @apply rotate-90;
                    }

                    &:hover {
                      @apply bg-color-bg-2;

                      .close-icon {
                        @apply visible;
                      }

                      .close-icon.visibility-hidden {
                        @apply invisible;
                      }

                      .close-icon svg {
                        @apply fill-color-none;
                      }

                      .set-btn:not(.visibility-hidden) {
                        @apply visible;
                      }

                      .@{input-prefix-cls} {
                        &:hover .@{input-prefix-cls}__inner {
                          @apply bg-white;
                        }

                        .@{input-prefix-cls}__inner {
                          @apply bg-color-bg-2;
                        }

                        .@{input-prefix-cls}__suffix {
                          @apply block;
                        }
                      }
                    }
                  }
                }
              }
            }

            .left-panel {
              @apply pt-4;
              @apply ~'pr-4.5';
              @apply pb-4;
              @apply pl-6;

              .tiny-tree {
                @apply p-0;
                @apply -ml-2;
                @apply ~'-mr-1.5';
              }

              .multi-check-all-btn {
                @apply ~'mb-2.5';
                @apply ml-5;
              }
            }

            .right-panel {
              @apply p-5;
              @apply h-full;
              @apply box-border;

              .child-dropdown {
                @apply mr-10;
              }
            }

            .group-label {
              @apply text-sm;
              @apply font-bold;
              @apply ~'mt-4.5';
              @apply mx-0;
              @apply mb-3;

              &.group-label-first {
                @apply mt-0;
              }
            }

            .check-all-btn {
              @apply mb-4;
            }

            .@{checkbox-prefix-cls}-group.is-vertical .@{checkbox-prefix-cls}:not(:last-child) {
              @apply mb-3;
            }

            .@{checkbox-prefix-cls} .@{checkbox-prefix-cls}__label {
              @apply text-sm;
            }

            .@{search-prefix-cls} {
              @apply ~'mb-4.5';
            }

            .select-template {
              @apply mb-2;

              .@{filter-box-prefix-cls} {
                @apply max-w-full;

                .value {
                  @apply max-w-none;
                }

                .filter-icon-close {
                  @apply shrink-0;
                }
              }
            }
          }
        }
      }
    }

    .@{grid-custom-prefix-cls}__footer {
      @apply ~'my-0.5';
      @apply mx-3;
      @apply flex;
      @apply text-right;
      @apply ~'pr-2.5';

      > button {
        @apply my-0 mx-1;
      }

      > span {
        @apply my-0 mx-1;
      }
    }
  }
}

.@{popover-prefix-cls}.grid-toolbar-template-popover {
  .radio-box {
    @apply ~"mb-3.5";
  }

  .btn-box {
    @apply text-right;
    @apply mt-4;
  }
}