import styled from "styled-components";
import { component, mergeConfig } from "../../../../../../engines";
import { selectConfig, selectTokens } from "../../../../../Select";
import { indicatorConfig, indicatorTokens } from "../../../../../Indicator";
import { tableTokens as tokens } from "../../../../Table.tokens";
import { StyledCheckbox as Checkbox, StyledDivider as Divider } from "../../../../Table.styles";
const SelectBase = component(selectConfig);
export const Select = styled(SelectBase).withConfig({
    displayName: "Filter.styles__Select",
    componentId: "sc-3e2bf1e2-0"
})([
    ``,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(`,
    `);`,
    `:var(--text-accent);`,
    `:var(--on-dark-text-primary);`,
    `:var(--text-secondary);`
], selectTokens.padding, tokens.selectPadding, selectTokens.borderRadius, tokens.selectBorderRadius, selectTokens.itemHeight, tokens.selectItemHeight, selectTokens.itemPadding, tokens.selectItemPadding, selectTokens.itemBorderRadius, tokens.selectItemBorderRadius, selectTokens.itemIconMargin, tokens.selectItemIconMargin, selectTokens.itemIconSize, tokens.selectItemIconSize, selectTokens.cellPadding, tokens.selectCellPadding, selectTokens.cellTitleFontFamily, tokens.selectCellTitleFontFamily, selectTokens.cellTitleFontSize, tokens.selectCellTitleFontSize, selectTokens.cellTitleFontStyle, tokens.selectCellTitleFontStyle, selectTokens.cellTitleFontWeight, tokens.selectCellTitleFontWeight, selectTokens.cellTitleLetterSpacing, tokens.selectCellTitleLetterSpacing, selectTokens.cellTitleLineHeight, tokens.selectCellTitleLineHeight, selectTokens.checkboxTriggerSize, tokens.selectCheckboxTriggerSize, selectTokens.checkboxTriggerBorderRadius, tokens.selectCheckboxTriggerBorderRadius, selectTokens.checkboxTriggerBorderWidth, tokens.selectCheckboxTriggerBorderWidth, selectTokens.checkboxTriggerBorderCheckedColor, tokens.selectCheckboxTriggerBorderCheckedColor, selectTokens.checkboxFillColor, selectTokens.checkboxIconColor, selectTokens.checkboxTriggerBorderColor);
const mergedIndicatorConfig = mergeConfig(indicatorConfig);
const Indicator = component(mergedIndicatorConfig);
export const IconFilterWrapper = styled.div.withConfig({
    displayName: "Filter.styles__IconFilterWrapper",
    componentId: "sc-3e2bf1e2-1"
})([
    `position:relative;line-height:0;cursor:pointer;`
]);
export const StyledIndicator = styled(Indicator).withConfig({
    displayName: "Filter.styles__StyledIndicator",
    componentId: "sc-3e2bf1e2-2"
})([
    `position:absolute;top:2%;right:3%;`,
    `:0.375rem;`,
    `:var(--surface-accent);`
], indicatorTokens.size, indicatorTokens.color);
export const StyledCheckbox = styled(Checkbox).withConfig({
    displayName: "Filter.styles__StyledCheckbox",
    componentId: "sc-3e2bf1e2-3"
})([
    `padding:var(`,
    `);`
], tokens.filterCheckboxPadding);
export const StyledDivider = styled(Divider).withConfig({
    displayName: "Filter.styles__StyledDivider",
    componentId: "sc-3e2bf1e2-4"
})([
    `margin:var(`,
    `);`
], tokens.filterDividerMargin);
export const ControlPanel = styled.div.withConfig({
    displayName: "Filter.styles__ControlPanel",
    componentId: "sc-3e2bf1e2-5"
})([
    `display:flex;justify-content:space-between;padding:var(`,
    `);gap:var(`,
    `);user-select:none;`
], tokens.selectControlPanelPadding, tokens.selectControlPanelGap);
