@layer atoms{.phxsg-breadcrumb{width:100%;position:relative;letter-spacing:var(--letter-spacing-xs);mask-image:linear-gradient(90deg,rgb(0 0 0 / 100%) 95%,transparent);[dir=rtl] &{mask-image:linear-gradient(90deg,transparent,rgb(0 0 0 / 100%) 5%)}}.phxsg-breadcrumb__inner{display:flex;padding-inline-start:0;width:100%;overflow-x:scroll;@media screen and (min-width: 768px){overflow:visible;padding-inline-end:0}&::-webkit-scrollbar{display:none}>li{display:inline-block;flex:1 1 100%;max-width:max-content;position:relative;font-size:var(--font-size-xs);color:var(--color-grey-400);white-space:nowrap;@media screen and (min-width: 768px){overflow:hidden;text-overflow:ellipsis}&:not(:first-child){margin-inline-start:var(--spacing-xs);padding-inline-start:var(--spacing-sm)}&:last-child{flex:0 0 auto;padding-inline-end:50px;min-width:initial;text-overflow:unset}+li:before{color:var(--color-grey-300);content:"";width:6px;height:6px;position:absolute;top:calc(50% - 3px);left:-3px;transform:rotate(-45deg);box-shadow:inset -1px -1px 0 currentColor}[dir=rtl] &+li:before{right:-3px;left:auto;transform:rotate(135deg)}}}.phxsg-breadcrumb__inner a{color:var(--color-grey-800);transition:color var(--duration-standard) var(--ease-in-out);&:hover{color:var(--color-grey-450)}}.theme-black .phxsg-breadcrumb{.phxsg-breadcrumb__inner a{color:var(--color-grey-50);&:hover{color:var(--color-grey-300)}}& ul{>li{color:var(--color-grey-200)}}}}