// sass-lint:disable nesting-depth
// sass-lint:disable force-pseudo-nesting
// sass-lint:disable force-element-nesting
// sass-lint:disable no-vendor-prefixes
// sass-lint:disable property-sort-order
// sass-lint:disable force-attribute-nesting
// sass-lint:disable no-qualifying-elements
// sass-lint:disable force-pseudo-nesting
// sass-lint:disable no-url-domains, no-url-protocols
// sass-lint:disable no-misspelled-properties, no-ids

@import 'snackbar';
@import 'modal';
@import 'load-fonts';
@import 'variables';
@import 'share-buttons';
@import 'main-containers';
@import 'tooltips';
@import 'table-class';
@import 'form';
@import 'utilities';
@import 'sidenav';
@import 'header';
@import 'theme';
@import '../../resources/typography/fonts/fontawesome-free-5.12.1-web/css/all.css';

$fa-font-path: '../../resources/typography/fonts/fontawesome-free-5.12.1-web/webfonts';
@import '../../resources/typography/fonts/fontawesome-free-5.12.1-web/scss/fontawesome';
@import '../../resources/typography/fonts/fontawesome-free-5.12.1-web/scss/solid';
@import '../../resources/typography/fonts/fontawesome-free-5.12.1-web/scss/brands';


.disable-scrollbars {
  scrollbar-width: none; // Firefox
  -ms-overflow-style: none; // IE 10+

  &::-webkit-scrollbar {
    width: 0;
    background: transparent; // Chrome/Safari/Webkit
  }
}

@media not screen and (max-width: $media-phone-portrait) {
  pre {
    line-break: normal;
  }
}

html {
  font-size: 62.5%;
  margin: $navbar-top-margin * .5 auto auto; // For navbar we need some top-margin
  scroll-behavior: smooth;
  scroll-padding-top: $navbar-top-margin;
  text-justify: inter-word;

  ::selection {
    background: $color-text-selection-background;
    color: $color-text-selection-text;
  }
}

nav {
  display: block;
}

.align-right {
 float:right;
}

body {
  background: $bg;
  color: $fg;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.6;
  transition: margin-left .5s;
  //padding: 16px;
}

main {
  overflow-x: auto;
}

a {
  color: $fg;
  outline: 0;

  &:hover {
    text-decoration: none;
  }
}

th {
  color: $color-text-selection-text;
  border-bottom: 1px dashed $color-border;
}

td {
  padding: 2px 6px;
  text-align: left;
}

th:last-child {
  padding-right: 0;
}

footer {
  background: $bg;
  display: block;
  font-family: 'IBM Plex Serif', serif;
  margin: auto;
  padding: .625rem 1rem;
  text-align: center;

  a {
    text-decoration-style: dotted;

    &:hover {
      color: $explanation;
    }
  }
}

p {
  background: lighten($bg, 10%);
  font-family: 'PT Mono', sans, serif;
  font-size: .525rem;
  line-height: 1.4;

  &.explanation {
    border-left: 6px solid $explanation;
  }

  &.warning {
    border-left: 6px solid $warning;
  }

  &.info {
    border-left: 6px solid $info;
  }

  &.danger {
    border-left: 6px solid $danger;
  }

  &.success {
    border-left: 6px solid $success;
  }
}

p.info-box {
  padding: 1ex;
}

.block {
  background: lighten($bg, 1%);
  padding: 12px;
}

.icon {
  background: lighten($bg, 10%);
  color: $fg;
  border-radius: 4px;
  font-size: 2rem;
  height: $input-height;
  line-height: unset;
  min-width: 3rem;
  padding: 0 .75rem;
  text-align: center;
  vertical-align: middle;

}

// Gradients
#gradient-h1 {
  -webkit-text-fill-color: transparent;
  background: linear-gradient($gradient-h1-color-one, $gradient-h1-color-two);
  font-size: 6rem;
  text-shadow: 6px $black;
  -webkit-background-clip: text; // Must not be moved despite linter warnings - breaks if moved.
}

.input-container {
  display: flex;
  width: 100%;
  margin-bottom: 0;
}


table {
  width: 100%;
  margin-bottom: 1.5rem;
  text-align: center;

  th {
    text-align: left;
  }

}

.email-input > label {
  display: block;
  font-weight: 600;
  margin-bottom: .5rem;
}


@mixin heading($border-radius, $font-size, $letter-spacing, $line-height, $margin-top, $padding) {
  border-radius: $border-radius;
  font-size: $font-size;
  letter-spacing: $letter-spacing;
  line-height: $line-height;
  margin-top: $margin-top;
  padding: $padding;
}

.soft-shadow-box {
  box-shadow: 1px 1px 30px 1px darken($bg, 6.5%);
}

.shadow-box {
  box-shadow: 1px 1px 14px 2px darken($bg, 3.5%);
}

.info.shadow-box {
  box-shadow: 1px 1px 4px 1px darken($bg, 7%);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  background: darken($headings-bg, 10%);
  color: $white;
  text-transform: capitalize;
  padding: .725rem 0;
  box-sizing: border-box;
  font-family: 'Cabin', sans-serif;
  letter-spacing: .9rem;
  font-weight: 300;
  margin: 0 auto .25rem 0;
  text-align: center;
  width: 100%;

}

h1 {
  @include heading(.5rem, 4rem, -.1rem, 1.2, 1.6rem, 0 1rem);
  font-family: 'IBM Plex Serif', serif;
}

h2 {
  @include heading(.5rem, 3.6rem, -.1rem, 1.25, 1.825rem, 0 1rem);
}

h3 {
  @include heading(.5rem, 3rem, -.1rem, 1.3, 2rem, 0 1rem);
}

h4 {
  @include heading(.5rem, 2.4rem, -.1rem, 1.35, .5rem, 0 1rem);
}

h5 {
  @include heading(.5rem, 1.8rem, -.05rem, 1.5, .25rem, 0 1rem);
}

h6 {
  @include heading(.5rem, 1.5rem, 0, 1.6, .1rem, 0 1rem);
}

p,
ul,
li,
ol {
  font-size: 100%;
}

ol,
ul {
  padding-left: 0;
  width: 50%;
}

dfn {
  text-decoration: underline dotted $info;
  font-style: normal;
  cursor: help;
}

code {
  font-family: 'Source Code Pro', monospace;
  font-size: 105%;
  margin: 0 .01rem;
  padding: .2rem 0;

  &.code-no-wrap {
    white-space: nowrap;
  }
}

.text-align-center {
  text-align: center;
}

pre {
  max-width: 100vw;
  //  overflow-x: scroll;
}

@media (min-width: 880px) {
  pre {
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
  }
}
