@use "colors";

@use "sass:math";
$spacing: 20px;
$spacing-half: math.div($spacing, 2);
$spacing-double: math.div($spacing, 0.5);
$spacing-quarter: math.div($spacing, 4);
$spacing-third: math.div($spacing, 3);
$spacing-two-thirds: math.div($spacing * 2, 3);
$spacing-eighth: math.div($spacing, 8);
$spacing-sixth: math.div($spacing, 6);

$antsBg: colors.$navyLight;
$antsFg: colors.$pink;

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

$border: 1px solid var(--dark-border-color);
$border2: 1px dashed var(--dark-border-color);

$border-radius: 3px;

@mixin border-radius {
  border-radius: $border-radius;
}

@mixin border {
  border: $border;
}

@mixin border2 {
  border: $border2;
}

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

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

@mixin box-shadow {
  box-shadow: 0px 2px 5px rgba(colors.$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;
}

:root {
  --spacing: #{$spacing};
  --halfSpacing: #{$spacing-half};
  --doubleSpacing: #{$spacing-double};

  --borderColor: var(--dark-border-color);
  --borderRadius: #{$border-radius};
  --border: 1px solid var(--dark-border-color);

  --backgroundColor: var(--bg-color);
  --textColor: var(--text-color);
  --textAltColor: var(--text-color-dark);
}
