import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { tokens, classes } from "./Cell.tokens";
const alignToFlex = {
    center: 'center',
    top: 'flex-start',
    bottom: 'flex-end'
};
export const base = /*#__PURE__*/ css("&&.", classes.fixedStretching, "{width:var(", tokens.cellWidth, ");}&&.", classes.filledStretching, "{width:100%;}&&.", classes.autoStretching, "{width:auto;}", "base");
export const CellContentWrapper = /*#__PURE__*/ styled("div", {
    target: "e13k94s90",
    label: "CellContentWrapper"
})("display:flex;flex:auto;align-items:stretch;justify-content:space-between;gap:var(", tokens.cellGap, ");height:auto;");
export const CellContent = /*#__PURE__*/ styled("div", {
    target: "e13k94s91",
    label: "CellContent"
})("display:flex;align-items:center;height:auto;padding:var(", tokens.cellPaddingContent, ");");
export const CellLeft = /*#__PURE__*/ styled("div", {
    target: "e13k94s92",
    label: "CellLeft"
})("display:flex;align-items:", ({ align })=>alignToFlex[align], ";");
export const CellRight = /*#__PURE__*/ styled("div", {
    target: "e13k94s93",
    label: "CellRight"
})("display:flex;align-items:", ({ align })=>alignToFlex[align], ";text-align:right;");
