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