import styled from "styled-components";
import { component, mergeConfig } from "../../../../engines";
import { tableTokens as tokens, classes } from "../../Table.tokens";
import { iconButtonConfig, iconButtonTokens } from "../../../IconButton";
const mergedIndicatorConfig = mergeConfig(iconButtonConfig);
const IconButton = component(mergedIndicatorConfig);
export const Td = styled.td.withConfig({
    displayName: "EditableCell.styles__Td",
    componentId: "sc-26b74d8a-0"
})([
    `position:relative;padding:`,
    `;height:var(`,
    `);border-width:0.0625rem;border-top-width:0;border-style:solid;border-color:`,
    `;border-bottom-color:`,
    `;cursor:pointer;box-sizing:border-box;& .`,
    `{opacity:0;}&:hover .`,
    `{opacity:1;}`
], ({ selectionCell, editingMode })=>// eslint-disable-next-line no-nested-ternary
    editingMode ? `var(${tokens.editableCellPadding})` : selectionCell ? `var(${tokens.checkboxCellPadding})` : `var(${tokens.cellPadding})`, tokens.rowHeight, ({ selected, borderVariant, view })=>// eslint-disable-next-line no-nested-ternary
    borderVariant === 'all' && view !== 'clear' ? `var(${tokens.borderColor})` : selected ? 'var(--surface-transparent-accent)' : 'transparent', ({ borderVariant })=>borderVariant === 'all' || borderVariant === 'rows' ? `var(${tokens.borderColor})` : 'transparent', classes.editIcon, classes.editIcon);
export const InnerWrapper = styled.div.withConfig({
    displayName: "EditableCell.styles__InnerWrapper",
    componentId: "sc-26b74d8a-1"
})([
    `display:flex;align-items:center;justify-content:space-between;width:100%;height:100%;`
]);
export const ContentWrapper = styled.div.withConfig({
    displayName: "EditableCell.styles__ContentWrapper",
    componentId: "sc-26b74d8a-2"
})([
    `display:flex;align-items:center;gap:0.25rem;`
]);
export const EditModeWrapper = styled.div.withConfig({
    displayName: "EditableCell.styles__EditModeWrapper",
    componentId: "sc-26b74d8a-3"
})([
    `display:flex;align-items:center;justify-content:space-between;gap:var(`,
    `);height:100%;`
], tokens.editableCellPadding);
export const InputWrapper = styled.div.withConfig({
    displayName: "EditableCell.styles__InputWrapper",
    componentId: "sc-26b74d8a-4"
})([
    `display:flex;align-items:center;height:100%;flex:1;padding:var(`,
    `);background:var(`,
    `);border:0.0625rem solid var(`,
    `);border-radius:var(`,
    `);box-sizing:border-box;gap:var(`,
    `);`
], tokens.editableCellInputPadding, tokens.editableCellInputBackground, tokens.editableCellInputBorderColor, tokens.editableCellInputBorderRadius, tokens.editableCellIconGap);
export const Input = styled.input.withConfig({
    displayName: "EditableCell.styles__Input",
    componentId: "sc-26b74d8a-5"
})([
    `width:auto;border:none;padding:0;background:transparent;outline:none;caret-color:var(--text-accent);color:var(--text-primary);font-family:var(`,
    `);font-size:var(`,
    `);font-style:var(`,
    `);font-weight:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);`
], tokens.fontFamily, tokens.fontSize, tokens.fontStyle, tokens.fontWeight, tokens.letterSpacing, tokens.lineHeight);
export const IconDoneButton = styled(IconButton).withConfig({
    displayName: "EditableCell.styles__IconDoneButton",
    componentId: "sc-26b74d8a-6"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`
], iconButtonTokens.iconButtonWidth, tokens.editableCellIconButtonWidth, iconButtonTokens.iconButtonHeight, tokens.editableCellIconButtonHeight);
export const IconResetButton = styled(IconButton).withConfig({
    displayName: "EditableCell.styles__IconResetButton",
    componentId: "sc-26b74d8a-7"
})([
    ``,
    `:auto;`,
    `:auto;`
], iconButtonTokens.iconButtonWidth, iconButtonTokens.iconButtonHeight);
