.hy-search {
  border-radius: 4px;
  border: 1px solid rgb(var(--hy-border));
  background-color: rgb(var(--hy-background));
  padding: 12px 6px 16px 20px;
  opacity: 1;
  transition: all 0.3s linear;
  overflow: hidden;
  &.hy-search-hidden {
    padding-top: 0;
    padding-bottom: 0;
    opacity: 0;
  }
  .hy-search-header {
    height: 16px;
    display: flex;
    align-items: center;
    font-size: 12px;
    color: rgb(var(--hy-main));
    margin-bottom: 16px;
    transition: all 0.3s linear;
    &.hy-search-header-hidden {
      height: 0;
      margin-bottom: 0px;
    }
  }
  .hy-search-form {
    overflow: hidden;
    transition: all 0.3s;
  }
  .hy-search-container {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    position: relative;
    padding: 1px;
    .hy-el-form-item {
      margin-bottom: 0;
      &.hidden {
        display: none;
      }
      .hy-el-search-item-error {
        .hy-el-input .hy-el-input__inner::placeholder,
        .hy-el-select__placeholder.is-transparent {
          color: rgba(var(--hy-danger-2));
          font-size: 14px;
        }
      }
    }
    .hy-el-input,
    .hy-el-date-editor {
      --el-input-bg-color: transparent;
      --el-input-border: none;
      --el-border-color: transparent;
      --el-input-border-color: transparent;
      --el-input-text-color: rgb(var(--hy-main));
      --el-input-border-radius: 0px 4px 4px 0px;
      --el-input-hover-border-color: rgb(var(--hy-theme));
      .hy-el-input__wrapper,
      &.hy-el-input__wrapper {
        box-shadow: none !important;
      }
    }
    .hy-el-select {
      --el-border-color: transparent;
      --el-fill-color-blank: transparent;
      --el-border-radius-base: 0px 4px 4px 0px;
      --el-border-color-hover: rgb(var(--hy-theme));
      .hy-el-select__wrapper {
        box-shadow: none !important;
      }
    }
    .hy-search-custom-wrapper {
      min-height: var(--hy-el-component-size);
    }
  }
}