@import './variables.scss';
@import '~@alifd/next/lib/core/index-noreset'; // next core style
@import '~@alifd/next/lib/search/scss/variable';
@import '~@alifd/next/lib/search/scss/mixin';

.#{$css-prefix}search {
  border-radius: 4px !important;

  // hover时候的阴影
  &.#{$css-prefix}search:hover {
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.1);
  }

  // 1. 设置normal模式下的样式
  &.#{$css-prefix}normal,
  &.#{$css-prefix}search-simple {

    // 1.1 设置白色主题下样式
    &.#{$css-prefix}white {
      background: $b-design-search-white-input-background;

      // 边框颜色
      .#{$css-prefix}search-left {
        border: 1px solid;
        border-color: $b-design-search-white-input-background;
      }

      //btn颜色
      .#{$css-prefix}search-btn {
        background: $b-design-search-white-input-background;
        border-color: $b-design-search-white-input-background;
      }

      // 点击输入时的边框颜色变成蓝色
      &.#{$css-prefix}contain-focus,
      &.#{$css-prefix}contain-focus:hover {
        box-shadow: none;

        .#{$css-prefix}input-group {
          &.#{$css-prefix}search-left {
            border-color: $b-design-search-input-border-color;
          }
        }

        .#{$css-prefix}search-btn {
          border-color: $b-design-search-input-border-color;
        }
      }
    }

    // 1.2 设置灰色主题下的样式
    &.#{$css-prefix}grey {

      // 设置background-color和边框
      .#{$css-prefix}input {
        background-color: $b-design-search-grey-input-background;
      }

      // 边框颜色
      .#{$css-prefix}search-left {
        border: 1px solid $b-design-search-grey-border-color;
        background-color: $b-design-search-grey-border-color;
      }

      //btn颜色
      .#{$css-prefix}search-btn {
        background: $b-design-search-grey-input-background;
        border-color: $b-design-search-grey-border-color;
      }

      // 点击输入时的边框颜色变成蓝色
      &.#{$css-prefix}contain-focus,
      &.#{$css-prefix}contain-focus:hover {
        box-shadow: none;

        .#{$css-prefix}input-group {
          border-color: $b-design-search-input-border-color;
        }

        .#{$css-prefix}search-btn {
          border-color: $b-design-search-input-border-color;
        }
      }
    }

    // 1.3 设置禁用状态样式：禁用状态下button的颜色相同,border颜色区分一下即可
    &.#{$css-prefix}disabled {

      &.#{$css-prefix}normal,
      &.#{$css-prefix}search-simple {

        // 禁用状态下下拉图标颜色变浅
        .#{$css-prefix}icon::before,
        .#{$css-prefix}search-btn-text {
          color: $b-design-search-disabled-icon-color;
        }

        &.#{$css-prefix}normal:hover,
        &.#{$css-prefix}search-simple:hover {
          box-shadow: none;
        }
      }

      &.#{$css-prefix}white,
      &.#{$css-prefix}grey {
        .#{$css-prefix}search-left {
          background-color: $b-design-search-disabled-background-color !important;
          border-color: $b-design-search-disabled-background-color !important;

          .#{$css-prefix}input {
            background-color: $b-design-search-disabled-background-color;
          }
        }

        .#{$css-prefix}search-btn {
          border-color: $b-design-search-disabled-background-color;
          background: $b-design-search-disabled-background-color;
        }
      }
    }
  }

  // 2. 设置type=brand样式
  &.#{$css-prefix}brand {
    background: rgba(255, 255, 255, 0.24) !important;

    // 边框颜色
    .#{$css-prefix}input {
      background-color: transparent !important;

      .#{$css-prefix}input-text-field {
        em {
          color: rgba(255, 255, 255, 0.8);
        }
      }

      input {
        color: #fff !important;
      }

      input::placeholder {
        color: rgba(255, 255, 255, 0.8);
      }
    }

    .#{$css-prefix}icon::before,
    .#{$css-prefix}search-btn-text {
      color: #fff;
    }

    .#{$css-prefix}search-left {
      border: 1px solid;
      border-color: transparent !important;
      border-right: none !important;
    }

    //btn颜色
    .#{$css-prefix}search-btn {
      border: 1px solid transparent !important;
      border-left: none !important;
      background-color: transparent !important;
    }

    // 点击输入时的边框颜色变成蓝色
    &.#{$css-prefix}contain-focus,
    &.#{$css-prefix}contain-focus:hover {
      box-shadow: none;
      background: rgba(255, 255, 255, 0.1);

      .#{$css-prefix}input-group {
        border-color: rgba(255, 255, 255, 0.4) !important;
        border-right: none;
      }

      .#{$css-prefix}search-btn {
        border-color: rgba(255, 255, 255, 0.4) !important;
        border-left: none;
      }
    }

    &.#{$css-prefix}disabled {
      background: rgba(255, 255, 255, 0.1) !important;

      .#{$css-prefix}search-btn {
        background-color: transparent !important;
        border-color: transparent !important;
      }

      .#{$css-prefix}input,
      input::placeholder {
        color: rgba(255, 255, 255, 0.3) !important;
      }
    }
  }

  //设置下拉框的右侧竖线以及hover没有投影
  .#{$css-prefix}input-group-addon:first-child {
    position: relative;
    z-index: 2;

    .#{$css-prefix}input:not(.#{$css-prefix}disabled):not(.#{$css-prefix}focus):hover {
      box-shadow: none;
    }
  }

  // 2. 设置通用样式以及不同大小search框样式
  &-simple,
  &-normal,
  &-primary,
  &-secondary,
  &-dark {

    // 2.1 设置通用样式
    // 统一设置input框文字颜色
    .#{$css-prefix}input {

      input,
      .#{$css-prefix}input-text-field {
        color: $b-design-search-input-font-color;
        font-size: $b-design-search-with-text-font-size;
      }

      border-radius: 0;
    }

    border-radius: $b-design-search-border-radius;

    // 统一设置icon带文字的搜索框的文字颜色：适用于所有主题和大小
    .#{$css-prefix}search-btn-text {
      color: $b-design-search-icon-color;
      text-align: center;
      font-size: $b-design-search-with-text-font-size;
    }

    // 统一设置icon颜色
    .#{$css-prefix}icon:before {
      color: $b-design-search-icon-color;
    }

    .#{$css-prefix}input-group-addon.#{$css-prefix}search-left-addon {
      .#{$css-prefix}select {
        height: 100%;
      }
    }

    .#{$css-prefix}search-left {
      .#{$css-prefix}search-left-addon {
        border-right: 0px !important;

        .#{$css-prefix}input-control {
          border-radius: 0px;
          // border-right: 1px $search-normal-normal-split-color solid;
        }
      }
    }

    // input输入框的边距调整
    .#{$css-prefix}input-group-addon.#{$css-prefix}after {
      .#{$css-prefix}search-btn {
        border-left: 0px;
        line-height: inherit;
        margin-right: 0px !important;

        &:hover {
          box-shadow: none;
        }

        .#{$css-prefix}icon {
          margin-right: 0px;
        }
      }
    }

    // 2.1 大号时候的样式
    &.#{$css-prefix}large {
      height: $b-design-search-large-height;
      // line-height: $b-design-search-large-height;
      line-height: 1;

      .#{$css-prefix}btn-icon:before {
        font-size: $b-design-form-element-large-icon-size !important;
        width: $b-design-form-element-large-icon-size !important;
      }

      .#{$css-prefix}input-group-addon.#{$css-prefix}after {
        .#{$css-prefix}search-btn {
          height: $b-design-search-large-height;
          padding: $b-design-search-btn-large-padding-lr;
        }

        .#{$css-prefix}search-btn-text {
          padding-left: $b-design-search-btn-large-text-padding-l;
        }
      }

      .#{$css-prefix}select {
        height: $b-design-search-large-select-height !important;
      }

      .#{$css-prefix}search-input {
        input {
          height: $b-design-search-large-select-height !important;
          font-size: 14px;
        }
      }
    }

    // 2.2 中号时候的样式（对应用户输入size='large' && 'medium'，样式与设计稿size='medium'对应）
    &.#{$css-prefix}medium {
      height: $b-design-search-medium-height;
      // line-height: $b-design-search-medium-height;
      line-height: 1;


      .#{$css-prefix}btn-icon:before {
        font-size: $b-design-form-element-medium-icon-size !important;
        width: $b-design-form-element-medium-icon-size !important;
      }

      .#{$css-prefix}input-group-addon.#{$css-prefix}after {
        .#{$css-prefix}search-btn {
          height: $b-design-search-medium-height;
          padding: $b-design-search-btn-medium-padding-lr;
        }

        .#{$css-prefix}search-btn-text {
          padding-left: $b-design-search-btn-medium-text-padding-l;
        }
      }

      .#{$css-prefix}select {
        height: $b-design-form-element-medium-height !important;
      }

      .#{$css-prefix}search-input {
        input {
          height: $b-design-form-element-medium-height !important;
          // padding-left: $b-design-search-btn-medium-padding-lr;
        }
      }
    }

    //  2.3 小号时候的样式（对应用户输入size='small'，样式与设计稿size='small'对应）
    &.#{$css-prefix}small {
      height: $b-design-search-small-height;
      // line-height: $b-design-search-small-height;
      line-height: 1;


      .#{$css-prefix}input-group-addon.#{$css-prefix}after {
        .#{$css-prefix}search-btn {
          height: $b-design-search-small-height;
          padding: $b-design-search-btn-small-padding-lr;
        }

        .#{$css-prefix}search-btn-text {
          padding-left: $b-design-search-btn-small-text-padding-l;
        }
      }

      .#{$css-prefix}select {
        height: $b-design-form-element-small-height !important;
      }

      .#{$css-prefix}search-left {
        border: none;
      }

      .#{$css-prefix}search-input {
        input {
          height: $b-design-form-element-small-height !important;
          padding-left: $b-design-search-input-small-padding-l;
        }
      }
    }

    // 2.4 超小号时候的样式（对应用户输入size='xs'，样式与设计稿size='xs'对应）
    &.#{$css-prefix}xs {
      height: $b-design-search-xs-height;

      .#{$css-prefix}search-left {
        height: $b-design-form-element-xs-height;
        border-width: 1px;
      }

      .#{$css-prefix}btn {
        height: $b-design-form-element-xs-height + 2px;
        padding: $b-design-search-btn-xs-padding-lr;
        line-height: calc(#{$b-design-form-element-xs-height} - #{$b-design-search-btn-xs-padding-lr} * 2 - 3px) !important;

        .#{$css-prefix}btn-icon:before {
          font-size: $b-design-form-element-xs-icon-size;
        }
      }

      .#{$css-prefix}search-btn-text {
        padding-left: $b-design-search-btn-xs-text-padding-l;
      }

      .#{$css-prefix}search-input {
        input {
          height: $b-design-form-element-xs-height;
        }
      }

      .#{$css-prefix}select {
        height: $b-design-form-element-xs-height !important;
      }

      &.#{$css-prefix}search {
        .#{$css-prefix}input:hover {
          box-shadow: none;
        }
      }
    }
  }

  //新增search下搜索按钮前没有分割线
  .#{$css-prefix}input-group-addon:last-child:before {
    display: none;
  }
}