$mono-font-stack: Monaco, monospace;

$base-color-light: rgb(234, 235, 238);
$inverse-color-light: invert($base-color-light);
$base-color-dark: rgb(53, 55, 51);
$inverse-color-dark: invert($base-color-dark);

$action-button-bg-color: rgb(24, 136, 255);
$action-button-focus-bg-color: rgb(0, 104, 217);
$action-button-text-color: #efefef;

@mixin unstyle-list {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

@mixin stretch-vertically {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow-y: hidden;
}

@mixin striped-background($direction, $color) {
  background-image: repeating-linear-gradient($direction, transparent 0 20px, $color 20px 40px);
}

@mixin nav-grid($columns) {
  display: grid;
  grid-template-columns: repeat($columns, 1fr);
  column-gap: 1em;
  place-items: center;

  :first-child {
    justify-self: left;
  }

  :last-child {
    justify-self: right;
  }
}

// From https://github.com/Schum123/svelte-loading-spinners
@mixin spinner($size, $color) {
  min-height: $size;
  min-width: $size;
  border-color: $color transparent $color $color;
  border-width: calc(#{$size} / 12);
  border-style: solid;
  border-image: initial;
  border-radius: 50%;
  animation: 0.75s linear 0s infinite normal none running rotate;
}

@keyframes rotate {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

@function generate-dropdown-arrow($hex-fill) {
  $fill: "%23" + str-slice(#{$hex-fill}, 2);
  @return url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="448" height="512" viewBox="0 0 448 512"><path d="M207.029 381.476L12.686 187.132c-9.373-9.373-9.373-24.569 0-33.941l22.667-22.667c9.357-9.357 24.522-9.375 33.901-.04L224 284.505l154.745-154.021c9.379-9.335 24.544-9.317 33.901.04l22.667 22.667c9.373 9.373 9.373 24.569 0 33.941L240.971 381.476c-9.373 9.372-24.569 9.372-33.942 0z" fill="#{$fill}" /></svg>');
}
