@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: #556DF0;
$lightblue: #7388FA;
$purple: #852cdf;
$lilac: #E273FA;
$magenta: #FF549B;
$teal: #80F8D4;

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

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

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

.list-group {
  --bs-list-group-border-width: 1px;
  --bs-list-group-border-color: #BAC1CA;
}

$bezel-colors: ("primary": $primary, "secondary": $secondary, "info": $info, "warning": $warning);

@each $color, $value in $bezel-colors {
  .bezel-#{$color} {
    background-color: $value;
    border-top: 6px solid color.adjust($value, $lightness: 15%);
    border-left: 6px solid color.adjust($value, $lightness: 13%);
    border-bottom: 6px solid color.adjust($value, $lightness: -30%);
    border-right: 6px solid color.adjust($value, $lightness: -40%);
  }
}
@each $color, $value in map-remove($bezel-colors, "info") {
  .bezel-#{$color} {
    color: $body-color-dark;
  }
}

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

@include color-mode(dark) {
  $blue: #354BC6;

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

  .nav-item a {
    color: $lightblue;
  }

  .btn-bg {
    background-color: color.adjust($body-bg-dark, $lightness: 10%);
  }

  .list-group {
    --bs-list-group-border-color: #404448;
  }

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

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

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

$link-color: $blue;
$link-color-dark: $lightblue;

.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;
}

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;
}

.language-percent-row {
  max-height: 60%;
}
.language-percentages {
  font-size: 0;
}
.language-col {
  display: flex;
  flex-direction: column;
  justify-content: end;
  min-height: 4rem;
  flex-basis: 0;
}
.language-percent {
  display: inline-block;
  margin: 0;
  padding: 0;
  background-color: $lilac;
}
.language-col:nth-of-type(2n) .language-percent {
  background-color: $magenta;
}
.language-name {
  display: inline-block;
  font-size: 1rem;
}

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

.popover {
  max-width: 100%;
}

.branch-selector .dropdown-menu {
  min-width: 220px;
  max-height: 80vh;
  overflow-y: scroll;
}

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

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

@each $color, $value in $bezel-colors {
  .badge.bg-#{$color} {
    background: linear-gradient(color.adjust($value, $lightness: 10%), $value);
    box-shadow: -1px -3px 4px inset color.adjust($value, $lightness: -30%);
  }
}

.header-button-container {
  display: flex;
  flex-wrap: wrap;
  margin: 10px -10px;

  .btn {
    flex: 1;
    flex-basis: 200px;
    margin: 10px 10px;
  }
}

/* Commit page */
.hunk {
  box-sizing: border-box;
  margin-bottom: 25px;
}
.unified .diff {
  flex-wrap: wrap;
}
.diff-left, .diff-right {
  flex: 1;
  overflow: hidden;
}
.unified .diff-left, .unified .diff-right {
  flex-basis: 100%;
}
[data-type=before] mark {
  background-color: rgba(252, 78, 78, .15);
}
[data-type=after] mark, .token.inserted {
  background-color: rgba(170, 227, 203, .35);
}
[data-bs-theme=dark] [data-type=after] mark, [data-bs-theme=dark] .token.inserted {
  background-color: rgba(51, 247, 160, .1); /* different green for dark mode; looks better */
}

.btn-outline-primary {
  color: var(--bs-body-color);
}
.btn-outline-primary:hover {
  color: $white;
}

/* commits list page */
.commit-hash {
  word-break: break-all; /* for mobile widths, allow SHA to wrap */
}