import styled from 'styled-components';

export const SessionHeaderSearchInput = styled.input<{ darkMode: boolean }>`
  color: var(--input-text-color);
  background-color: var(--input-background-color);
  border: 1px solid var(--input-border-color);
  padding: 0 26px 0 30px;
  margin-inline-start: 8px;
  margin-inline-end: 8px;
  outline: 0;
  height: 32px;
  width: calc(100% - 16px);
  outline-offset: -2px;
  font-size: 14px;
  line-height: 18px;
  font-weight: normal;

  position: relative;
  border-radius: '4px';

  &::placeholder {
    color: var(--input-text-placeholder-color);
  }

  &:focus {
    border: solid 1px var(${props => (props.darkMode ? '--primary-color' : '--input-text-color')});
    outline: none;
  }
`;