// Base Settings, font, sizes
html {
  font-family: $baseFontFamily;
  font-size: $baseFontSize;
  box-sizing: border-box;
  color: $baseColor;
  line-height: $baseLineHeight;
  @include font-smoothing();
}

// fix problems with fullscreen (disable hardware acceleration):
*:-webkit-full-screen-ancestor {
  animation-name: none !important;
  will-change: initial;
}

body.loading {
  cursor: wait;
}

*, *:before, *:after {
  box-sizing: inherit;
}

// basic paragraph:
p {
  margin: $paragraphMargin;
}

h1, h2, h3, h4, h5, h6 {
  margin: $headingMargin;
}

h1 {
  font-size: $h1FontSize;
  color: $h1Color;
}

h2 {
  font-size: $h2FontSize;
}

h3 {
  font-size: $h3FontSize;
}

// basic link:
a {
  cursor: pointer;
  text-decoration: none;
  color: $primaryColor;
  transition: color $globalShortEaseTime ease;
  font-weight: $linkFontWeight;
  &.thin {
    font-weight: normal;
  }
  &:hover {
    color: $linkHoverColor;
  }

  &:active {
    color: darken($primaryColor, 20%);
  }
}

.badge {
  display: inline-block;
  font-size: $smallFontSize;
  background: $badgeBackground;
  color: #fff;
  line-height: $baseLineHeight;
  padding: $badgePadding;
  border-radius: 3px;
  font-weight: bold;
}

// Colors:

.color-gray {
  color: $grayColor;
}

.color-warning {
  color: $alertColor;
}

.color-primary {
  color: $primaryColor;
}

.color-base {
  color: $baseColor !important;
}

// Font-Sizes:
small,
.small-font {
  font-size: $smallFontSize;
  line-height: $smallFontSizeLineHeight;
}

.fade-out {
  @include create-color-section($grayColor);
}

.unimportant {
  @include create-color-section($lighterGrayColor);
}

.inherit-link {
  color: $baseColor;
  text-decoration: underline;
  font-weight: normal;
  &:hover {
    color: $grayColor;
  }

  &.plain {
    text-decoration: none;
  }
}

.inherit-color {
  a {
    @extend .inherit-link;
  }
}

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

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

ol, ul {
  padding-left: $baseLineHeight * 1rem;
  margin-top: 0;

  &.plain {
    padding: 0;
    list-style: none;
  }

  &.spacey {
    li:not(:last-of-type) {
      margin-bottom:.5rem;
    }
  }

  &.inline {
    li {
      display: inline;
      &:not(:last-of-type):after {
        content: ', '
      }
    }

    &.separate {
      li:not(:last-of-type):after {
        content: ' | '
      }
    }
    &.custom {
      li:not(:last-of-type):after {
        content: attr(data-separator)
      }
    }

    &.spacey {
      li {
        display:inline-block;
      }
      li:not(:last-of-type) {
        margin-right: 1.5rem;
        margin-bottom:0;
        &:after {
          content: '';
        }
      }

    }
  }

  // possible deprecate this in favor of spacey
  &.space {
    li {
      &:not(:first-of-type) {
        margin-top: 1rem;
      }
    }
  }
}

.highlight-span span {
  color: $primaryColor;
  font-weight: bold;
}

.unbreakable {
  white-space: nowrap;
}

.no-margin {
  margin: 0 !important;
}

.tight {
  margin-bottom: 0 !important;
}

.half-space {
  margin-bottom: .5rem !important;
}

.single-space {
  margin-bottom: 1rem !important;
}

.double-space {
  margin-bottom: 2rem !important;
}

.weight-normal {
  font-weight: normal !important;
}

kbd {
  background: $lightGrayColor;
  padding: 2px;
  display: inline-block;
  border-radius: $globalRadius;
}

::selection {
  background: $selectionBackground;
  color: $selectionColor;
}

.cursor-help {
  cursor: help !important;
}

.cursor-pointer {
  cursor: pointer !important;
}

@media #{$mediaDesktop} {
  h1 {
    font-size: $h1DesktopFontSize;
  }

  ol, ul {
    &.custom-desktop {
      li {
        display:inline-block;
      }
      &.spacey {
        li:not(:last-of-type) {
          margin-bottom:0rem;
        }
      }
      li:not(:last-of-type):after {
        content: attr(data-separator)
      }
    }
  }
}

@media #{$mediaSmall} {
  ol, ul {
    &.inline.spacey {
      li {
        display: block;
        &:after {
          content: '';
        }
        &:not(:last-of-type) {
          margin-bottom: .5rem;
          margin-right: 0;
        }
      }
    }
  }
}