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