@import "~bootstrap/scss/functions";
@import "~bootstrap/scss/variables";
@import "~bootstrap/scss/mixins";

$blockquote-font-size: $font-size-base;

@import "~bootstrap/scss/reboot";
@import "~bootstrap/scss/type";
@import "~bootstrap/scss/grid";
@import "~bootstrap/scss/images";
@import "~bootstrap/scss/alert";
@import "~bootstrap/scss/buttons";
@import "~bootstrap/scss/card";
@import "~bootstrap/scss/forms";
@import "~bootstrap/scss/custom-forms";
@import "~bootstrap/scss/input-group";
@import "~bootstrap/scss/jumbotron";
@import "~bootstrap/scss/nav";
@import "~bootstrap/scss/navbar";
@import "~bootstrap/scss/progress";
@import "~bootstrap/scss/tooltip";
@import "~bootstrap/scss/transitions";
@import "~bootstrap/scss/utilities/background";
@import "~bootstrap/scss/utilities/borders";
@import "~bootstrap/scss/utilities/display";
@import "~bootstrap/scss/utilities/position";
@import "~bootstrap/scss/utilities/spacing";
@import "~bootstrap/scss/utilities/text";

@import "~octicons/index";

body {
  padding-top: $spacer * 4.5;
  position: relative;
}

.footer {
  min-height: $spacer * 4;
  padding: ($spacer * 4 - $font-size-base) / 2 0;
}

#generated-password {
  background: $input-bg;
}

#password-bits {
  height: 1.5rem;

  .bg-warning {
    color: $body-color;
  }
}

@media (max-width: 360px) {
  .staple {
    display: none;
  }
}

.blockquote {
  border-left: ($spacer * 0.25) solid $gray-400;
  padding-left: $spacer;
  color: $blockquote-small-color;
}

#faq .card {
  margin-bottom: $spacer;
}

#generated-password {
  height: auto;

  &.placeholder {
    color: $input-placeholder-color;
    user-select: none;
  }
}
