# externals/ng-zorro-antd/components/style/mixins/customize.less

> Allowed (layout-only): wrapped :not() selector-arg indent (prettier/prettier#16165)

## Option 1

`````json
{"printWidth":80}
`````

### Diff

`````diff
===================================================================
--- prettier
+++ oxfmt
@@ -36,10 +36,10 @@
           background: @background;
           border-bottom: @popover-border;
         }
         &-content-item:not(
-            .@{transfer-prefix-cls}-list-content-item-disabled
-          ):hover {
+          .@{transfer-prefix-cls}-list-content-item-disabled
+        ):hover {
           background-color: @item-hover-bg;
         }
       }
     }

`````

### Actual (oxfmt)

`````less
// customize dark components background in popover containers(like Modal, Drawer, Card, Popover, Popconfirm, Notification, ...)
// for dark theme
.popover-customize-bg(@containerClass, @background: @popover-background, @prefix: @ant-prefix)
  when
  (@theme = dark) {
  @picker-prefix-cls: ~"@{prefix}-picker";
  @slider-prefix-cls: ~"@{prefix}-slider";
  @anchor-prefix-cls: ~"@{prefix}-anchor";
  @collapse-prefix-cls: ~"@{prefix}-collapse";
  @tab-prefix-cls: ~"@{prefix}-tabs";
  @timeline-prefix-cls: ~"@{prefix}-timeline";
  @tree-prefix-cls: ~"@{prefix}-tree";
  @card-prefix-cls: ~"@{prefix}-card";
  @badge-prefix-cls: ~"@{prefix}-badge";
  @transfer-prefix-cls: ~"@{prefix}-transfer";
  @calendar-prefix-cls: ~"@{prefix}-picker-calendar";
  @calendar-picker-prefix-cls: ~"@{prefix}-picker";
  @table-prefix-cls: ~"@{prefix}-table";

  @popover-border: @border-width-base @border-style-base
    @popover-customize-border-color;

  .@{containerClass} {
    .@{picker-prefix-cls}-clear,
    .@{slider-prefix-cls}-handle,
    .@{anchor-prefix-cls}-wrapper,
    .@{collapse-prefix-cls}-content,
    .@{timeline-prefix-cls}-item-head,
    .@{card-prefix-cls} {
      background-color: @background;
    }

    .@{transfer-prefix-cls} {
      &-list {
        &-header {
          background: @background;
          border-bottom: @popover-border;
        }
        &-content-item:not(
          .@{transfer-prefix-cls}-list-content-item-disabled
        ):hover {
          background-color: @item-hover-bg;
        }
      }
    }

    tr.@{table-prefix-cls}-expanded-row {
      &,
      &:hover {
        > td {
          background: #272727;
        }
      }
    }
    .@{table-prefix-cls}.@{table-prefix-cls}-small {
      thead {
        > tr {
          > th {
            background-color: @background;
            border-bottom: @popover-border;
          }
        }
      }
    }
    .@{table-prefix-cls} {
      background-color: @background;
      .@{table-prefix-cls}-row-expand-icon {
        border: @popover-border;
      }

      tfoot {
        > tr {
          > th,
          > td {
            border-bottom: @popover-border;
          }
        }
      }

      thead {
        > tr {
          > th {
            background-color: #272727;
            border-bottom: @popover-border;
          }
        }
      }

      tbody {
        > tr {
          > td {
            border-bottom: @popover-border;
            &.@{table-prefix-cls}-cell-fix-left,
            &.@{table-prefix-cls}-cell-fix-right {
              background-color: @background;
            }
          }
          &.@{table-prefix-cls}-row:hover {
            > td {
              background: @table-header-sort-active-bg;
            }
          }
        }
      }
      &.@{table-prefix-cls}-bordered {
        .@{table-prefix-cls}-title {
          border: @popover-border;
        }

        // ============================= Cell =============================
        thead > tr > th,
        tbody > tr > td,
        tfoot > tr > th,
        tfoot > tr > td {
          border-right: @popover-border;
        }

        // Fixed right should provides additional border
        .@{table-prefix-cls}-cell-fix-right-first::after {
          border-right: @popover-border;
        }

        // ============================ Header ============================
        table > {
          thead {
            > tr:not(:last-child) > th {
              border-bottom: @border-width-base @border-style-base
                @border-color-split;
            }
          }
        }

        // =========================== Content ============================
        .@{table-prefix-cls}-container {
          border: @popover-border;
        }

        // ========================== Expandable ==========================
        .@{table-prefix-cls}-expanded-row-fixed {
          &::after {
            border-right: @popover-border;
          }
        }

        .@{table-prefix-cls}-footer {
          border: @popover-border;
        }
      }
      .@{table-prefix-cls}-filter-trigger-container-open {
        background-color: #525252;
      }
    }

    .@{calendar-prefix-cls}-full {
      background-color: @background;
      .@{calendar-picker-prefix-cls}-panel {
        background-color: @background;
        .@{calendar-prefix-cls}-date {
          border-top: 2px solid @popover-customize-border-color;
        }
      }
    }

    .@{tab-prefix-cls} {
      &.@{tab-prefix-cls}-card
        .@{tab-prefix-cls}-card-bar
        .@{tab-prefix-cls}-tab-active {
        background-color: @background;
        border-bottom: @border-width-base solid @background;
      }
    }

    .@{badge-prefix-cls} {
      &-count {
        box-shadow: 0 0 0 1px @background;
      }
    }

    .@{tree-prefix-cls} {
      &-show-line {
        .@{tree-prefix-cls}-switcher {
          background: @background;
        }
      }
    }
  }
}

`````

### Expected (prettier)

`````less
// customize dark components background in popover containers(like Modal, Drawer, Card, Popover, Popconfirm, Notification, ...)
// for dark theme
.popover-customize-bg(@containerClass, @background: @popover-background, @prefix: @ant-prefix)
  when
  (@theme = dark) {
  @picker-prefix-cls: ~"@{prefix}-picker";
  @slider-prefix-cls: ~"@{prefix}-slider";
  @anchor-prefix-cls: ~"@{prefix}-anchor";
  @collapse-prefix-cls: ~"@{prefix}-collapse";
  @tab-prefix-cls: ~"@{prefix}-tabs";
  @timeline-prefix-cls: ~"@{prefix}-timeline";
  @tree-prefix-cls: ~"@{prefix}-tree";
  @card-prefix-cls: ~"@{prefix}-card";
  @badge-prefix-cls: ~"@{prefix}-badge";
  @transfer-prefix-cls: ~"@{prefix}-transfer";
  @calendar-prefix-cls: ~"@{prefix}-picker-calendar";
  @calendar-picker-prefix-cls: ~"@{prefix}-picker";
  @table-prefix-cls: ~"@{prefix}-table";

  @popover-border: @border-width-base @border-style-base
    @popover-customize-border-color;

  .@{containerClass} {
    .@{picker-prefix-cls}-clear,
    .@{slider-prefix-cls}-handle,
    .@{anchor-prefix-cls}-wrapper,
    .@{collapse-prefix-cls}-content,
    .@{timeline-prefix-cls}-item-head,
    .@{card-prefix-cls} {
      background-color: @background;
    }

    .@{transfer-prefix-cls} {
      &-list {
        &-header {
          background: @background;
          border-bottom: @popover-border;
        }
        &-content-item:not(
            .@{transfer-prefix-cls}-list-content-item-disabled
          ):hover {
          background-color: @item-hover-bg;
        }
      }
    }

    tr.@{table-prefix-cls}-expanded-row {
      &,
      &:hover {
        > td {
          background: #272727;
        }
      }
    }
    .@{table-prefix-cls}.@{table-prefix-cls}-small {
      thead {
        > tr {
          > th {
            background-color: @background;
            border-bottom: @popover-border;
          }
        }
      }
    }
    .@{table-prefix-cls} {
      background-color: @background;
      .@{table-prefix-cls}-row-expand-icon {
        border: @popover-border;
      }

      tfoot {
        > tr {
          > th,
          > td {
            border-bottom: @popover-border;
          }
        }
      }

      thead {
        > tr {
          > th {
            background-color: #272727;
            border-bottom: @popover-border;
          }
        }
      }

      tbody {
        > tr {
          > td {
            border-bottom: @popover-border;
            &.@{table-prefix-cls}-cell-fix-left,
            &.@{table-prefix-cls}-cell-fix-right {
              background-color: @background;
            }
          }
          &.@{table-prefix-cls}-row:hover {
            > td {
              background: @table-header-sort-active-bg;
            }
          }
        }
      }
      &.@{table-prefix-cls}-bordered {
        .@{table-prefix-cls}-title {
          border: @popover-border;
        }

        // ============================= Cell =============================
        thead > tr > th,
        tbody > tr > td,
        tfoot > tr > th,
        tfoot > tr > td {
          border-right: @popover-border;
        }

        // Fixed right should provides additional border
        .@{table-prefix-cls}-cell-fix-right-first::after {
          border-right: @popover-border;
        }

        // ============================ Header ============================
        table > {
          thead {
            > tr:not(:last-child) > th {
              border-bottom: @border-width-base @border-style-base
                @border-color-split;
            }
          }
        }

        // =========================== Content ============================
        .@{table-prefix-cls}-container {
          border: @popover-border;
        }

        // ========================== Expandable ==========================
        .@{table-prefix-cls}-expanded-row-fixed {
          &::after {
            border-right: @popover-border;
          }
        }

        .@{table-prefix-cls}-footer {
          border: @popover-border;
        }
      }
      .@{table-prefix-cls}-filter-trigger-container-open {
        background-color: #525252;
      }
    }

    .@{calendar-prefix-cls}-full {
      background-color: @background;
      .@{calendar-picker-prefix-cls}-panel {
        background-color: @background;
        .@{calendar-prefix-cls}-date {
          border-top: 2px solid @popover-customize-border-color;
        }
      }
    }

    .@{tab-prefix-cls} {
      &.@{tab-prefix-cls}-card
        .@{tab-prefix-cls}-card-bar
        .@{tab-prefix-cls}-tab-active {
        background-color: @background;
        border-bottom: @border-width-base solid @background;
      }
    }

    .@{badge-prefix-cls} {
      &-count {
        box-shadow: 0 0 0 1px @background;
      }
    }

    .@{tree-prefix-cls} {
      &-show-line {
        .@{tree-prefix-cls}-switcher {
          background: @background;
        }
      }
    }
  }
}

`````
