@import "variables";
@import "bootstrap/scss/bootstrap";
@import "bootstrap-mixins";

.bg-erlang-grey {
  background-color: $erlang-grey;
}

/* A dl where dt and dd are on the same line */
.dl-single > dt {
  float: left;
  @include pr(2);
}

blockquote.blockquote {
    border-left: 5px solid $erlang-grey;
    padding-left: 15px;
}

/*
  Doing collapse of a non-navbar item turned out to be hard/impossible
  so I had to be a bit creative with CSS here.

  This is copied from .navbar-expand of bootstrap and
  then fixed to only effect the classes .navbar-collapse
  and .navbar-toggler.
  
  You use this class the same way as you would use a navbar
  only that the toplevel class is called collapse-expand-XX.

  So for example say you want to create a card that collapses
  the body at the lg breakpoint you would do it like this

  <div class="card collapse-expand-lg">
    <div class="card-header">
      <button class="navbar-toggler navbar-light" type="button"
              data-bs-toggle="collapse" data-bs-target="#target"
              aria-controls="target" aria-expanded="false"
              aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
      </button>
    </div>
    <div id="target" class="collapse navbar-collapse">
      <div class="card-body">
        Lorem ipsum
      </div>
    </div>
  </div>

  Maybe someday I will figure out how to get this to work with
  the navbar classes as they are. But that day is not today.
  */
.collapse-expand {
  @each $breakpoint in map-keys($grid-breakpoints) {
    $next: breakpoint-next($breakpoint, $grid-breakpoints);
    $infix: breakpoint-infix($next, $grid-breakpoints);

    &#{$infix} {
      @include media-breakpoint-up($next) {
        display: block;

        .navbar-collapse {
          display: flex !important;
          flex-basis: auto;
        }

        .navbar-toggler {
          display: none;
        }
      }
    }
  }
}

.footer {
  @include py(3);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50px, 1fr));
  align-items: center;
  justify-items: center;
}
