/*
 * Copyright (c) 2018-present, Revolut LTD.
 *
 * This source code is licensed under the Apache 2.0 license found in the
 * LICENSE file in the root directory of this source tree.
 */
import styled, { ThemedCssFunction } from 'styled-components'

import {
  fontSize,
  cssMixin,
  fontFamilyGet,
  fontSizeGet,
  colorGet,
} from '../../style/utils'
import { ColorsFields, FontFacesFields, FontSizesFields } from '../../style/themeFields'

export const Card = styled.section<{ css?: ThemedCssFunction<any> | string }>`
  box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15);
  padding: 1em 1em;
  border-radius: 0.4rem;
  border: 1px solid rgba(34, 36, 38, 0.15);
  font-family: ${fontFamilyGet(FontFacesFields.Sans)};
  font-size: ${fontSizeGet(FontSizesFields.Regular)};
  color: ${colorGet(ColorsFields.Text)};
  background: ${colorGet(ColorsFields.TextInverted)};

  ${fontSize};
  ${cssMixin()};
`