Breadcrumbs: Products

$breadcrumbs__list-home--padding     : 0 $spacer--medium 0 0 !default;
$breadcrumbs__list--padding          : $spacer--medium 0 !default;
$breadcrumbs__border                 : 0.75px solid #393939 !default;
$breadcrumbs__padding                : $spacer--medium $spacer--036 !default;
$breadcrumbs__color                  : #a6a6a6 !default;
$breadcrumbs__fill                   : $breadcrumbs__color !default;
$breadcrumbs__font-family            : $font-family-saira !default;
$breadcrumbs__color--active          : $breadcrumbs__color !default;
$breadcrumbs__font-family--active    : $font-family-saira !default;
$breadcrumbs__font-size              : $font-size-small !default;
$breadcrumbs__font-weight--active    : $font-weight-bold !default;
$breadcrumbs__text-decoration--active: none !default;
$breadcrumbs__button--background     : rgba(188, 188, 188, 0.75);

.breadcrumbs {
    @include mq($screen-m) {
        display: block;
        padding: 0;
    }

    &__list {
        display: flex;
        flex-wrap: wrap;
        margin: $spacer--05 0;
        padding: 0;
        @include mq($screen-m) {
            margin: $spacer--1 0;
        }
    }

    &__item {
        display: flex;
        align-items: stretch;
        font-size: $breadcrumbs__font-size;
        height: 2.3rem;
        text-decoration: none;
        font-family: $breadcrumbs__font-family;
        padding: 14px 0;
        &.category,
        &.content,
        &.product {
            padding: 0 15px 0 10px;
            &:before {
                content: "";
                margin: 0 $spacer;
                width: 1em;
                height: 1em;
                background-image: url('/images/icons/angle-left.svg');
                background-repeat: no-repeat;
                background-size: 11px 11px;
                color: transparent;
                display: inline-block;
                background-position: center;
            }
        }
        &.home {
            & a {
                &:before {
                    content: "";
                    margin: 0 $spacer;
                    width: 1em;
                    height: 1em;
                    background-image: url('/images/icons/angle-left.svg');
                    background-repeat: no-repeat;
                    background-size: 11px 11px;
                    color: transparent;
                    display: inline-block;
                    background-position: center;
                    filter: brightness(0) invert(1);
                }
            }
         }
        &:not(:first-child) {
            text-decoration: $breadcrumbs__text-decoration--active;
            align-items: center;
            padding: $breadcrumbs__padding;
            font-family: $breadcrumbs__font-family--active;
            color: $breadcrumbs__color--active;

            &:hover {
                filter: brightness(70%);
                cursor: pointer;
            }
        }
        &:first-of-type {
            border-radius: $border-radius;
            background-color: $breadcrumbs__button--background;
            color: $white;
            padding: $breadcrumbs__list-home--padding;

            &:hover {
                background-color: darken($breadcrumbs__button--background, 10%);
                color: $gray-lightest;
            }

            & .breadcrumbs__link {
                font-weight: bold;
                color: $white;
            }

            & svg.icon {
                fill: #fff;
                height: $spacer--m;
                width: $spacer--m;
                padding: $spacer--036;
            }
        }
        &:last-child {
            & .icon {
                fill: $breadcrumbs__fill;
                height: $spacer--m;
                width: $spacer--m;
                padding: $spacer--036;

            }
            &:hover {
                color: $gray-light;
                cursor: pointer;
            }
        }
    }

    &__link {
        color: $breadcrumbs__color;
        display: flex;
        align-items: center;
        font-family: $breadcrumbs__font-family;
        text-decoration: none;
        background-clip: content-box;

        & svg.icon {
            fill: $breadcrumbs__fill;
            height: $spacer--m;
            width: $spacer--m;
            padding: $spacer--036;
        }

        &:hover {
            color: $gray;
            cursor: pointer;
        }

        &--active {
            &:before {
                background: url('/images/icons/angle-left-active.svg') no-repeat;
                background-size: 11px 11px;
            }
        }
    }

    & + .page-main {
        & .heading--page {
            margin-top: 0;
        }
    }

    &--white {
        background: $black;
        &__item {
            &:not(:first-child) {
                color: $white;

                &:hover {
                    filter: brightness(70%);
                    cursor: pointer;
                }
            }
            &:last-child {
                &:hover {
                    filter: brightness(70%);
                    cursor: pointer;
                    color: $white;
                }
            }
        }

        &__link {
            color: $white;

            &:hover {
                cursor: pointer;
                color: $white;
            }

            &:before {
                background: url('/images/icons/angle-left-active.svg') no-repeat;
                background-size: 11px 11px;
            }
        }

        & .breadcrumbs__icon {
            fill: $white;
        }
    }

    & .container {
        width: 100%;
    }
}