/* stylelint-disable a11y/font-size-is-readable */

import styled from 'styled-components'

export const Section = styled.section`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
`

export const DataArea = styled.div<{ showSmall: boolean }>`
  display: inline-block;
  box-sizing: border-box;
  flex-direction: column;
  width: 100%;
  height: ${({ showSmall: s }) => (s ? '28px' : '40px')};
  padding: ${({ showSmall: s }) => (s ? '0 6px' : '0 10px')};
`

export const NameValueArea = styled.div`
  display: flex;
  justify-content: space-between;
  height: 16px;
`

export const DataName = styled.span<{ fontFamily: string }>`
  font-family: ${({ fontFamily: f }) => f};
  font-size: 12px;
`

export const Value = styled.span<{ fontFamily: string }>`
  font-family: ${({ fontFamily: f }) => f};
  font-size: 12px;
`

export const BarBg = styled.div<{ showSmall: boolean }>`
  position: relative;
  width: 100%;
  height: ${({ showSmall: s }) => (s ? '6px' : '12px')};
  background-color: rgba(128, 128, 128, 0.2);
`

export const BarFg = styled.div<{ ratio: number }>`
  width: ${({ ratio: r }) => `${Math.max(Math.min(r * 100, 100), 0)}%`};
  height: 100%;
  background-color: #2facff;
`