import styled from "styled-components";
import { addFocus } from "../../../../mixins";
import { IconChevronDownFill, IconMinus } from "../../../_Icon";
import { classes, privateTokens, tokens } from "../../Accordion.tokens";
export const StyledAccordionHeader = styled.div.withConfig({
    displayName: "AccordionItem.styles__StyledAccordionHeader",
    componentId: "sc-95f3f5c2-0"
})([
    `width:100%;border:none;padding:var(`,
    `);display:flex;gap:var(`,
    `);justify-content:space-between;align-items:center;background:none;box-sizing:border-box;cursor:pointer;&:focus{outline:none;}`,
    ``
], tokens.accordionItemPadding, tokens.accordionItemGap, addFocus({
    outlineOffset: '0.125rem',
    outlineSize: '0.125rem',
    outlineRadius: `var(${privateTokens.calculatedBorderRadius})`,
    outlineColor: `var(${tokens.accordionItemFocus})`
}));
export const StyledAccordionHeaderLeft = styled.div.withConfig({
    displayName: "AccordionItem.styles__StyledAccordionHeaderLeft",
    componentId: "sc-95f3f5c2-1"
})([
    `display:flex;gap:var(`,
    `,var(`,
    `));justify-content:space-between;align-items:center;`
], tokens.accordionItemHeaderLeftGap, tokens.accordionItemGap);
export const StyledAccordionContentRight = styled.div.withConfig({
    displayName: "AccordionItem.styles__StyledAccordionContentRight",
    componentId: "sc-95f3f5c2-2"
})([
    `transition:0.2s;transform:rotate(90deg);&.`,
    `{transition:0.2s;transform:rotate(0deg);}`
], classes.accordionItemShowBody);
export const StyledAccordionContentLeft = styled.div.withConfig({
    displayName: "AccordionItem.styles__StyledAccordionContentLeft",
    componentId: "sc-95f3f5c2-3"
})([
    `transition:0.2s;display:flex;align-items:center;&.`,
    `{transition:0.2s;transform:rotate(180deg);}`
], classes.accordionItemShowBody);
export const StyledAccordionTitle = styled.div.withConfig({
    displayName: "AccordionItem.styles__StyledAccordionTitle",
    componentId: "sc-95f3f5c2-4"
})([
    `color:var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-weight:var(`,
    `);font-style:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);text-align:left;`
], tokens.accordionItemTitleColor, tokens.accordionItemTitleFontFamily, tokens.accordionItemTitleFontSize, tokens.accordionItemTitleFontWeight, tokens.accordionItemTitleFontStyle, tokens.accordionItemTitleLetterSpacing, tokens.accordionItemTitleLineHeight);
export const StyledAccordionBodyAnimate = styled.div.withConfig({
    displayName: "AccordionItem.styles__StyledAccordionBodyAnimate",
    componentId: "sc-95f3f5c2-5"
})([
    `display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.2s ease-out;overflow:hidden;&.`,
    `{grid-template-rows:1fr;padding-bottom:var(`,
    `,var(`,
    `));&.`,
    `{transition:0.2s;transform:rotate(0deg);}}`
], classes.accordionItemShowBody, tokens.accordionItemBodyPaddingBottom, tokens.accordionItemPaddingVertical, classes.accordionPlusAnimationElement);
export const StyledAccordionBody = styled.div.withConfig({
    displayName: "AccordionItem.styles__StyledAccordionBody",
    componentId: "sc-95f3f5c2-6"
})([
    `color:var(`,
    `);font-family:var(`,
    `);font-size:var(`,
    `);font-weight:var(`,
    `);font-style:var(`,
    `);letter-spacing:var(`,
    `);line-height:var(`,
    `);overflow:hidden;padding-right:var(`,
    `);padding-left:var(`,
    `);text-align:left;`
], tokens.accordionItemTextColor, tokens.accordionItemTextFontFamily, tokens.accordionItemTextFontSize, tokens.accordionItemTextFontWeight, tokens.accordionItemTextFontStyle, tokens.accordionItemTextLetterSpacing, tokens.accordionItemTextLineHeight, tokens.accordionItemPaddingHorizontal, tokens.accordionItemPaddingHorizontalLeft);
export const StyledArrow = styled(IconChevronDownFill).withConfig({
    displayName: "AccordionItem.styles__StyledArrow",
    componentId: "sc-95f3f5c2-7"
})([
    `pointer-events:none;user-select:none;color:var(`,
    `);`
], tokens.accordionItemIconColor);
export const StyledMinus = styled(IconMinus).withConfig({
    displayName: "AccordionItem.styles__StyledMinus",
    componentId: "sc-95f3f5c2-8"
})([
    `pointer-events:none;user-select:none;color:var(`,
    `);display:flex;align-items:center;position:absolute;top:0;left:0;&.`,
    `{transition:0.2s;transform:rotate(90deg);}&.`,
    `{transition:0.2s;transform:rotate(0deg);color:var(`,
    `,var(`,
    `));}`
], tokens.accordionItemIconColor, classes.accordionPlusAnimationElement, classes.accordionItemShowBody, tokens.accordionItemOpenedTitleColor, tokens.accordionItemIconColor);
export const StyledPlus = styled.div.withConfig({
    displayName: "AccordionItem.styles__StyledPlus",
    componentId: "sc-95f3f5c2-9"
})([
    `position:relative;display:flex;align-items:center;justify-content:center;width:var(`,
    `,1rem);height:var(`,
    `,1rem);`
], tokens.accordionItemIconSize, tokens.accordionItemIconSize);
export const StyledAccordionItem = styled.div.withConfig({
    displayName: "AccordionItem.styles__StyledAccordionItem",
    componentId: "sc-95f3f5c2-10"
})([
    `background:var(`,
    `);border:var(`,
    `);border-bottom:var(`,
    `);box-shadow:var(`,
    `);&:last-child{border-bottom:var(`,
    `);}&.`,
    `{opacity:0.4;cursor:not-allowed;}&:hover:not(.`,
    `){background:var(`,
    `,var(`,
    `));}&.`,
    `{background:var(`,
    `,var(`,
    `));`,
    `{color:var(`,
    `,var(`,
    `));}`,
    `{color:var(`,
    `,var(`,
    `));}}`
], tokens.accordionItemBackground, tokens.accordionItemBorder, tokens.accordionItemBorderBottom, tokens.accordionItemShadow, tokens.accordionItemBorder, classes.accordionDisabled, classes.accordionItemOpened, tokens.accordionItemBackgroundHover, tokens.accordionItemBackground, classes.accordionItemOpened, tokens.accordionItemOpenedBackground, tokens.accordionItemBackground, StyledArrow, tokens.accordionItemOpenedTitleColor, tokens.accordionItemIconColor, StyledAccordionTitle, tokens.accordionItemOpenedTitleColor, tokens.accordionItemTitleColor);
