Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import { css } from "styled-components";
import tokens from "@paprika/tokens/lib/tokens";
import stylers from "@paprika/stylers";
export const title = css`
background: ${tokens.backgroundColor.level0};
border-bottom: 1px solid ${tokens.border.color};
border-top-left-radius: ${tokens.border.radius};
border-top-right-radius: ${tokens.border.radius};
flex-basis: 50%;
flex-grow: 1;
font-size: ${stylers.fontSize(-1)};
font-weight: bold;
min-height: 20px;
padding: ${tokens.spaceSm} ${tokens.space} ${tokens.spaceSm} ${tokens.spaceLg};
`;
export const flex = css`
align-items: flex-start;
display: flex;
justify-content: center;
& div:last-child {
border-left: 1px solid ${tokens.border.color};
}
`;
background: ${tokens.backgroundColor.level0};
border-bottom: 1px solid ${tokens.border.color};
border-top: 1px solid ${tokens.border.color};
box-sizing: border-box;
${stylers.fontSize(-1)}
font-weight: bold;
padding: ${tokens.spaceSm} ${tokens.space} ${tokens.spaceSm} ${tokens.spaceLg};
width: 100%;
`;
export const button = css`
border-top-left-radius: ${tokens.border.radius};
border-top-left-radius: ${tokens.border.radius};
flex-basis: 100%;
flex-grow: 1;
padding: ${tokens.space} ${tokens.spaceLg};
`;
export const counter = css`
border: 1px solid ${tokens.border.color};
border-radius: ${tokens.border.radius};
display: inline-box;
font-size: 13px;
font-weight: bold;
margin-left: ${tokens.spaceSm};
padding: 2px ${tokens.spaceSm};
`;
export const remove = css`
align: center;
align-items: center;
border-bottom-right-radius: ${tokens.border.radius};
align-items: center;
border-left: 1px solid ${tokens.border.color};
color: ${tokens.color.black};
display: inline-flex;
height: 100%;
justify-content: center;
width: 100%;
&:hover:after {
background: ${tokens.color.black};
border-radius: 50%;
content: "";
height: ${stylers.spacer(3)};
left: 50%;
margin-left: -${tokens.spaceLg};
margin-top: -${tokens.spaceLg};
opacity: 0.1;
pointer-events: none;
position: absolute;
top: 50%;
width: ${stylers.spacer(3)};
}
${({ isParentSelectable }) => {
return isParentSelectable
? ""
: css`
background: transparent;
border: 1px solid transparent;
border-radius: ${tokens.border.radius};
`;
}}