import styled, { css } from "styled-components";
import { tokens, classes } from "./Cell.tokens";
const alignToFlex = {
    center: 'center',
    top: 'flex-start',
    bottom: 'flex-end'
};
export const base = css([
    `&&.`,
    `{width:var(`,
    `);}&&.`,
    `{width:100%;}&&.`,
    `{width:auto;}`
], classes.fixedStretching, tokens.cellWidth, classes.filledStretching, classes.autoStretching);
export const CellContentWrapper = styled.div.withConfig({
    displayName: "Cell.styles__CellContentWrapper",
    componentId: "sc-181da0fc-0"
})([
    `display:flex;flex:auto;align-items:stretch;justify-content:space-between;gap:var(`,
    `);height:auto;`
], tokens.cellGap);
export const CellContent = styled.div.withConfig({
    displayName: "Cell.styles__CellContent",
    componentId: "sc-181da0fc-1"
})([
    `display:flex;align-items:center;height:auto;padding:var(`,
    `);`
], tokens.cellPaddingContent);
export const CellLeft = styled.div.withConfig({
    displayName: "Cell.styles__CellLeft",
    componentId: "sc-181da0fc-2"
})([
    `display:flex;align-items:`,
    `;`
], ({ align })=>alignToFlex[align]);
export const CellRight = styled.div.withConfig({
    displayName: "Cell.styles__CellRight",
    componentId: "sc-181da0fc-3"
})([
    `display:flex;align-items:`,
    `;text-align:right;`
], ({ align })=>alignToFlex[align]);
