GitFOSS

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

export const Chip = styled.div<WithThemeSchemeProp & { color?: string }>`
  ${({ themeScheme, color = undefined }) => css`
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;

    padding: 3px 8px;
    font-size: 14px;
    line-height: 14px;

    font-weight: bold;
    text-transform: uppercase;

    color: ${color
      ? Color(color).alpha(1).toString()
      : NamedColors.TEXT_DEFAULT[themeScheme]};
    background-color: ${color
      ? Color(color).alpha(0.3).toString()
      : "rgba(0, 0, 0, 0.3)"};
    border-radius: 8px;
  `};
`;