/* LearnFlash SVG Icons CSS */

.lf-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.lf-arrow-left {
    background-image: url('../img/arrow-left.svg');
}

.lf-arrow-right {
    background-image: url('../img/arrow-right.svg');
}

.lf-bars {
    background-image: url('../img/bars.svg');
}

.lf-home {
    background-image: url('../img/home.svg');
}

.lf-times {
    background-image: url('../img/times.svg');
}

.lf-check {
    background-image: url('../img/check.svg');
    /* Ensure the SVG can be colored */
    -webkit-mask-image: url('../img/check.svg');
    mask-image: url('../img/check.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: currentColor;
}

.lf-circle {
    background-image: url('../img/circle.svg');
    /* Ensure the SVG can be colored */
    -webkit-mask-image: url('../img/circle.svg');
    mask-image: url('../img/circle.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: currentColor;
}

.lf-chevron-down {
    background-image: url('../img/chevron-down.svg');
}

.lf-chevron-up {
    background-image: url('../img/chevron-up.svg');
}

.lf-lock {
    background-image: url('../img/lock-solid.svg');
    /* Ensure the SVG can be colored */
    -webkit-mask-image: url('../img/lock-solid.svg');
    mask-image: url('../img/lock-solid.svg');
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-position: center;
    mask-position: center;
    background-color: currentColor;
}