@use 'sass:color';

$body-color: #262626;

$font-family-base: serif;

$border-radius: 0;
$border-radius-sm: 0;
$border-radius-lg: 0;

$enable-transitions: false;

$gray: #EFF2E4; /* this is... not gray? */
$blue: #7388FA;
$lightblue: #73B2FA;
$purple: #852cdf;
$lilac: #E273FA;
$magenta: #FF549B;
$teal: #80F8D4;

$body-bg: $gray;
$primary: $blue;
$info: $teal;
$warning: $magenta;

$body-tertiary-bg: color.adjust($gray, $lightness: -5%);

$border-color: $lightblue;
$border-width: 2px;

@import "../node_modules/bootstrap/scss/bootstrap";


.bezel {
  background-color: $blue;
  border-top: 6px solid color.adjust($blue, $lightness: 15%);
  border-left: 6px solid color.adjust($blue, $lightness: 13%);
  border-bottom: 6px solid color.adjust($blue, $lightness: -10%);
  border-right: 6px solid color.adjust($blue, $lightness: -13%);
}

.bezel-purple {
  background-color: $purple;
  border-top: 6px solid color.adjust($purple, $lightness: 15%);
  border-left: 6px solid color.adjust($purple, $lightness: 13%);
  border-bottom: 6px solid color.adjust($purple, $lightness: -10%);
  border-right: 6px solid color.adjust($purple, $lightness: -13%);
}

.bezel-gray {
  background-color: $gray;
  border-top: 6px solid color.adjust($gray, $lightness: 15%);
  border-left: 6px solid color.adjust($gray, $lightness: 13%);
  border-bottom: 6px solid color.adjust($gray, $lightness: -10%);
  border-right: 6px solid color.adjust($gray, $lightness: -13%);
}

.bezel-inset {
  background-color: $gray;
  border-bottom: 6px solid color.adjust($gray, $lightness: 15%);
  border-right: 6px solid color.adjust($gray, $lightness: 13%);
  border-top: 6px solid color.adjust($gray, $lightness: -10%);
  border-left: 6px solid color.adjust($gray, $lightness: -13%);
}

.bezel-inset-purple {
  background-color: $purple;
  border-bottom: 6px solid color.adjust($purple, $lightness: 15%);
  border-right: 6px solid color.adjust($purple, $lightness: 13%);
  border-top: 6px solid color.adjust($purple, $lightness: -10%);
  border-left: 6px solid color.adjust($purple, $lightness: -13%);
}

.no-right {
  border-right: none !important;
}

.no-left {
  border-left: none !important;
}

a {
  color: $blue;
}
.btn {
  font-family: sans-serif;
  box-shadow: rgba(0, 0, 0, .6) 4px 6px;
}

.btn:hover:not(.shadow-none) {
  transform: translateX(2px) translateY(4px);
  box-shadow: rgba(0, 0, 0, 1) 2px 2px;
}

.btn:active:not(.shadow-none) {
  transform: translateX(3px) translateY(5px);
  box-shadow: rgba(0, 0, 0, 1) 1px 1px;
}

h1.blue {
  color: $blue;
}

nav a, nav span {
  font-family: sans-serif;
}
.nav-item a {
  color: $blue;
  padding-bottom: 4px;
}

.navbar-nav .nav-link.active {
  color: $blue;
  border-bottom: 2px solid $blue;
}

.sample-bullet {
  display: inline-block;
  background-color: $magenta;
  height: 1rem;
  width: 1rem;
}

.language-percentages {
  font-size: 0;
}

.language-percent {
  display: inline-block;
  margin: 0;
  padding: 0;
  height: 2rem;
}

.language-name {
  display: inline-block;
  font-size: 1rem;
}

.branches, .branches:hover {
  border: 1px solid $body-color;
}

.dropdown-branches {
  list-style: none;
  padding: 0;
}

.popover {
  max-width: 100%;
}

.branch-selector .dropdown-menu {
  min-width: 220px;
}

.badge {
  font-family: sans-serif;
}

.sortRadioButtons {
  white-space: nowrap;
}
.sortRadioButton {
  display: inline-block;
}