// /**
// * Copyright © Magento, Inc. All rights reserved.
// * See COPYING.txt for license details.
// */
// # Breadcrumbs
// Breadcrumbs or breadcrumb trail is a navigation aid used in user interfaces. It allows users to keep track of their location within programs, websites or documents.
//
// Breadcrumbs layout with links can be separated by any symbol, for example >
symbol.
//
// The following markup corresponds to the accessibility demands:
// ```html
//
//
Mixin variable | //Global variable | //Default value | //Allowed values | //Comment | //
---|---|---|---|---|
@_breadcrumbs-font-size | //@breadcrumbs__font-size | //@font-size__s | //'' | false | value | //Breadcrumbs font size | //
@_breadcrumbs-display | //@breadcrumbs__display | //false | //'' | false | inline | block | inline-block | //Breadcrumbs links display property | //
@_breadcrumbs__container-margin | //@breadcrumbs__container-margin | //0 0 @indent__base | //'' | false | value | //Breadcrumbs items padding | //
@_breadcrumbs-padding | //@breadcrumbs__padding | //false | //'' | false | value | //Breadcrumbs items padding | //
Breadcrumbs - separator symbol | //||||
@_breadcrumbs-separator-symbol | //@breadcrumbs-separator__symbol | //false | //'' | false | any symbol | //Breadcrumbs separating symbol | //
@_breadcrumbs-separator-color | //@breadcrumbs-separator__color | //@breadcrumbs-current__color | //'' | false | value | //Breadcrumbs separating symbol color | //
@_breadcrumbs-icon-use | //@breadcrumbs-icon__use | //true | //true | false | //Breadcrumbs separating symbol is an icon | //
@_breadcrumbs-icon-font-content | //@breadcrumbs-icon__font-content | //@icon-next | //'' | false | icon | //Breadcrumbs separating icon symbol | //
@_icon-font | //@breadcrumbs-icon__font | //@icon-font | //'' | false | font | //Breadcrumbs separating icon font | //
@_icon-font-size | //@breadcrumbs-icon__font-size | //24px | //'' | false | value | //Breadcrumbs separating icon font size | //
@_icon-font-line-height | //@breadcrumbs-icon__font-line-height | //18px | //'' | false | value | //Breadcrumbs separating icon line height | //
@_icon-font-color | //@breadcrumbs-icon__font-color | //false | //'' | false | value | //Breadcrumbs separating icon color | //
@_icon-font-margin | //@breadcrumbs-icon__font-margin | //0 | //'' | false | value | //Breadcrumbs separating icon margin | //
@_icon-font-vertical-align | //@breadcrumbs-icon__font-vertical-align | //top | //'' | false | value | //Breadcrumbs separating icon vertical align | //
Breadcrumbs - current page | //||||
@_breadcrumbs-current-color | //@breadcrumbs-current__color | //#a3a3a3 | //'' | false | value | //Breadcrumbs current page color | //
@_breadcrumbs-current-font-weight | //@breadcrumbs-current__font-weight | //@font-weight__regular | //'' | false | value | //Breadcrumbs current page font weight | //
@_breadcrumbs-current-background | //@breadcrumbs-current__background | //false | //'' | false | value | //Breadcrumbs current page background | //
@_breadcrumbs-current-border | //@breadcrumbs-current__border | //false | //'' | false | value | //Breadcrumbs current page border | //
@_breadcrumbs-current-gradient | //@breadcrumbs-current__gradient | //false | //true | false | //Breadcrumbs current page have gradient background | //
@_breadcrumbs-current-gradient-direction | //@breadcrumbs-current__gradient-direction | //false | //'' | false | vertical | horizontal | //Direction of breadcrumbs current page background gradient (if there is any) | //
@_breadcrumbs-current-gradient-color-start | //@breadcrumbs-current__gradient-color-start | //false | //'' | false | value | //Breadcrumbs current page gradient start color | //
@_breadcrumbs-current-gradient-color-end | //@breadcrumbs-current__gradient-color-end | //false | //'' | false | value | //Breadcrumbs current page gradient end color | //
Breadcrumbs link | //||||
@_breadcrumbs-link-gradient | //@breadcrumbs-link__gradient | //false | //true | false | //Breadcrumbs items have gradient background | //
@_breadcrumbs-link-gradient-direction | //@breadcrumbs-link__gradient-direction | //false | //'' | false | vertical | horizontal | //Direction of breadcrumbs item background gradient (if there is any) | //
Breadcrumbs link - default | //||||
@_breadcrumbs-link-color | //@breadcrumbs-link__color | //@primary__color | //'' | false | value | //Breadcrumbs item color | //
@_breadcrumbs-link-background | //@breadcrumbs-link__background | //false | //'' | false | value | //Breadcrumbs item background | //
@_breadcrumbs-link-border | //@breadcrumbs-link__border | //false | //'' | false | value | //Breadcrumbs item border | //
@_breadcrumbs-link-text-decoration | //@breadcrumbs-link__text-decoration | //none | //'' | false | value | //Breadcrumbs item text decoration | //
@_breadcrumbs-link-gradient-color-start | //@breadcrumbs-link__gradient-color-start | //false | //'' | false | value | //Breadcrumbs item gradient start color | //
@_breadcrumbs-link-gradient-color-end | //@breadcrumbs-link__gradient-color-end | //false | //'' | false | value | //Breadcrumbs item gradient end color | //
Breadcrumbs link - visited | //||||
@_breadcrumbs-link-color-visited | //@breadcrumbs-link__visited__color | //@primary__color | //'' | false | value | //Breadcrumbs item visited color | //
@_breadcrumbs-link-background-visited | //@breadcrumbs-link__visited__background | //@breadcrumbs-link__background | //'' | false | value | //Breadcrumbs item visited background | //
@_breadcrumbs-link-border-visited | //@breadcrumbs-link__visited__border | //@breadcrumbs-link__border | //'' | false | value | //Breadcrumbs item visited border | //
@_breadcrumbs-link-text-decoration-visited | //@breadcrumbs-link__visited__text-decoration | //none | //'' | false | value | //Breadcrumbs item text decoration | //
@_breadcrumbs-link-gradient-color-start-visited | //@breadcrumbs-link__visited__gradient-color-start | //false | //'' | false | value | //Breadcrumbs item visited gradient start color | //
@_breadcrumbs-link-gradient-color-end-visited | //@breadcrumbs-link__visited__gradient-color-end | //false | //'' | false | value | //Breadcrumbs item visited gradient end color | //
Breadcrumbs link - hover | //||||
@_breadcrumbs-link-color-hover | //@breadcrumbs-link__hover__color | //@primary__color | //'' | false | value | //Breadcrumbs item hover color | //
@_breadcrumbs-link-background-hover | //@breadcrumbs-link__hover__background | //false | //'' | false | value | //Breadcrumbs item hover background | //
@_breadcrumbs-link-border-hover | //@breadcrumbs-link__hover__border | //@breadcrumbs-link__border | //'' | false | value | //Breadcrumbs item hover border | //
@_breadcrumbs-link-text-decoration-hover | //@breadcrumbs-link__hover__text-decoration | //underline | //'' | false | value | //Breadcrumbs item hover text decoration | //
@_breadcrumbs-link-gradient-color-start-hover | //@breadcrumbs-link__hover__gradient-color-start | //false | //'' | false | value | //Breadcrumbs item hover gradient start color | //
@_breadcrumbs-link-gradient-color-end-hover | //@breadcrumbs-link__hover__gradient-color-end | //false | //'' | false | value | //Breadcrumbs item hover gradient end color | //
Breadcrumbs link - active | //||||
@_breadcrumbs-link-color-active | //@breadcrumbs-link__active__color | //@primary__color | //'' | false | value | //Breadcrumbs item active color | //
@_breadcrumbs-link-background-active | //@breadcrumbs-link__active__background | //@breadcrumbs-link__background | //'' | false | value | //Breadcrumbs item active background | //
@_breadcrumbs-link-border-active | //@breadcrumbs-link__active__border | //@breadcrumbs-link__border | //'' | false | value | //Breadcrumbs item active border | //
@_breadcrumbs-link-text-decoration-active | //@breadcrumbs-link__active__text-decoration | //none | //'' | false | value | //Breadcrumbs item active text decoration | //
@_breadcrumbs-link-gradient-color-start-active | //@breadcrumbs-link__active__gradient-color-start | //false | //'' | false | value | //Breadcrumbs item active gradient start color | //
@_breadcrumbs-link-gradient-color-end-active | //@breadcrumbs-link__active__gradient-color-end | //false | //'' | false | value | //Breadcrumbs item active gradient end color | //