@import "settings";
@import "bootstrap/bootstrap";
@import "fonts";
@import "general";
@import "layout";


/* ========================== Specific Rules ==================================== */


.focus-text {
  background-color: $veilid_plum_dark;
  padding: 1.65rem;
  @extend .my-4;
  color: white;
  @extend .fs-5;
}

.col-12 .focus-text {
  margin-top: 0rem !important;
  margin-bottom: 1rem !important;
}

.section-list {
  margin: 1rem 0rem;
  @extend .p-4;
  border: 1px solid $border-color;
  h3 {
    @extend .fs-2;
    @extend .mt-0;
    border-bottom: 1px solid $border-color;
    @extend .pb-1;
    @extend .mb-3;
  }
  h4 {
    @extend .fs-3;
  }
  h5 {
    @extend .fs-4;
  }
  p:last-child {
    padding: 0;
    margin: 0;
  }

}


.code-snippet {
  display: flex;
  margin: 0.5rem 0;
  input {
    flex: 1;
    font-family: monospace;
    display: block;
    margin-right: 0.5rem;
  }
}


.take-back-control {
  @include border-radius;
  @extend .mb-4;

  h2 {
    margin: 0rem;
    padding: 1.62rem;

    background: $veilid_purple_darkest;

    color: white;
    text-align: center;
    font-size: $h2-font-size;
  }

}


.padded-box {
  @extend .my-4;
  padding: 1rem;
  background-color: #8e009733;
  border: 2px solid #8e009780;
  .padded-box-title {
    margin-top: 0rem;
    color: $dark;
  }
}

.keywords {
  .keyword {
    padding: 1rem;
    box-sizing: border-box;
    background-color: $primary-bg-subtle;
  }
}

.card-set {
  .card {
    height: 100%;
  }
  .card-header {
    h1, h2, h3, h4, h5, h6 {
      @extend .m-0;
      color: inherit;
    }
  }
}

.filler-friend {
  display: none;
}

@include media-breakpoint-up(lg) {
  .filler-friend {
    display: block;
    position: relative;
  }
}

.veilidTOC {
  margin-bottom: 2rem;
}


#backToTop {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: none;
  background-color: $veilid_fuchsia;
  color: white;
  text-align: center;
  padding: 1rem;
  text-decoration: none;
}

.block-nav {
  a:link, a:visited, a:active, a:hover {
    display: block;
    padding: 0.5rem 0.75rem;
    margin: 0.25rem;
    background-color: $veilid_fuchsia;
    color: $white;
    @extend .fs-5;
    text-align: center;
  }
  a.active {
    background-color: shade-color($veilid_fuchsia,20%);
    text-decoration: none;
  }
}

.event-table {
  th, td {
    padding: 0.5rem;
    vertical-align: top;
  }
}


.small-warning {
  @extend .my-3;
  @extend .text-center;
  @extend .small;
}


.defcon {
  padding: 2rem;
  background: black;
  @extend .rounded;
  text-align: center;
}