@import (reference) '../../style/themes/index.less';

@pro-form-light-filter-prefix-cls: ~'@{ant-prefix}-pro-form-light-filter';

.@{pro-form-light-filter-prefix-cls} {
  line-height: 30px;

  // 防止 &-container 负 margin 溢出影响外部布局
  // @see https://yuque.antfin-inc.com/tech-ui/topics/523
  &::before {
    display: block;
    height: 0;
    visibility: hidden;
    content: '.';
  }

  &-small {
    line-height: @line-height-base;
  }

  &-container {
    display: flex;
    flex-wrap: wrap;
    margin-top: -8px;
    margin-right: -4px;
  }

  &-item {
    &:not(:last-child) {
      margin-right: 8px;
    }

    margin-top: 8px;
  }

  &-formlabel {
    margin-bottom: 2px;
  }

  &-line {
    min-width: 198px;
    .@{ant-prefix}-form-item {
      flex-direction: column;
      margin-bottom: 0;
    }
  }

  &-line:not(:first-child) {
    margin-top: 16px;
    margin-bottom: 8px;
  }

  .@{ant-prefix}-form-item {
    margin-bottom: 0;
  }

  &-collapse-icon {
    width: @height-base;
    height: @height-base;
    line-height: @height-base + 3px;
    border-radius: 50%;
  }

  &-effective {
    .@{pro-form-light-filter-prefix-cls}-collapse-icon {
      background-color: fade(@black, 4%);
    }
  }
}
