import { FunctionComponent } from 'react';
import styled from 'styled-components/macro';

import { CountryIcon } from '../../../../components/CountryIcon/CountryIcon';
import { color } from '../../../../theme';
import { SelectField, SelectFieldProps } from '../../../SelectField/SelectField';
import { CountryOption } from '../../types';

export const StyledOptionCode = styled.span`
  color: ${color('sys/color/text/secondary')};
  font-size: 14px;
  margin-left: auto;
  padding-left: 4px;
`;

export const TunedOptionFlag = styled(CountryIcon)`
  flex-shrink: 0;
  height: 20px;
  padding-right: 8px;
  width: 20px;
`;

export const TunedCountrySelect = styled(SelectField as FunctionComponent<SelectFieldProps<CountryOption>>)`
  height: 100%;
  width: 100%;
`;

export const StyledCountryChoseSelectContainer = styled.div`
  bottom: 0;
  left: 0;
  pointer-events: none;
  position: absolute;
  right: 0;
  top: 0;
`;