@shopify/polaris/dist/esnext/components/Breadcrumbs/Breadcrumbs.css

Shopify’s product component library

.Polaris-Breadcrumbs__Breadcrumb_llsun{ font-size:1.5rem; font-weight:400; line-height:2rem; text-transform:initial; letter-spacing:initial; color:var(--p-text-subdued, #637381); -webkit-appearance:none; -moz-appearance:none; appearance:none; margin:0; padding:0; background:none; border:none; font-size:inherit; line-height:inherit; cursor:pointer; position:relative; display:flex; align-items:center; min-height:3.6rem; margin:-0.4rem -0.8rem -0.4rem -0.4rem; color:var(--p-text-subdued, #637381); text-decoration:none; }

@media (min-width: 40em){ .Polaris-Breadcrumbs__Breadcrumb_llsun{ font-size:1.4rem; } }

.Polaris-Breadcrumbs__Breadcrumb_llsun:focus{ outline:none; }

.Polaris-Breadcrumbs__Breadcrumb_llsun.Polaris-Breadcrumbs--newDesignLanguage_1rik8{ position:relative; margin:0; padding:0.2rem; border-radius:var(--p-border-radius-base); border:1px solid var(--p-border-neutral-subdued); }

.Polaris-Breadcrumbs__Breadcrumb_llsun.Polaris-Breadcrumbs--newDesignLanguage_1rik8::after{ content:var(--p-non-null-content, none); position:absolute; z-index:1; top:-0.2rem; right:-0.2rem; bottom:-0.2rem; left:-0.2rem; display:block; pointer-events:none; box-shadow:0 0 0 -0.2rem var(--p-focused); transition:box-shadow 100ms var(--p-ease); border-radius:calc(var(--p-border-radius-base) + 0.1rem); }

.Polaris-Breadcrumbs__Breadcrumb_llsun.Polaris-Breadcrumbs--newDesignLanguage_1rik8:hover{ background-color:var(--p-surface-hovered); }

.Polaris-Breadcrumbs__Breadcrumb_llsun.Polaris-Breadcrumbs--newDesignLanguage_1rik8:active{ background-color:var(--p-surface-pressed); }

.Polaris-Breadcrumbs__Breadcrumb_llsun:hover, .Polaris-Breadcrumbs__Breadcrumb_llsun:active{ color:var(--p-text, #212b36); text-decoration:none; }

.Polaris-Breadcrumbs__Breadcrumb_llsun:hover .Polaris-Breadcrumbs__Icon_yj27d svg, .Polaris-Breadcrumbs__Breadcrumb_llsun:active .Polaris-Breadcrumbs__Icon_yj27d svg{ fill:var(--p-icon-pressed, #212b36); }

.Polaris-Breadcrumbs__Breadcrumb_llsun:focus{ outline:none; }

.Polaris-Breadcrumbs__Breadcrumb_llsun:focus .Polaris-Breadcrumbs__ContentWrapper_1yvfo{ background:var(--p-override-transparent, rgba(33, 43, 54, 0.1)); }

.Polaris-Breadcrumbs__Breadcrumb_llsun:active .Polaris-Breadcrumbs__ContentWrapper_1yvfo{ background:var(--p-override-transparent, rgba(33, 43, 54, 0.1)); }

.Polaris-Breadcrumbs__Breadcrumb_llsun:focus:not(:active)::after{ box-shadow:0 0 0 0.2rem var(--p-focused); }

@media (-ms-high-contrast: active){ .Polaris-Breadcrumbs__Breadcrumb_llsun:focus:not(:active)::after{ outline:1px solid windowText; } }

.Polaris-Breadcrumbs__ContentWrapper_1yvfo{ position:relative; display:flex; align-items:center; padding:0.8rem 0.8rem; background:transparent; height:2.8rem; border-radius:var(--p-border-radius-wide, 3px); -webkit-backface-visibility:hidden; backface-visibility:hidden; will-change:background; transition:background 200ms cubic-bezier(0.64, 0, 0.35, 1); }

.Polaris-Breadcrumbs--newDesignLanguage_1rik8 .Polaris-Breadcrumbs__ContentWrapper_1yvfo{ width:2.8rem; justify-content:center; margin-left:0; padding:0; }

.Polaris-Breadcrumbs__Content_xd1mk{ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; position:relative; }

.Polaris-Breadcrumbs__Icon_yj27d{ width:2rem; height:2rem; margin:-1rem 0 -1rem -0.8rem; margin:0 0 0 -0.8rem; }

.Polaris-Breadcrumbs__Icon_yj27d svg{ fill:var(--p-icon, #637381); }

.Polaris-Breadcrumbs--newDesignLanguage_1rik8 .Polaris-Breadcrumbs__Icon_yj27d{ margin:0; }