/* * DO NOT EDIT THIS FILE. * See the following change record for more information, * https://www.drupal.org/node/3084859 * @preserve */ /** * @file * Breadcrumb region. */ .breadcrumb { position: relative; font-size: 0.875rem; font-weight: bold; line-height: var(--sp1); /* Shadow on the right side of breadcrumbs for narrow screens. */ } .breadcrumb::after { position: absolute; inset-block-start: 0; inset-inline-end: calc(var(--sp1) * -1); width: var(--sp3); height: var(--sp2); content: ""; background: linear-gradient(to left, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); /* LTR */ } @media (min-width: 62.5rem) { .breadcrumb::after { content: none; } } @media (min-width: 62.5rem) { .breadcrumb { position: static; } } [dir="rtl"] .breadcrumb::after { background: linear-gradient(to right, var(--color--white) 0%, rgba(255, 255, 255, 0) 100%); } .breadcrumb__content { overflow: auto; margin-block-start: calc(var(--sp0-5) * -1); margin-block-end: calc(var(--sp0-5) * -1); margin-inline-start: calc(var(--sp0-5) * -1); margin-inline-end: calc(var(--sp1) * -1); padding-block-start: var(--sp0-5); padding-block-end: var(--sp0-5); padding-inline-start: var(--sp0-5); -webkit-overflow-scrolling: touch; } @media (min-width: 62.5rem) { .breadcrumb__content { margin-inline-end: 0; } } .breadcrumb__list { overflow-x: auto; width: max-content; margin-block: 0; margin-inline-start: calc(var(--sp1) * -1); margin-inline-end: calc(var(--sp1) * -1); padding-block: 0 var(--sp1); padding-inline-start: var(--sp1); padding-inline-end: 0; list-style: none; white-space: nowrap; } @media (min-width: 62.5rem) { .breadcrumb__list { overflow: visible; margin-inline-start: 0; margin-inline-end: 0; padding-block-end: 0; padding-inline-start: 0; white-space: normal; } } .breadcrumb__item { display: inline-block; } .breadcrumb__item:nth-child(n + 2)::before { display: inline-block; width: 0.5rem; height: 0.5rem; margin-inline: 1rem 1.25rem; content: ""; transform: rotate(45deg); /* LTR */ border-block-start: 2px solid var(--color--gray-45); border-inline-end: 2px solid var(--color--gray-45); } .breadcrumb__item:last-child { margin-inline-end: var(--sp3); } @media (min-width: 62.5rem) { .breadcrumb__item:last-child { margin-inline-end: 0; } } [dir="rtl"] .breadcrumb__item:nth-child(n + 2)::before { transform: rotate(-45deg); } .breadcrumb__link { -webkit-text-decoration: none; text-decoration: none; color: var(--color-text-primary-medium); } .breadcrumb__link:hover, .breadcrumb__link:focus { -webkit-text-decoration: underline; text-decoration: underline; }