GitFOSS

// 3rd-party
import styled, { css } from "styled-components";
// app
import type { WithThemeSchemeProp } from "../types";
import { NamedColors } from "../utils/style";

export const TextInput = styled.input<WithThemeSchemeProp>`
  width: 100%;
  height: 40px;

  padding: 0 12px;

  appearance: none;
  border-radius: 8px;
  font-size: 16px;

  ${({ themeScheme }) => css`
    background-color: ${NamedColors.INPUT[themeScheme]};
    border: 1px solid ${NamedColors.BORDER_INPUT[themeScheme]};
    color: ${NamedColors.TEXT_DEFAULT[themeScheme]};
  `};

  &:focus,
  &:focus-within {
    ${({ themeScheme }) => css`
      border-color: ${NamedColors.TEXT_LINK_HOVER[themeScheme]};
      color: ${NamedColors.TEXT_DEFAULT[themeScheme]};
    `};
  }
`;