@import (reference) '../style/themes/default.less';

.am-search {
  height: @size-11;
  height: var(--am-search-height, @size-11);
  display: flex;
  align-items: center;
  padding: 0 0 0 @h-spacing-large;
  padding: 0 0 0 var(--am-search-paddingL, @h-spacing-large);
  overflow: hidden;

  &-input {
    display: flex;
    position: relative;
    height: @size-8;
    height: var(--am-search-input-height, @size-8);
    line-height: @size-8;
    line-height: var(--am-search-input-height, @size-8);
    flex: 1;
    align-items: center;
    box-sizing: border-box;
    border-radius: @corner-radius-md-plus;
    border-radius: var(--am-search-corner-radius, @corner-radius-md-plus);
    border-width: @border-width-standard;
    border-width: var(--am-search-borderwidth, @border-width-standard);
    border-style: solid;
    background: @color-fill-grey-inverse;
    background: var(--am-search-background, @color-fill-grey-inverse);
  }

  &-synthetic {
    display: flex;
    position: absolute;
    left: 0;
    top: 1px;
    height: @size-7;
    height: var(--am-search-label-height, @size-7);
    line-height: @size-7;
    line-height: var(--am-search-label-height, @size-7);
    padding-left: @h-spacing-large;
    padding-left: var(--am-search-label-paddingL, @h-spacing-large);
    align-items: center;
  }

  &-synthetic-icon {
    line-height: @line-height-base;
    line-height: var(--am-search-label-lineHeight, @line-height-base);
    font-size: @font-size-subtitle;
    font-size: var(--am-search-iconsize, @font-size-subtitle);
    color: @color-text-subtitle;
    color: var(--am-search-searchicon-color, @color-text-subtitle);
    display: inline-block;
  }

  &-value {
    flex: 1;
    height: @size-7;
    height: var(--am-search-label-height, @size-7);
    line-height: @line-height-base;
    line-height: var(--am-search-label-lineHeight, @line-height-base);
    font-size: @font-size-content;
    font-size: var(--am-search-fontsize, @font-size-content);
    padding: 0 0 0 @h-spacing-standard * 4.25;
    background: transparent;
    box-sizing: border-box;
  }

  &-clear {
    display: flex;
    align-items: center;
    position: relative;
    visibility: hidden;
    width: @size-7;
    width: var(--am-search-icon-area, @size-7);
    height: @size-7;
    height: var(--am-search-icon-area, @size-7);
    &-font {
      font-size: @font-size-subtitle;
      font-size: var(--am-search-iconsize, @font-size-subtitle);
      color: @color-text-weak;
      color: var(--am-search-clearicon-color, @color-text-weak);
    }
  }

  &-voice {
    display: flex;
    align-items: center;
    position: relative;
    width: @size-7;
    width: var(--am-search-icon-area, @size-7);
    height: @size-7;
    height: var(--am-search-icon-area, @size-7);
    &-font {
      font-size: @font-size-subtitle;
      font-size: var(--am-search-iconsize, @font-size-subtitle);
      color: @color-text-subtitle;
      color: var(--am-search-vocieicon-color, @color-text-subtitle);
    }
  }

  &-clear-show {
    visibility: visible;
  }

  &-cancel {
    margin-right: -92 * @pixelSize;
    opacity: 0;
    color: @color-text-primary;
    color: var(--am-search-cancel-color, @color-text-primary);
    font-size: @font-size-subtitle;
    font-size: var(--am-search-cancel-fontsize, @font-size-subtitle);
    width: 116 * @pixelSize;
    height: 60 * @pixelSize;
    line-height: 60 * @pixelSize;
    text-align: center;
  }

  &-repos {
    margin-right: 0;
    opacity: 1;
  }
}
