/*
 * Copyright 2019 dialog LLC <info@dlg.im>
 */

@import '../../styles/variables.css';

:root {
  --sidebar-search-font-family: var(--default-font-family);
  --sidebar-search-padding: 10px;
  --sidebar-search-border-radius: 4px;
  --sidebar-search-border-color: transparent;
  --sidebar-search-border-color-focus: var(--pinkish-grey);
  --sidebar-search-background-color: var(--white-two);
  --sidebar-search-color: #999;
  --sidebar-search-placeholder-color: color-mod(#000 alpha(50%));
  --sidebar-search-focus-color: #000;
  --sidebar-search-focus-background-color: #fff;
  --sidebar-search-input-height: 34px;
}

.container {
  all: initial;
  position: relative;
  display: flex;
  box-sizing: border-box;
  color: var(--sidebar-search-color);
}

.input {
  all: initial;
  display: block;
  box-sizing: border-box;
  width: 100%;
  height: var(--sidebar-search-input-height);
  padding: 8px 12px 8px 46px;
  transition: padding var(--default-transition-duration) ease;
  letter-spacing: -0.2px;
  border-radius: var(--sidebar-search-border-radius);
  background-color: var(--sidebar-search-background-color);
  font-family: var(--sidebar-search-font-family);
  font-size: 14px;
  line-height: 18px;
  color: inherit;
  box-shadow: inset 0 0 0 1px var(--sidebar-search-border-color);

  &:focus {
    background-color: var(--sidebar-search-focus-background-color);
    box-shadow: inset 0 0 0 1px var(--sidebar-search-border-color-focus);
    color: var(--sidebar-search-focus-color);
  }

  &::-webkit-input-placeholder {
    color: var(--sidebar-search-placeholder-color);
  }

  &:-moz-placeholder {
    color: var(--sidebar-search-placeholder-color);
  }

  &::-moz-placeholder {
    color: var(--sidebar-search-placeholder-color);
  }

  &:-ms-input-placeholder {
    color: var(--sidebar-search-placeholder-color);
  }

  &::-webkit-search-decoration,
  &::-webkit-search-cancel-button,
  &::-webkit-search-results-button,
  &::-webkit-search-results-decoration {
    display: none;
  }
}

.icon {
  position: absolute;
  top: 7px;
  left: calc(var(--sidebar-search-padding));
  transition: opacity calc(var(--default-transition-duration)) ease;
  color: var(--sidebar-search-color);
}

.spinner {
  position: absolute;
  top: 9px;
  left: 10px;
  width: 16px !important;
  height: 16px !important;
  pointer-events: none;
}

.cancel {
  position: absolute;
  top: 7px;
  right: 8px;
}