@import '../../style/index.less';

@searchbar-prefix-cls: ~'@{xui-prefix}__search-bar';
@searchbar-prefix-cls--container: ~'@{searchbar-prefix-cls}--container';
@searchbar-prefix-cls--popup: ~'@{searchbar-prefix-cls}--popup';
@searchbar-prefix-cls--show: ~'@{searchbar-prefix-cls}--show';
@searchbar-prefix-cls--col: ~'@{searchbar-prefix-cls}--col';
@searchbar-prefix-cls--btn: ~'@{searchbar-prefix-cls}--btn';
@searchbar-prefix-cls--position: ~'@{searchbar-prefix-cls}--position';

.@{searchbar-prefix-cls--container} {
  margin-bottom: 8px;

  .@{searchbar-prefix-cls--position} {
    position: relative;
    width: 100%;

    .ant-input-affix-wrapper {
      transition: none;
    }

    .@{searchbar-prefix-cls} {
      display: flex;
      margin-bottom: 0 !important;
      background-color: #fff;

      &--iconfont {
        float: left;
        width: @input-height-base;
        height: @input-height-base;
        color: #999;
        line-height: @input-height-base;
        text-align: center;
        border: 1px solid #dcdfe6;
        border-radius: 4px;
        cursor: pointer;
        &:hover {
          color: @primary-color;
          border-color: @primary-color;
        }
      }

      &--iconfont--search {
        color: @primary-color !important;
        border-color: @primary-color !important;
      }

      &--col {
        display: flex;
        align-items: center; // TODO baseline 在 Select 选中时失效

        &--title {
          padding-right: 6px;
          white-space: nowrap;
          text-align: right;
        }

        &--content,
        &--content--with-checkbox {
          display: flex;
          align-items: center;
          width: 220px;

          &--segmentation {
            flex: 0 0 6px;
            height: 1px;
            margin: 0 5px;
            background-color: #333;
          }

          .ant-select-selector {
            width: 100%;
          }
        }

        &--content {
          margin-right: 20px;
        }

        &--content--with-checkbox {
          width: 160px !important;
        }

        &--checkbox {
          margin-left: 14px !important;
          .ant-checkbox + span {
            padding-right: 0;
            padding-left: 2px;
          }
        }

        &--isSearch {
          border-color: @primary-color;

          .ant-select-selector {
            border-color: @primary-color;
          }
        }
      }

      &--btn {
        display: flex;
        align-items: center;

        button {
          &:first-child {
            margin-right: 10px;
          }
        }
      }

      .@{searchbar-prefix-cls}--searchCount {
        display: flex;
        align-items: center;
        margin-left: 10px;
        span:first-child {
          color: #ff8534;
        }
        .xui-icon--xui-react--close {
          margin-left: 3px;
          color: #d1d1d1;
          cursor: pointer;
        }
      }
    }

    .@{searchbar-prefix-cls--popup} {
      position: absolute;
      top: 40px !important;
      left: 0;
      z-index: 10;
      display: none;
      padding: 16px;
      box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);

      .@{searchbar-prefix-cls--col} {
        margin-bottom: 16px;

        &--title {
          width: 100px;
        }

        &--content {
          margin-right: 0;
          .ant-select-selector {
            width: 100%;
          }
        }
      }

      .@{searchbar-prefix-cls--btn} {
        justify-content: center;
        width: 100%;

        button {
          &:first-child {
            margin-right: 10px;
          }
        }
      }
    }

    .@{searchbar-prefix-cls--show} {
      display: flex;
      flex-wrap: wrap;
    }
  }
}