<commit_before>// @flow
import styled from 'react-emotion';
import { placeholder, hideVisually } from 'polished';
import { colors } from '../../../../style/theme';

export const Container = styled('div')`
  display: flex;
  align-items: center;
  justify-content: justify;
  position: relative;

  :focus-within {
    ::after {
      border-bottom: 3px solid #444;
      content: '';
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  }
`;

export const Input = styled('input')`
  background-color: #fff;
  width: 100%;
  outline: none;
  border: 1px solid #bbbbbb;
  padding: 12px 16px;
  padding-left: 40px;
  font-size: 1rem;
  line-height: 1.5rem;
  transition: all 0.2s ease-in-out;
  ${placeholder({ color: colors.base.gray })};

  &:focus {
    ${placeholder({ color: 'rgb(117, 117, 117)' })};
  }
  &:hover,
  &:focus {
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
  }
`;

export const Icon = styled('span')`
  position: absolute;
  color: ${colors.base.grayDarkest};
  pointer-events: none;
  display: flex;<commit_msg>Border radius on search input in mobile safari<commit_after>// @flow
import styled from 'react-emotion';
import { placeholder, hideVisually } from 'polished';
import { colors } from '../../../../style/theme';

export const Container = styled('div')`
  display: flex;
  align-items: center;
  justify-content: justify;
  position: relative;

  :focus-within {
    ::after {
      border-bottom: 3px solid #444;
      content: '';
      position: absolute;
      bottom: 0;
      width: 100%;
    }
  }
`;

export const Input = styled('input')`
  -webkit-appearance: none;
  background-color: #fff;
  width: 100%;
  outline: none;
  border-radius: 0;
  border: 1px solid #bbbbbb;
  padding: 12px 16px;
  padding-left: 40px;
  font-size: 1rem;
  line-height: 1.5rem;
  transition: all 0.2s ease-in-out;
  ${placeholder({ color: colors.base.gray })};

  &:focus {
    ${placeholder({ color: 'rgb(117, 117, 117)' })};
  }
  &:hover,
  &:focus {
    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.15);
  }
`;

export const Icon = styled('span')`
  position: absolute;
  color: ${colors.base.grayDarkest};
  pointer-events: none;
  display: flex;
{'fraction_non_alphanumeric': 0.16659017898118403, 'fraction_numerical': 0.03900871959614502, 'mean_word_length': 3.1366223908918407, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 3, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2396536', 'n_tokens_mistral': 841, 'n_tokens_neox': 765, 'n_words': 208}