/* Line-height */
.lh-1 {
  line-height: 1;
}
.lh-12 {
  line-height: 1.2;
}

/* gray backgrounds */
.bg-gray-1 {
  background-color: $gray-100;
}
.bg-gray-2 {
  background-color: $gray-200;
}
.bg-gray-3 {
  background-color: $gray-300;
}
.bg-gray-4 {
  background-color: $gray-400;
}
.bg-gray-5 {
  background-color: $gray-500;
}
.bg-gray-6 {
  background-color: $gray-600;
}
.bg-gray-7 {
  background-color: $gray-700;
}
.bg-gray-8 {
  background-color: $gray-800;
}
.bg-gray-9 {
  background-color: $gray-900;
}
.bg-black {
  background-color: $black;
}

/* nudge classes */
@for $nudge from 1 through 20 {
  .ny-n#{$nudge} {
    margin-top: -#{$nudge}px;
    margin-bottom: #{$nudge}px;
  }

  .ny-#{$nudge} {
    margin-top: #{$nudge}px;
    margin-bottom: -#{$nudge}px;
  }

  .nx-n#{$nudge} {
    margin-left: -#{$nudge}px;
    margin-right: #{$nudge}px;
  }

  .nx-#{$nudge} {
    margin-left: #{nudge}px;
    margin-right: -#{$nudge}px;
  }
}

/* opacity */
.opacity-0 {
  opacity: 0;
}
.opacity-1 {
  opacity: 0.1;
}
.opacity-2 {
  opacity: 0.2;
}
.opacity-3 {
  opacity: 0.3;
}
.opacity-4 {
  opacity: 0.4;
}
.opacity-5 {
  opacity: 0.5;
}
.opacity-6 {
  opacity: 0.6;
}
.opacity-7 {
  opacity: 0.7;
}
.opacity-8 {
  opacity: 0.8;
}
.opacity-9 {
  opacity: 0.9;
}

/* max and min 50% */
.max-w-50 {
  max-width: 50%;
}
.max-h-50 {
  max-height: 50%;
}
.min-w-50 {
  min-width: 50%;
}
.min-h-50 {
  min-height: 50%;
}

/* misc helpers */
.d-contents {
  display: contents;
}
.balance-text {
  text-wrap: balance;
}
.CodeMirror {
  height: 100% !important;
}
svg {
  pointer-events: none;
}
.arrow-list {
  list-style-type: "→";
}


// force-disable this - it causes annoying jumps when navigating, and a bug w/ anchor links in Firefox
$enable-smooth-scroll: false;
:root {
  scroll-behavior: auto !important;
}

/* fill colors */
$fill-colors: ();
$fill-colors: map-merge(
  map-merge($theme-colors, map-remove($colors, "gray", "gray-dark")),
  (
    "gray-100": $gray-100,
    "gray-200": $gray-200,
    "gray-300": $gray-300,
    "gray-400": $gray-400,
    "gray-500": $gray-500,
    "gray-600": $gray-600,
    "gray-700": $gray-700,
    "gray-800": $gray-800,
    "gray-900": $gray-900,
    "white": $white,
    "black": $black,
    "aquamarine": $aquamarine,
  )
);

@each $color, $value in $fill-colors {
  .fill-#{$color} {
    fill: $value;
  }
}
.fill-inherit {
  fill: currentColor;
}

/*
  width and height pixel responsiveness
  written as hpx-<breakpoint size>-<# of px>
  or wpx-<breakpoint size>-<# of px>
  (e.x wpx-sm-200)
*/

$px-sizes: ();
$i: 0;
@while $i <= 500 {
  $px-sizes: map-merge((#{$i}: #{$i}px), $px-sizes);
  @if $i >= 50 {
    $i: $i + 10;
  } @else {
    $i: $i + 1;
  }
}

@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-up($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);

    @each $prop, $abbrev in (width: wpx, height: hpx) {
      @each $size, $length in $px-sizes {
        .#{$abbrev}#{$infix}-#{$size} {
          #{$prop}: $length !important;
        }
      }
    }
  }
}

