GitFOSS

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

const inputBase = css<WithThemeSchemeProp>`
  width: 100%;

  padding: 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]};
    `};
  }
`;

export const TextInput = styled.input<WithThemeSchemeProp>`
  height: 40px;
  ${inputBase};
`;

export const TextArea = styled.textarea<WithThemeSchemeProp>`
  ${inputBase};
`;

export const Select = styled.select<WithThemeSchemeProp>`
  height: 40px;
  ${inputBase};

  padding: 0 12px;
`;