.back-icon {
    width: 1.5em;
    height: 1.5em;
    position: relative;
    display: inline-flex;
}
.back-icon:before, .back-icon:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    height: 0.25em;
    width: var(--back-icon-arm-length);
    border-radius: 0.125em;
    transform-origin: 0.125em center;
    background-color: currentColor;
    transition: width 0.2s ease-in-out;
}

.back-icon:before {
    transform: translate(-50%, -50%) rotate(45deg);

}

.back-icon:after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.check-icon {
    min-width: 0;
    width: 1.5em;
    height: 1.5em;
    position: relative;
    display: inline-flex;
    --check-icon-offset: calc(var(--check-icon-line-length)/-4), calc(var(--check-icon-line-length)/4)
}
.check-icon:before, .check-icon:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    height: var(--check-icon-line-width);
    border-radius: var(--check-icon-line-width);
    transform-origin: calc(var(--check-icon-line-width) / 2) center;
    background-color: currentColor;
    transition: width 0.2s ease-in-out;
}
.check-icon:before {
    width: var(--check-icon-line-length);
    transform: translate(var(--check-icon-offset)) rotate(-45deg);
    transform-origin: calc(var(--check-icon-line-width)/2) center;
}
.check-icon:after {
    width: calc(var(--check-icon-line-length) / 2);
    transform: translate(var(--check-icon-offset)) rotate(225deg);
    transform-origin: calc(var(--check-icon-line-width)/2) center;
}

.x-icon {
    width: 1.5em;
    height: 1.5em;
    position: relative;
    display: inline-flex;
}
.x-icon:before, .x-icon:after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    height: var(--x-icon-line-width);
    width: var(--x-icon-line-length);
    border-radius: var(--x-icon-line-length);
    transform-origin: center center;
    background-color: currentColor;
    transition: font-size 0.2 ease-in-out, width 0.2s ease-in-out;
}
.x-icon:before {
    transform: translate(-50%, -50%) rotate(45deg);

}
.x-icon:after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.bang-icon {
    width: 1.5em;
    height: 1.5em;
    position: relative;
    display: inline-flex;
}
.bang-icon:before {
    content: "BANG!";
    font-family: "Titillium Web", sans-serif;
    display: inline-block;
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 0.5em;
    font-weight: var(--font-weight-bold);
    font-style: normal;
    transform-origin: center center;
    transition: font-size 0.2 ease-in-out;
}
.bang-icon:before {
    transform: translate(-50%, -50%) rotate(15deg);

}

.svg-icon {
    width: 1.5em;
    height: 1.5em;
}

.svg-icon path {
    fill: currentColor;
}