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