@function overshoot-gradient ($direction) {
    @return linear-gradient(
        $direction,
        #{'alpha(@accent_color, 0)'} 80%,
        #{'alpha(@accent_color, 0.25)'} 100%
    );
}

@function overshoot-gradient-backdrop ($direction) {
    @return linear-gradient(
        $direction,
        rgba($fg-color, 0) 80%,
        rgba($fg-color, 0.15) 100%
    );
}

overshoot.left,
overshoot.right,
overshoot.top,
overshoot.bottom,
undershoot.left,
undershoot.right,
undershoot.top,
undershoot.bottom {
    background-image: none;
    background-color: transparent;
    border: none;
    box-shadow: none;
}

overshoot {
    &.top { background: overshoot-gradient(to top); }
    &.right { background: overshoot-gradient(to right); }
    &.bottom { background: overshoot-gradient(to bottom); }
    &.left { background: overshoot-gradient(to left); }

    :backdrop &.top { background: overshoot-gradient-backdrop(to top); }
    :backdrop &.right { background: overshoot-gradient-backdrop(to right); }
    :backdrop &.bottom { background: overshoot-gradient-backdrop(to bottom); }
    :backdrop &.left { background: overshoot-gradient-backdrop(to left); }
}