/* Add more width and height helpers to bolster Bootstrap's existing relative sizing classes */
/* https://getbootstrap.com/docs/4.5/utilities/sizing/#relative-to-the-parent */
.w-10 {
  width: 10% !important;
}
.w-20 {
  width: 20% !important;
}
.w-30 {
  width: 30% !important;
}
.w-40 {
  width: 40% !important;
}
/* w-50 already exists in Bootstrap */
.w-60 {
  width: 60% !important;
}
.w-70 {
  width: 70% !important;
}
.w-80 {
  width: 80% !important;
}
.w-90 {
  width: 90% !important;
}

.h-10 {
  height: 10% !important;
}
.h-20 {
  height: 20% !important;
}
.h-30 {
  height: 30% !important;
}
.h-40 {
  height: 40% !important;
}
/* h-50 already exists in Bootstrap */
.h-60 {
  height: 60% !important;
}
.h-70 {
  height: 70% !important;
}
.h-80 {
  height: 80% !important;
}
.h-90 {
  height: 90% !important;
}

/*
  Setup for text alignment so that on smaller screens it centers but on larger it does
  not. Specifically done for the subcribe section. May be useful later
*/
@each $breakpoint in map-keys($grid-breakpoints) {
  @include media-breakpoint-down($breakpoint) {
    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
    .text-center#{$infix} {
      text-align: center !important;
    }
  }
}

/* bg colors */
/* Standard colors: $blue, $indigo, $purple, $pink, $red, $orange, $yellow, $green, $teal, $cyan */
$standard-colors: ();
$standard-colors: map-remove($colors, "white", "gray", "gray-dark");
@each $color, $value in $standard-colors {
  .bg-#{$color} {
    background-color: $value !important;
  }
}
.bg-primary {
  background-color: $primary !important;
}
.bg-secondary {
  background-color: $secondary !important;
}
.bg-danger {
  background-color: $danger !important;
}
.bg-warning {
  background-color: $warning !important;
}
.bg-info {
  background-color: $info !important;
}
.bg-black {
  background-color: $black !important;
}
.bg-white {
  background-color: $white !important;
}
.bg-light {
  background-color: $light !important;
}
.bg-dark {
  background-color: $dark !important;
}
.bg-gray-100 {
  background-color: $gray-100 !important;
}
.bg-gray-200 {
  background-color: $gray-200 !important;
}
.bg-gray-300 {
  background-color: $gray-300 !important;
}
.bg-gray-400 {
  background-color: $gray-400 !important;
}
.bg-gray-500 {
  background-color: $gray-500 !important;
}
.bg-gray-600 {
  background-color: $gray-600 !important;
}
.bg-gray-700 {
  background-color: $gray-700 !important;
}
.bg-gray-800 {
  background-color: $gray-800 !important;
}
.bg-gray-900 {
  background-color: $gray-900 !important;
}

/* 10% opacity colors */
@each $color, $value in $standard-colors {
  .bg-#{$color}-10 {
    background-color: rgba($value, 0.1) !important;
  }
}
.bg-primary-10 {
  background-color: rgba($primary, 0.1) !important;
}
.bg-secondary-10 {
  background-color: rgba($secondary, 0.1) !important;
}
.bg-danger-10 {
  background-color: rgba($danger, 0.1) !important;
}
.bg-warning-10 {
  background-color: rgba($warning, 0.1) !important;
}
.bg-info-10 {
  background-color: rgba($info, 0.1) !important;
}
.bg-black-10 {
  background-color: rgba($black, 0.1) !important;
}
.bg-white-10 {
  background-color: rgba($white, 0.1) !important;
}
.bg-light-10 {
  background-color: rgba($light, 0.1) !important;
}
.bg-dark-10 {
  background-color: rgba($dark, 0.1) !important;
}
.bg-gray-100-10 {
  background-color: rgba($gray-100, 0.1) !important;
}
.bg-gray-200-10 {
  background-color: rgba($gray-200, 0.1) !important;
}
.bg-gray-300-10 {
  background-color: rgba($gray-300, 0.1) !important;
}
.bg-gray-400-10 {
  background-color: rgba($gray-400, 0.1) !important;
}
.bg-gray-500-10 {
  background-color: rgba($gray-500, 0.1) !important;
}
.bg-gray-600-10 {
  background-color: rgba($gray-600, 0.1) !important;
}
.bg-gray-700-10 {
  background-color: rgba($gray-700, 0.1) !important;
}
.bg-gray-800-10 {
  background-color: rgba($gray-800, 0.1) !important;
}
.bg-gray-900-10 {
  background-color: rgba($gray-900, 0.1) !important;
}

