import styled from "styled-components";
import { addFocus } from "../../../../mixins";
import { tokens } from "../../Breadcrumbs.tokens";
export var StyledRoot = styled.div.withConfig({
    displayName: "BreadcrumbShorter.styles__StyledRoot",
    componentId: "sc-dedfcb55-0"
})([
    ""
]);
export var StyledShorter = styled.div.withConfig({
    displayName: "BreadcrumbShorter.styles__StyledShorter",
    componentId: "sc-dedfcb55-1"
})([
    "cursor:pointer;",
    ""
], addFocus({
    outlineOffset: '0.125rem',
    outlineSize: '0.125rem',
    outlineRadius: '0',
    outlineColor: "var(".concat(tokens.breadcrumbsFocusOutlineColor, ")")
}));
export var StyledHidden = styled.div.withConfig({
    displayName: "BreadcrumbShorter.styles__StyledHidden",
    componentId: "sc-dedfcb55-2"
})([
    "display:flex;align-items:center;gap:var(",
    ");"
], tokens.breadcrumbsGap);
