@import '../../../styles/fills';
@import '../../../styles/mixins';
@import '../../../styles/definitions/typography';

.breadCrumbs {
    $link-color: $body-color;
    $text-color: $gray-61;
    $separator-color: $gray-61;
    $hover-color: $primary-color;
    
    &_icon {
        $size: 16px;
        fill: $link-color;
        width: $size;
        height: $size;
    }

    &_baseLink {
        &Text {
            &--hidden {
                @extend %sr-only;
            }
        }
    }

    &_linkList {
        @extend %reset-list;
        display: inline-block;
        > li {
            display: inline;
        }
    }

    &_crumbGroup, &_crumbLink, &_crumbText, &_baseLink {
        font-size: $bodyFontSize5;
        color: $text-color;
        height: 16px;
        line-height: 16px;
        text-decoration: none;
    }

    &_crumbLink, &_baseLink {
        cursor: pointer;
        color: $link-color;
        vertical-align: middle;
        &:hover, &:focus {
            transition: color 0.3s;
            color: $hover-color;
            text-decoration: none;
        }
    }
    
    &_crumbText {
        color: $text-color;
    }

    &_caret {
        fill: $separator-color;
        height: 12px;
        width: 8px;
    }
    &_caretContainer {
        padding: 0 18px;
        vertical-align: middle;
    }
    &_separatorContainer {
        padding: 0 10px;
        color: $separator-color;
    }
}
