// Copyright (C) 2019-2021 Estonian Information System Authority.
// See the file 'LICENSE' for copying permission.
body
  color: $black
  +dark-mode
    color: $text-color-dark

// normalize margins for typographic elements
h1,
h2,
h3,
h4,
h5,
h6
  margin: $gap 0
  &.has-border-bottom
    padding-bottom: $gap

p
  line-height: 1.4em

.code,
.is-monospace
  font-family: $font-stack-monospace

.code
  background-color: $code-light
  color: $code-light-text
  padding: $gap/4
  vertical-align: middle
  word-break: break-all
  border-radius: $radius

  &-block
    @extend .code
    padding: $gap
    line-height: 1.6em
    letter-spacing: .05em
    white-space: pre-wrap
    max-width: 100%
    max-height: 40rem
    overflow-y: auto

  &.is-dark
    background-color: $code-dark
    color: $code-dark-text

  &.is-scrollable
    max-width: 40rem
    overflow: auto

.has-text-blue
  color: $blue
.has-text-red
  color: $red
.has-text-green
  color: $green
.has-text-yellow
  color: $yellow
.has-text-dark
  color: $dark
.has-text-black
  color: $black
.has-text-white
  color: $white
.has-text-light
  color: tint($black, .6)

.has-text-weight-hairline
  font-weight: 100
.has-text-weight-thin
  font-weight: 200
.has-text-weight-light
  font-weight: 300
.has-text-weight-normal
  font-weight: 400
.has-text-weight-medium
  font-weight: 500
.has-text-weight-semibold
  font-weight: 600
.has-text-weight-bold
  font-weight: 700
.has-text-weight-heavy
  font-weight: 800
.has-text-weight-black
  font-weight: 900

.is-error
  @extend .has-text-red
  font-weight: 700
  font-size: .9em
  margin: $gap/2 0
  line-height: 1.1rem
  &:before
    content: "!"
    display: inline-block
    vertical-align: middle
    width: .9rem
    height: .9rem
    border-radius: 50%
    background-color: $red
    color: $white
    text-align: center
    font-size: .6em
    line-height: 1rem
    font-weight: 900
    margin-right: $gap/2
    margin-top: -0.1rem

  & + p
    @extend .has-text-red
    margin: 0
    font-size: .8em

.no-text-wrap
  white-space: nowrap
.has-text-wrapped
  word-break: break-word

.has-text-left
  text-align: left
.has-text-center
  text-align: center
.has-text-right
  text-align: right

.has-text-small
  font-size: .8em
.has-text-big
  font-size: 1.5em
.has-text-huge
  font-size: 3em

.has-text-uppercased
  text-transform: uppercase
.has-text-capitalized
  text-transform: capitalize

.has-half-opacity
  opacity: 0.5
  +dark-mode
    opacity: 0.66

// use this selector only if parent elements override the default
// link styles.
.is-link
  position: relative
  color: $blue
  text-decoration: underline !important
  &.has-no-underline
    text-decoration: none !important
  &:hover
    cursor: pointer
