import { css } from 'styled-components'

type DashedBorder = {
    dashLength?: number
    dashGap?: number
    width?: number
}

/* Approach adapted from https://codepen.io/amit_sheen/pen/xxZeyjO and 
https://css-tricks.com/more-control-over-css-borders-with-background-image/ */
export function dashedBorder(
    color: string,
    { dashLength = 6, dashGap = 4, width = 1 }: DashedBorder = {}
) {
    const dashPx = `${dashLength}px`
    const endPx = `${dashLength + dashGap}px`
    const widthPx = `${width}px`
    return css`
        background-image: repeating-linear-gradient(
                0deg,
                ${color},
                ${color} ${dashPx},
                transparent ${dashPx},
                transparent ${endPx},
                ${color} ${endPx}
            ),
            repeating-linear-gradient(
                90deg,
                ${color},
                ${color} ${dashPx},
                transparent ${dashPx},
                transparent ${endPx},
                ${color} ${endPx}
            ),
            repeating-linear-gradient(
                180deg,
                ${color},
                ${color} ${dashPx},
                transparent ${dashPx},
                transparent ${endPx},
                ${color} ${endPx}
            ),
            repeating-linear-gradient(
                270deg,
                ${color},
                ${color} ${dashPx},
                transparent ${dashPx},
                transparent ${endPx},
                ${color} ${endPx}
            );
        background-size:
            ${widthPx} 100%,
            100% ${widthPx},
            ${widthPx} 100%,
            100% ${widthPx};
        background-position:
            0 0,
            0 0,
            100% 0,
            0 100%;
        background-repeat: no-repeat;
    `
}