/* text colors */
@each $color, $value in $standard-colors {
  .text-#{$color} {
    color: $value !important;
  }
}
.text-primary {
  color: $primary !important;
}
.text-secondary {
  color: $secondary !important;
}
.text-danger {
  color: $danger !important;
}
.text-warning {
  color: $warning !important;
}
.text-info {
  color: $info !important;
}
.text-black {
  color: $black !important;
}
.text-white {
  color: $white !important;
}
.text-light {
  color: $light !important;
}
.text-dark {
  color: $dark !important;
}
.text-gray-100 {
  color: $gray-100 !important;
}
.text-gray-200 {
  color: $gray-200 !important;
}
.text-gray-300 {
  color: $gray-300 !important;
}
.text-gray-400 {
  color: $gray-400 !important;
}
.text-gray-500 {
  color: $gray-500 !important;
}
.text-gray-600 {
  color: $gray-600 !important;
}
.text-gray-700 {
  color: $gray-700 !important;
}
.text-gray-800 {
  color: $gray-800 !important;
}
.text-gray-900 {
  color: $gray-900 !important;
}

/* FLOATING LABELS */
/* Floating form labels using "form-label-group" class instead of "form-group" */
/* Based on https://getbootstrap.com/docs/4.5/examples/floating-labels/ */

.form-label-group {
  position: relative;
  margin-bottom: 1rem;
}

.form-label-group > input,
.form-label-group > label,
.form-label-group > select {
  height: 3.125rem;
  padding: 0.75rem;
}

.form-label-group > label {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  margin-bottom: 0; /* Override default `<label>` margin */
  line-height: 1.5;
  color: gray;
  pointer-events: none;
  cursor: text; /* Match the input under the label */
  border: 1px solid transparent;
  border-radius: 0.25rem;
  transition: all 0.1s ease-in-out;
}

.form-label-group input::-webkit-input-placeholder,
.form-label-group input:-ms-input-placeholder,
.form-label-group input::-ms-input-placeholder,
.form-label-group input::-moz-placeholder,
.form-label-group input::placeholder {
  color: transparent;
}

.form-label-group select:required:invalid {
  color: gray;
}

.form-label-group input:not(:placeholder-shown) {
  padding-top: 1.25rem;
  padding-bottom: 0.25rem;
}

.form-label-group input:not(:placeholder-shown) ~ label {
  padding-top: 0.25rem;
  padding-bottom: 0.25rem;
  font-size: 12px;
  color: gray;
}

/* Fallback for Edge
-------------------------------------------------- */
@supports (-ms-ime-align: auto) {
  .form-label-group > label {
    display: none;
  }
  .form-label-group input::-ms-input-placeholder {
    color: gray;
  }
  .form-label-group input:not(:placeholder-shown) {
    padding-top: inherit;
    padding-bottom: inherit;
  }
}

/* Fallback for IE
-------------------------------------------------- */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
  .form-label-group > label {
    display: none;
  }
  .form-label-group input:-ms-input-placeholder {
    color: gray;
  }
  .form-label-group input:not(:placeholder-shown) {
    padding-top: inherit;
    padding-bottom: inherit;
  }
}

