@import "../lib.less";
@import (reference) "../dropdown.less";
@import "../variables/components/input.less";
@import "../variables/components/option.less";
@import "../variables/components/search-box.less";

.@{veui-prefix}-search-box {
  display: inline-flex;
  width: @veui-search-box-width;
  color: @veui-input-font-color;
  background-color: @veui-input-background-color;
  border-radius: @veui-input-border-radius-m;

  &[ui~="s"] {
    border-radius: @veui-input-border-radius-s;
  }

  &[ui~="xs"] {
    border-radius: @veui-input-border-radius-xs;
  }

  &[ui~="l"] {
    border-radius: @veui-input-border-radius-l;
  }

  .@{veui-prefix}-input-group .@{veui-prefix}-input {
    width: 100%;
    overflow: visible;

    &:hover {
      z-index: 1;
    }

    @{veui-prefix}-input:focus {
      z-index: 2;
    }

    &-group {
      display: flex;
      flex-grow: 1;
    }

    &-after {
      .@{veui-prefix}-input-clear {
        margin-right: 0;
        color: @veui-search-box-clear-icon-color;
      }
      .@{veui-prefix}-search-box-action:not(.veui-disabled) {
        margin-left: @veui-input-content-spacing;
        color: @veui-search-box-icon-color;
      }
    }
  }

  &-action {
    flex: none;
  }

  &.@{veui-prefix}-readonly {
    background-color: @veui-input-background-color-read-only;
    border-color: @veui-input-border-color-read-only;
    color: @veui-input-font-color-read-only;
  }

  &.@{veui-prefix}-disabled {
    background-color: @veui-input-background-color-disabled;
    border-color: @veui-input-border-color-disabled;
    color: @veui-input-font-color-disabled;
  }

  &-suggestion-overlay {
    &:extend(._veui-dropdown-overlay all);
    overflow-y: auto;
    background-color: @veui-option-background-color;
  }

  .@{veui-prefix}-option {
    &:extend(._veui-dropdown-option all);
  }

  &[ui~="strong"] {
    .@{veui-prefix}-input {
      width: @veui-search-box-width;
      .@{veui-prefix}-search-box-action {
        display: none;
      }
    }

    .@{veui-prefix}-search-box-action {
      display: flex;
      &[ui~="xs"] {
        min-width: 40px;
      }
      &[ui~="s"] {
        min-width: 48px;
      }
      &[ui~="m"] {
        min-width: 60px;
      }
      &[ui~="l"] {
        min-width: 72px;
      }
      &[ui~="xl"] {
        min-width: 80px;
      }
    }
  }
}