$prev-icon-black: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
$prev-icon-yellow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='yellow' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
$prev-icon-white: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");

$next-icon-black: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='black' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
$next-icon-yellow: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='yellow' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
$next-icon-white: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");

.carousel {

    .black-white,
    .yellow-black,
    .black-yellow,
    .carousel-indicators > li.active{
        background-color: $hcSecondary;
        border: 2px solid $hcPrimary;
    }

    .carousel-indicators,
    .carousel-indicators > li:before,
    .carousel-indicators > li:after {
        background-color: transparent;
    }

    .carousel-indicators > li {
        background-color: $hcPrimary;
        border: 2px solid $hcSecondary;
    }

    /**
     * all controls
     */
    a.carousel-control-prev:hover,
    a.carousel-control-next:hover {
        background-color: $hcPrimary;
    }

    a.carousel-control-prev:focus,
    a.carousel-control-next:focus {
        outline: 2px dotted $hcPrimary;
    }

    /**
     * prev control
     */
    .prev-icon {
        &--black-white {
            background-image: $prev-icon-white
        }

        &--yellow-black {
            background-image: $prev-icon-black;
        }

        &--black-yellow {
            background-image: $prev-icon-yellow;
        }
    }

    a.black-white.carousel-control-prev:hover > .prev-icon--black-white {
        background-image: $prev-icon-black;
    }

    a.yellow-black.carousel-control-prev:hover > .prev-icon--yellow-black {
        background-image: $prev-icon-yellow;
    }

    a.black-yellow.carousel-control-prev:hover > .prev-icon--black-yellow {
        background-image: $prev-icon-black;
    }

    /**
     * next control
     */
    .next-icon {
        &--black-white {
            background-image: $next-icon-white;
        }

        &--yellow-black {
            background-image: $next-icon-black;
        }

        &--black-yellow {
            background-image: $next-icon-yellow;
        }
    }

    a.black-white.carousel-control-next:hover > .next-icon--black-white {
        background-image: $next-icon-black;
    }

    a.yellow-black.carousel-control-next:hover > .next-icon--yellow-black {
        background-image: $next-icon-yellow;
    }

    a.black-yellow.carousel-control-next:hover > .next-icon--black-yellow {
        background-image: $next-icon-black;
    }
}
