frutjam/dist/components/breadcrumb.css

A utility-first CSS UI Library for Tailwind CSS

/*! frutjam v2.2.1 (c) 2026 Nezanuha | Released under the MIT License | https://frutjam.com */
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */@layer properties;.breadcrumb-list{list-style:none;padding:0;margin:0;display:flex;min-height:-moz-min-content;min-height:min-content;align-items:center;white-space:nowrap}.breadcrumb-separator{display:flex;align-items:center;margin-inline:.5rem;color:var(--color-body)}.breadcrumb-item{display:flex;align-items:center;&:before{content:var(--tw-content);content:"";margin-inline-end:.75rem;margin-inline-start:.5rem;height:.375rem;width:.375rem;display:block;transform:rotate(45deg);transition:transform .3s;border-block-start:1px solid;border-inline-end:1px solid;background-color:oklch(0 0 0/0);color:var(--color-body)}&:first-child{&:before{content:var(--tw-content);content:none}}&:has(.breadcrumb-separator){&:before{content:var(--tw-content);content:none}}&:where(:dir(rtl),[dir=rtl],[dir=rtl] *){&:before{content:var(--tw-content);transform:rotate(-135deg)}}&:has([aria-current=page]){color:currentColor}}.breadcrumb-link{color:var(--color-body);display:flex;align-items:center;gap:.5rem;line-height:1.125rem;text-decoration:none;background-image:linear-gradient(currentColor,currentColor);background-position:0 100%;background-repeat:no-repeat;background-size:0 1px;transition:background-size .2s ease-out,color .2s ease-out;&:hover{@media (hover:hover){background-size:100% 1px;cursor:pointer}}&:focus{outline-style:none;@media (forced-colors:active){outline:2px solid transparent;outline-offset:2px}}&:focus-visible{outline:2px solid currentColor;outline-offset:2px}}.breadcrumb-current{color:currentColor;display:flex;align-items:center;gap:.5rem;line-height:1.125rem}.breadcrumb{padding-block:.5rem;max-width:100%;overflow-x:auto;font-size:.875rem;color:currentColor}@property --tw-content{syntax:"*";initial-value:"";inherits:false}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--tw-content:""}}}