@import '../../global.scss';

$light-filter: #{teamix-pro-form}-light-filter;

// LightFilter
.#{$light-filter} {
  display: flex;
  width: 100%;
  height: var(--search-normal-normal-m-height, 32px);
  transition: box-shadow var(--active-transition);
  &:hover,
  &:focus {
    box-shadow: var(--active-shadow);
    border-color: var(--input-focus-border-color, #ababab);
  }
  .#{$light-filter}-main {
    display: flex;
    box-sizing: border-box;
    border: var(--search-normal-normal-border-width, 1px) solid
      var(--color-line1-2, #d9d9d9);
    border-radius: var(--search-normal-corner, 2px);
    // 表单项选择
    .#{$light-filter}-select {
      min-width: auto;
      .#{$css-prefix}input {
        min-width: auto;
        border: 0;
        box-shadow: none;
        .#{$css-prefix}input-text-field {
          padding-right: 4px;
        }
      }
      .#{$css-prefix}input {
        height: $noborder-font-weight-medium;
      }
      .#{$css-prefix}input-control {
        padding-right: 0;
      }
    }
    .#{$light-filter}-select-none {
      .#{$css-prefix}input-control {
        padding-right: var(--input-m-icon-padding-right, 8px);
      }
    }
  }

  // 按钮后缀
  .#{$light-filter}-addonAfter {
    display: none;
    .#{$css-prefix}btn {
      border-top-left-radius: 0;
      border-bottom-left-radius: 0;
      .teamix-icon {
        color: var(--color-line1-5, #ababab) !important;
      }
    }
  }
}

// LightFilter输入类
.#{$light-filter}-input-category {
  .#{$light-filter}-main {
    border-right: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
  }
  .#{$light-filter}-addonAfter {
    display: block;
  }
}

// LightFilter无边框
.#{$form-item-cls}-bordered-none {
  .#{$form-item-cls}-control {
    .#{$form-item-cls}-control-content {
      .#{$form-item-cls}-control-content-component {
        min-height: $noborder-font-weight-medium;
        .#{$css-prefix}date-picker2-input {
          border: 0;
          box-shadow: none !important;
        }
        .#{$css-prefix}date-picker2-input.#{$css-prefix}date-picker2-input-medium,
        .#{$css-prefix}input.#{$css-prefix}medium {
          height: $noborder-font-weight-medium;
        }
      }
    }
  }
}
