// Overrides

/* sets base font scale for all other font sizes */
html
  font-size: 14px

/* sticky footer solution as written by Philip Walton */
/* https://philipwalton.com/articles/normalizing-cross-browser-flexbox-bugs/ */

body
  display: flex
  flex-direction: column
  height: 100vh

header,
footer
  flex-shrink: 0

main
  flex: 1 0 auto

/* overrides Bulma defaults which have bigger differences */
.content
  h1
    font-size: 1.75em
  h2
    font-size: 1.5em
  h3
    font-size: 1.35em

.help,
.is-small
  font-family: $family-smalltext

.field
  &.has-addons-tablet
    .control
      &:not(:last-child)
        margin-bottom: .5rem
    @media screen and (min-width: 769px)
      display: flex
      justify-content: flex-start
      .control
        &:not(:last-child)
          margin-right: -1px
          margin-bottom: 0
        &:first-child
          .button,
          .input,
          .select select
            border-bottom-left-radius: 3px
            border-top-left-radius: 3px
        &:last-child
          .button,
          .input,
          .select select
            border-bottom-right-radius: 3px
            border-top-right-radius: 3px
        .button,
        .input,
        .select select
          border-radius: 0
          &:hover,
          &.is-hovered
            z-index: 2
          &:focus,
          &.is-focused,
          &:active,
          &.is-active
            z-index: 3
            &:hover
              z-index: 4
        &.is-expanded
          flex-grow: 1
      &.has-addons-centered
        justify-content: center
      &.has-addons-right
        justify-content: flex-end
      &.has-addons-fullwidth
        .control
          flex-grow: 1
          flex-shrink: 0

.notification
  // Colors are schemed with light background and dark text similar to message
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    $color-lightning: max((100% - lightness($color)) - 2%, 0%)
    $color-luminance: colorLuminance($color)
    $darken-percentage: $color-luminance * 70%
    $desaturate-percentage: $color-luminance * 30%
    &.is-#{$name}
      background-color: lighten($color, $color-lightning)
      border: 1px solid $color
      color: desaturate(darken($color, $darken-percentage), $desaturate-percentage)

.button
  // Needed stronger contrast in hover and active states.
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      background-color: $color
      border-color: transparent
      color: $color-invert
      &:hover,
      &.is-hovered
        background-color: darken($color, 6%)
        border-color: transparent
        color: $color-invert
      &:focus,
      &.is-focused
        border-color: transparent
        color: $color-invert
        &:not(:active)
          box-shadow: $button-focus-box-shadow-size rgba($color, 0.35)
      &:active,
      &.is-active
        background-color: darken($color, 10%)
        border-color: transparent
        color: $color-invert
