$spacing: 20px;

$antsBg: $navyLight;
$antsFg: $pink;

@mixin flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

$border: 1px dashed $border-color;
$border2: 1px solid $border-color;

@mixin border-radius{
    border-radius: 3px;
}

@mixin border {
    border: $border;
}

@mixin border2 {
    border: $border2;
}

@mixin text-shadow {
    text-shadow: 0px 2px 5px rgba($pink, 0.6);
}

@mixin text-shadow-faint {
    text-shadow: 0px 2px 3px rgba($pink, 0.5);
}

@mixin box-shadow {
    box-shadow: 0px 2px 5px rgba($pink, 0.6);
}

@mixin clearfix {
    &:after {
        content: '';
        display: table;
        clear: both;
    }
}

@function black($opacity) {
    @return rgba(0, 0, 0, $opacity);
}

@function white($opacity) {
    @return rgba(255, 255, 255, $opacity);
}

@mixin crosshatchBg() {
    position: relative;
    z-index: 5;
    &:before {
        z-index: 1;
        content: ' ';
        display: block;
        position: absolute;
        top: 6px;
        left: 6px;
        height: 100%;
        width: 100%;
        // background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAALUlEQVQYV2OsaGj439HQwMgABSA+nAMSAwmAaBQVIAGQLrAgTAXMGEZ0AZAiAJnTFPTxZT3RAAAAAElFTkSuQmCC);
        // background: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><pattern id="Pattern2" width="0.1" height="0.1"><path d="M 0,10 l 10,-10 M -2.5,2.5 l 5,-5 M 7.5,12.5 l 5,-5" stroke-width="2" shape-rendering="auto" stroke="#788080" stroke-linecap="square" /></pattern></defs><rect fill="url(#Pattern2)" x="0" y="0" width="100" height="100"/></svg>');
        background: url('data:image/svg+xml;utf8,<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg" version="1.1"><defs><pattern id="Pattern2" patternUnits="userSpaceOnUse" width="5" height="5"><path d="M 0,5 l 5,-5 M -1,1 l 2.5,-2.5 M 4,6 l 2.5,-2.5" stroke-width="1" shape-rendering="auto" stroke="#788080" stroke-linecap="square"></path></pattern></defs><rect fill="url(#Pattern2)" x="0" y="0" width="100" height="100"/></svg>');
    }
}

@mixin sr-only {
    border: 0;
    clip: rect(0 0 0 0);
    clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    white-space: nowrap;
}
.sr-only {
    @include sr-only;
}

@mixin segmented() {
    position: relative;
    margin-left: -2px;
    &:hover {
        z-index: 100;
    }
}

@mixin disableUnderline {
    &::before {
        content: none;
    }
}

// via https://codepen.io/danichk/pen/PPRxrR
@keyframes ants {
    to {
        background-position: 100% 100%;
    }
}

@mixin ants {
    border: 1px solid transparent;
    background: linear-gradient($antsBg, $antsBg) padding-box,
        repeating-linear-gradient(-45deg, $antsFg 0, $antsFg 25%, transparent 0, transparent 50%) 0 /
            0.6em 0.6em;
    animation: ants 12s linear infinite;
}

@keyframes svgAnts {
    to {
        stroke-dashoffset: 100%;
    }
}

@mixin svgAnts {
    stroke-dasharray: 8,4;
    animation: svgAnts 50s linear infinite;
    animation-fill-mode: forwards;
}


@keyframes rotateAnim {
    to {
        transform: rotate(-360deg);
    }
}

@mixin rotateAnim {
    transform: rotate(0deg);
    animation: rotateAnim 50s linear infinite;
    animation-fill-mode: forwards;
}