/* utility badge colors for partners page */
.badge-silver {
  background-color: #d9d9d9;
  background-image: linear-gradient(315deg, #d9d9d9 0%, #f6f2f2 74%);
}
.badge-gold {
  background-color: #fbb034;
  background-image: linear-gradient(315deg, #fbb034 0%, #ffdd00 74%);
}
.badge-platinum {
  background-color: #e3efe8;
  background-image: linear-gradient(315deg, #96a7cf 0%, #e3efe8 74%);
}

/* text shadow utilities */
.text-shadow-dark-25 {
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.25);
}
.text-shadow-dark-50 {
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.5);
}
.text-shadow-dark-75 {
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 0.75);
}
.text-shadow-dark-100 {
  text-shadow: 0px 1px 1px rgba(0, 0, 0, 1);
}
.text-shadow-light-25 {
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.25);
}
.text-shadow-light-50 {
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.5);
}
.text-shadow-light-75 {
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 0.75);
}
.text-shadow-light-100 {
  text-shadow: 0px 1px 1px rgba(255, 255, 255, 1);
}

/* gradient utilities (for hero units) */
.dark-blue-gradient {
  background: #102d40;
  background: radial-gradient(circle at top center, #163e59 0%, #000000 70%);
}

.green-gradient {
  background: #88b84a;
  background: radial-gradient(circle at top center, #9bd154 0%, #759e40 70%);
}

.blue-gradient {
  background: #88b84a;
  background: radial-gradient(circle at top center, #7aabcc 0%, #417496 70%);
}

.purple-gradient {
  background: #8171b5;
  background: radial-gradient(circle at top center, #9381cf 0%, #6f619c 70%);
}

.cyan-gradient {
  background: #21abc1;
  background: radial-gradient(circle at top center, #25c2db 0%, #1d95a8 70%);
}

.orange-gradient {
  background: #ff3e00;
  background: radial-gradient(circle at top center, #ffa319 0%, #e64e00 70%);
}

/* hover states */
.hover:hover {
  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  transition: all 0.25s ease-out;
  transform: translate(0px, -2px);
}

.hover-gray:hover {
  background-color: #f0f4f7;
}

.hover-white-1:hover {
  background-color: rgba(255, 255, 255, 0.1);
}
.hover-white-2:hover {
  background-color: rgba(255, 255, 255, 0.2);
}
.hover-white-3:hover {
  background-color: rgba(255, 255, 255, 0.3);
}
.hover-white-4:hover {
  background-color: rgba(255, 255, 255, 0.4);
}
.hover-white-5:hover {
  background-color: rgba(255, 255, 255, 0.5);
}
.hover-white-6:hover {
  background-color: rgba(255, 255, 255, 0.6);
}
.hover-white-7:hover {
  background-color: rgba(255, 255, 255, 0.7);
}
.hover-white-8:hover {
  background-color: rgba(255, 255, 255, 0.8);
}
.hover-white-9:hover {
  background-color: rgba(255, 255, 255, 0.9);
}
.hover-white-10:hover {
  background-color: rgba(255, 255, 255, 1);
}

/* .btn-outline-color, .btn-color */
@each $color, $value in $standard-colors {
  .btn-#{$color} {
    @include button-variant($value, $value);
    color: #fff;
  }
  .btn-outline-#{$color} {
    @include button-outline-variant($value);
  }
}

.mt-4-5 {
  margin-top: 2rem;
}

// Pixel offset values for use with relative positioning
.top-minus-1 {
  top: -1px;
}
.top-minus-2 {
  top: -2px;
}
.top-minus-3 {
  top: -3px;
}
.top-minus-4 {
  top: -4px;
}
.top-minus-5 {
  top: -5px;
}

// Thickness value for borders
.border-2 {
  border-width: 2px !important;
}
.border-3 {
  border-width: 3px !important;
}
.border-4 {
  border-width: 4px !important;
}
.border-5 {
  border-width: 5px !important;
}

// border radius
.br-tl-0 {
  border-top-left-radius: 0 !important;
}
.br-tr-0 {
  border-top-right-radius: 0 !important;
}
.br-bl-0 {
  border-bottom-left-radius: 0 !important;
}
.br-br-0 {
  border-bottom-right-radius: 0 !important;
}

// whitespace
.ws-prewrap {
  white-space: pre-wrap !important;
}
