import { css } from "styled-components";
import styled from "styled-components";
import { addFocus } from "../../../../mixins";
import { classes, tokens } from "../../tokens";
export var base = css([
    "display:inline-flex;align-items:center;max-width:100%;&.",
    "{max-width:none;max-height:100%;}&:before{border-radius:var(",
    ");}"
], classes.segmentVertical, tokens.groupBorderRadius);
export var StyledContent = styled.div.withConfig({
    displayName: "SegmentGroup.styles__StyledContent",
    componentId: "sc-b79134f7-0"
})([
    "display:inline-flex;flex-direction:row;align-items:center;max-width:100%;"
]);
export var StyledContentWrapper = styled.div.withConfig({
    displayName: "SegmentGroup.styles__StyledContentWrapper",
    componentId: "sc-b79134f7-1"
})([
    "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 var StyledArrow = styled.button.withConfig({
    displayName: "SegmentGroup.styles__StyledArrow",
    componentId: "sc-b79134f7-2"
})([
    "display:flex;cursor:pointer;border:none;background-color:transparent;outline:none;",
    ";&[disabled]{cursor:not-allowed;}"
], addFocus({
    outlineSize: '0.063rem',
    outlineOffset: '-0.125rem',
    outlineColor: "var(".concat(tokens.outlineFocusColor, ")"),
    outlineRadius: 'calc(var(--plasma_private-outline-radius) - 0.063rem)'
}));
export var StyledLeftArrow = styled(StyledArrow).withConfig({
    displayName: "SegmentGroup.styles__StyledLeftArrow",
    componentId: "sc-b79134f7-3"
})([
    "padding:var(",
    ");padding-right:0;margin-right:0.1875rem;margin-left:0.125rem;"
], tokens.groupArrowPadding);
export var StyledRightArrow = styled(StyledArrow).withConfig({
    displayName: "SegmentGroup.styles__StyledRightArrow",
    componentId: "sc-b79134f7-4"
})([
    "padding:var(",
    ");padding-left:0;margin-left:0.1875rem;margin-right:0.125rem;"
], tokens.groupArrowPadding);
export var StyledTopArrow = styled(StyledArrow).withConfig({
    displayName: "SegmentGroup.styles__StyledTopArrow",
    componentId: "sc-b79134f7-5"
})([
    "padding:var(",
    ");padding-bottom:0;margin-bottom:0.1875rem;"
], tokens.groupVerticalArrowPadding);
export var StyledBottomArrow = styled(StyledArrow).withConfig({
    displayName: "SegmentGroup.styles__StyledBottomArrow",
    componentId: "sc-b79134f7-6"
})([
    "padding:var(",
    ");padding-top:0;margin-top:0.1875rem;"
], tokens.groupVerticalArrowPadding);
