import styled, { css } from "styled-components";
import { component, mergeConfig } from "../../../../engines";
import { addFocus } from "../../../../mixins";
import { classes, tokens } from "../../tokens";
import { dividerConfig, dividerTokens } from "../../../Divider";
const mergedDividerConfig = mergeConfig(dividerConfig);
const Divider = component(mergedDividerConfig);
export const StyledDivider = styled(Divider).withConfig({
    displayName: "SegmentGroup.styles__StyledDivider",
    componentId: "sc-b9e05f81-0"
})([
    ``,
    `:var(`,
    `,0.0625rem);`,
    `:var(`,
    `,0.0625rem);`,
    `:var(`,
    `);margin:var(`,
    `);.`,
    ` &{width:calc(100% - var(`,
    `,1rem));margin:var(`,
    `);}`
], dividerTokens.baseSideSize, tokens.dividerWidth, dividerTokens.borderRadius, tokens.dividerBorderRadius, dividerTokens.background, tokens.dividerColor, tokens.dividerMargin, classes.segmentVertical, tokens.dividerVerticalCompensation, tokens.dividerVerticalMargin);
export const base = css([
    `display:inline-flex;align-items:center;max-width:100%;&.`,
    `{max-width:none;max-height:100%;}border-radius:var(`,
    `);`,
    `:first-child{display:none;}& .`,
    ` + `,
    `{display:none;}& `,
    `:has(+ .`,
    `){display:none;}`
], classes.segmentVertical, tokens.groupBorderRadius, StyledDivider, classes.selectedSegmentItem, StyledDivider, StyledDivider, classes.selectedSegmentItem);
export const StyledContent = styled.div.withConfig({
    displayName: "SegmentGroup.styles__StyledContent",
    componentId: "sc-b9e05f81-1"
})([
    `display:inline-flex;flex-direction:row;align-items:center;max-width:100%;`
]);
export const StyledContentWrapper = styled.div.withConfig({
    displayName: "SegmentGroup.styles__StyledContentWrapper",
    componentId: "sc-b9e05f81-2"
})([
    `position:relative;height:100%;width:100%;display:flex;align-items:center;--plasma_private-clip-outline-offset:-0.063rem;--plasma_private-clip-outline-radius:0.063rem;&.`,
    `{overflow:scroll;scroll-padding:0.25rem;overscroll-behavior:contain;--plasma_private-clip-outline-offset:0.063rem;--plasma_private-clip-outline-radius:-0.063rem;scrollbar-width:none;::-webkit-scrollbar{display:none;}`,
    `{max-width:none;}}`
], classes.segmentGroupClipScroll, StyledContent);
export const StyledArrow = styled.button.withConfig({
    displayName: "SegmentGroup.styles__StyledArrow",
    componentId: "sc-b9e05f81-3"
})([
    `display:flex;cursor:pointer;border:none;background-color:transparent;outline:none;`,
    `;&[disabled]{cursor:not-allowed;}`
], addFocus({
    outlineSize: '0.063rem',
    outlineOffset: '0',
    outlineColor: `var(${tokens.outlineFocusColor})`,
    outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)'
}));
export const StyledLeftArrow = styled(StyledArrow).withConfig({
    displayName: "SegmentGroup.styles__StyledLeftArrow",
    componentId: "sc-b9e05f81-4"
})([
    `padding:var(`,
    `);padding-right:0;margin-right:0.1875rem;margin-left:0.125rem;`
], tokens.groupArrowPadding);
export const StyledRightArrow = styled(StyledArrow).withConfig({
    displayName: "SegmentGroup.styles__StyledRightArrow",
    componentId: "sc-b9e05f81-5"
})([
    `padding:var(`,
    `);padding-left:0;margin-left:0.1875rem;margin-right:0.125rem;`
], tokens.groupArrowPadding);
export const StyledTopArrow = styled(StyledArrow).withConfig({
    displayName: "SegmentGroup.styles__StyledTopArrow",
    componentId: "sc-b9e05f81-6"
})([
    `padding:var(`,
    `);padding-bottom:0;margin-bottom:0.1875rem;`
], tokens.groupVerticalArrowPadding);
export const StyledBottomArrow = styled(StyledArrow).withConfig({
    displayName: "SegmentGroup.styles__StyledBottomArrow",
    componentId: "sc-b9e05f81-7"
})([
    `padding:var(`,
    `);padding-top:0;margin-top:0.1875rem;`
], tokens.groupVerticalArrowPadding);
