@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;
$blue: #7388FA;
$lightblue: #73B2FA;
$purple: #B673FA;
$magenta: #E273FA;
$teal: #80F8D4;
$new-magenta: #FF549B;

$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: $teal;
}
.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: $lightblue;
}

// .navbar-nav .nav-link.active {
//   background-color: $lightblue;
//   color: white;
// }

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

.nav-link::before {
  content: '[ '
}

.nav-link::after {
  content: ' ]'
}

// NEW COMMITS PAGE

.commits-page {
  a {
    color: $blue
  }

  .commit {
    border: 1px solid #999;
    padding: 10px 0;
    margin-bottom: 10px;
  }

  .lang-diff {
    height: 1.1rem;
    font-size: 0.75rem;
  }

  .language-names {
    font-family: monospace;
    text-align: right;
    font-size: 0.85rem;

    div {
      height: 1.1rem;
    }
  }

  .plus-1 {
    background-color: $teal;
    width: 80%;
  }
  .minus-1 {
    background-color: color.adjust($teal, $lightness: -25%);
    width: 20%;
  }

  .plus-2 {
    background-color: $new-magenta;
    width: 50%;
  }
  .minus-2 {
    background-color: color.adjust($new-magenta, $lightness: -25%);
    width: 30%;
  }

  .plus-3 {
    background-color: $purple;
    width: 10%;
  }
  .minus-3 {
    background-color: color.adjust($purple, $lightness: -25%);
    width: 5%;
    text-shadow: 0 0 3px color.adjust($purple, $lightness: -25%), 0 0 2px color.adjust($purple, $lightness: -25%);
  }

  .plus-4 {
    background-color: $lightblue;
    width: 50%;
  }
  .minus-4 {
    background-color: color.adjust($lightblue, $lightness: -25%);
    width: 35%;
  }

  .commit-date {
    width: auto;
  }

  @include media-breakpoint-up(lg) {
    .commit-date {
      width: min-content;
    }
  }
}