// Copyright (c) Microsoft. All rights reserved.

@import 'src/styles/themes';
@import 'src/styles/mixins';

$inputPadding: 5px;
$containerMargin: 10px;
.context-menu-search-input {
  display: flex;
  flex-basis: 20%;
  overflow: hidden;
  @include rem-fallback(margin, $containerMargin, 0px, $containerMargin, $containerMargin);
  @include rem-fallback(padding-right, $inputPadding);

  .search-icon {
    @include rem-fallback(padding-left, $inputPadding);

    svg { @include square-px-rem(12px); }
    .search-text-box {
      @include rem-fallback(min-width, 50px);
    }
  }

  input {
    background-color: inherit;
    border: none;
    color: inherit;
    font-family: inherit;
    width: 100%;
    @include rem-fallback(padding, $inputPadding);
  }

  @include themify($themes) {
    color: themed('colorContextSearchTextColor');
    background-color: themed('colorContextSearchBg');
    border: 1px solid themed('colorContextSearchBorderColor');

    .search-icon svg { fill: themed('colorContextSearchTextColor'); }
  }
}
