// Colors

$black:        hsl(0, 0%, 4%) !default
$black-bis:    hsl(0, 0%, 7%) !default
$black-ter:    hsl(0, 0%, 14%) !default

$grey-darker:  hsl(0, 0%, 21%) !default
$grey-dark:    hsl(0, 0%, 29%) !default
$grey:         hsl(0, 0%, 48%) !default
$grey-light:   hsl(0, 0%, 71%) !default
$grey-lighter: hsl(0, 0%, 86%) !default
$grey-lightest: hsl(0, 0%, 93%) !default

$white-ter:    hsl(0, 0%, 96%) !default
$white-bis:    hsl(0, 0%, 98%) !default
$white:        hsl(0, 0%, 100%) !default

$orange:       hsl(14,  100%, 53%) !default
$yellow:       hsl(48,  100%, 67%) !default
$green:        hsl(141, 53%,  53%) !default
$turquoise:    hsl(171, 100%, 41%) !default
$cyan:         hsl(204, 71%,  53%) !default
$blue:         hsl(217, 71%,  53%) !default
$purple:       hsl(271, 100%, 71%) !default
$red:          hsl(348, 86%, 61%) !default

// Typography

$family-sans-serif: BlinkMacSystemFont, -apple-system, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", "Helvetica", "Arial", sans-serif !default
$family-monospace: monospace !default
$render-mode: optimizeLegibility !default

$size-1: 3rem !default
$size-2: 2.5rem !default
$size-3: 2rem !default
$size-4: 1.5rem !default
$size-5: 1.25rem !default
$size-6: 1rem !default
$size-7: 0.75rem !default

$weight-light: 300 !default
$weight-normal: 400 !default
$weight-medium: 500 !default
$weight-semibold: 600 !default
$weight-bold: 700 !default

// Spacing

$block-spacing: 1.5rem !default

// Responsiveness

// The container horizontal gap, which acts as the offset for breakpoints
$gap: 32px !default
// 960, 1152, and 1344 have been chosen because they are divisible by both 12 and 16
$tablet: 769px !default
// 960px container + 4rem
$desktop: 960px + (2 * $gap) !default
// 1152px container + 4rem
$widescreen: 1152px + (2 * $gap) !default
$widescreen-enabled: true !default
// 1344px container + 4rem
$fullhd: 1344px + (2 * $gap) !default
$fullhd-enabled: true !default

// Miscellaneous

$easing: ease-out !default
$radius-small: 2px !default
$radius: 4px !default
$radius-large: 6px !default
$radius-rounded: 290486px !default
$speed: 86ms !default

// Flags

$variable-columns: true !default

@function mergeColorMaps($bulma-colors, $custom-colors)
  // We return at least Bulma's hard-coded colors
  $merged-colors: $bulma-colors

  // We want a map as input
  @if type-of($custom-colors) == 'map'
    @each $name, $components in $custom-colors
      // The color name should be a string
      // and the components either a single color
      // or a colors list with at least one element
      @if type-of($name) == 'string' and (type-of($components) == 'list' or type-of($components) == 'color') and length($components) >= 1
        $color-base: null
        $color-invert: null
        $color-light: null
        $color-dark: null
        $value: null

        // The param can either be a single color
        // or a list of 2 colors
        @if type-of($components) == 'color'
          $color-base: $components
          $color-invert: findColorInvert($color-base)
          $color-light: findLightColor($color-base)
          $color-dark: findDarkColor($color-base)
        @else if type-of($components) == 'list'
          $color-base: nth($components, 1)
          // If Invert, Light and Dark are provided
          @if length($components) > 3
            $color-invert: nth($components, 2)
            $color-light: nth($components, 3)
            $color-dark: nth($components, 4)
            // If only Invert and Light are provided
          @else if length($components) > 2
            $color-invert: nth($components, 2)
            $color-light: nth($components, 3)
            $color-dark: findDarkColor($color-base)
            // If only Invert is provided
          @else
            $color-invert: nth($components, 2)
            $color-light: findLightColor($color-base)
            $color-dark: findDarkColor($color-base)

        $value: ($color-base, $color-invert, $color-light, $color-dark)

        // We only want to merge the map if the color base is an actual color
        @if type-of($color-base) == 'color'
          // We merge this colors elements as map with Bulma's colors map
          // (we can override them this way, no multiple definition for the same name)
          // $merged-colors: map_merge($merged-colors, ($name: ($color-base, $color-invert, $color-light, $color-dark)))
          $merged-colors: map_merge($merged-colors, ($name: $value))

  @return $merged-colors

@function powerNumber($number, $exp)
  $value: 1
  @if $exp > 0
    @for $i from 1 through $exp
      $value: $value * $number
  @else if $exp < 0
    @for $i from 1 through -$exp
      $value: $value / $number
  @return $value

@function colorLuminance($color)
  @if type-of($color) != 'color'
    @return 0.55
  $color-rgb: ('red': red($color),'green': green($color),'blue': blue($color))
  @each $name, $value in $color-rgb
    $adjusted: 0
    $value: $value / 255
    @if $value < 0.03928
      $value: $value / 12.92
    @else
      $value: ($value + .055) / 1.055
      $value: powerNumber($value, 2)
    $color-rgb: map-merge($color-rgb, ($name: $value))
  @return (map-get($color-rgb, 'red') * .2126) + (map-get($color-rgb, 'green') * .7152) + (map-get($color-rgb, 'blue') * .0722)

@function findColorInvert($color)
  @if (colorLuminance($color) > 0.55)
    @return rgba(#000, 0.7)
  @else
    @return #fff

@function findLightColor($color)
  @if type-of($color) == 'color'
    $l: 96%
    @if lightness($color) > 96%
      $l: lightness($color)
    @return change-color($color, $lightness: $l)
  @return $background

@function findDarkColor($color)
  @if type-of($color) == 'color'
    $base-l: 29%
    $luminance: colorLuminance($color)
    $luminance-delta: (0.53 - $luminance)
    $target-l: round($base-l + ($luminance-delta * 53))
    @return change-color($color, $lightness: max($base-l, $target-l))
  @return $text-strong

@function bulmaRgba($color, $alpha)
  @if type-of($color) != 'color'
    @return $color
  @return rgba($color, $alpha)

@function bulmaDarken($color, $amount)
  @if type-of($color) != 'color'
    @return $color
  @return darken($color, $amount)

$primary: $turquoise !default

$info: $cyan !default
$success: $green !default
$warning: $yellow !default
$danger: $red !default

$light: $white-ter !default
$dark: $grey-darker !default

// Invert colors

$orange-invert: findColorInvert($orange) !default
$yellow-invert: findColorInvert($yellow) !default
$green-invert: findColorInvert($green) !default
$turquoise-invert: findColorInvert($turquoise) !default
$cyan-invert: findColorInvert($cyan) !default
$blue-invert: findColorInvert($blue) !default
$purple-invert: findColorInvert($purple) !default
$red-invert: findColorInvert($red) !default

$primary-invert: findColorInvert($primary) !default
$primary-light: findLightColor($primary) !default
$primary-dark: findDarkColor($primary) !default
$info-invert: findColorInvert($info) !default
$info-light: findLightColor($info) !default
$info-dark: findDarkColor($info) !default
$success-invert: findColorInvert($success) !default
$success-light: findLightColor($success) !default
$success-dark: findDarkColor($success) !default
$warning-invert: findColorInvert($warning) !default
$warning-light: findLightColor($warning) !default
$warning-dark: findDarkColor($warning) !default
$danger-invert: findColorInvert($danger) !default
$danger-light: findLightColor($danger) !default
$danger-dark: findDarkColor($danger) !default
$light-invert: findColorInvert($light) !default
$dark-invert: findColorInvert($dark) !default

// General colors

$scheme-main: $white !default
$scheme-main-bis: $white-bis !default
$scheme-main-ter: $white-ter !default
$scheme-invert: $black !default
$scheme-invert-bis: $black-bis !default
$scheme-invert-ter: $black-ter !default

$background: $white-ter !default

$border: $grey-lighter !default
$border-hover: $grey-light !default
$border-light: $grey-lightest !default
$border-light-hover: $grey-light !default

// Text colors

$text: $grey-dark !default
$text-invert: findColorInvert($text) !default
$text-light: $grey !default
$text-strong: $grey-darker !default

// Code colors

$code: $red !default
$code-background: $background !default

$pre: $text !default
$pre-background: $background !default

// Link colors

$link: $blue !default
$link-invert: findColorInvert($link) !default
$link-light: findLightColor($link) !default
$link-dark: findDarkColor($link) !default
$link-visited: $purple !default

$link-hover: $grey-darker !default
$link-hover-border: $grey-light !default

$link-focus: $grey-darker !default
$link-focus-border: $blue !default

$link-active: $grey-darker !default
$link-active-border: $grey-dark !default

// Typography

$family-primary: $family-sans-serif !default
$family-secondary: $family-sans-serif !default
$family-code: $family-monospace !default

$size-small: $size-7 !default
$size-normal: $size-6 !default
$size-medium: $size-5 !default
$size-large: $size-4 !default

// Lists and maps
$custom-colors: null !default
$custom-shades: null !default

$colors: mergeColorMaps(("white": ($white, $black), "black": ($black, $white), "light": ($light, $light-invert), "dark": ($dark, $dark-invert), "primary": ($primary, $primary-invert, $primary-light, $primary-dark), "link": ($link, $link-invert, $link-light, $link-dark), "info": ($info, $info-invert, $info-light, $info-dark), "success": ($success, $success-invert, $success-light, $success-dark), "warning": ($warning, $warning-invert, $warning-light, $warning-dark), "danger": ($danger, $danger-invert, $danger-light, $danger-dark)), $custom-colors) !default
$shades: mergeColorMaps(("black-bis": $black-bis, "black-ter": $black-ter, "grey-darker": $grey-darker, "grey-dark": $grey-dark, "grey": $grey, "grey-light": $grey-light, "grey-lighter": $grey-lighter, "white-ter": $white-ter, "white-bis": $white-bis), $custom-shades) !default

$sizes: $size-1 $size-2 $size-3 $size-4 $size-5 $size-6 $size-7 !default

@keyframes spinAround
  from
    transform: rotate(0deg)
  to
    transform: rotate(359deg)

@import "initial-variables"

=clearfix
  &::after
    clear: both
    content: " "
    display: table

=center($width, $height: 0)
  position: absolute
  @if $height != 0
    left: calc(50% - (#{$width} / 2))
    top: calc(50% - (#{$height} / 2))
  @else
    left: calc(50% - (#{$width} / 2))
    top: calc(50% - (#{$width} / 2))

=fa($size, $dimensions)
  display: inline-block
  font-size: $size
  height: $dimensions
  line-height: $dimensions
  text-align: center
  vertical-align: top
  width: $dimensions

=hamburger($dimensions)
  cursor: pointer
  display: block
  height: $dimensions
  position: relative
  width: $dimensions
  span
    background-color: currentColor
    display: block
    height: 1px
    left: calc(50% - 8px)
    position: absolute
    transform-origin: center
    transition-duration: $speed
    transition-property: background-color, opacity, transform
    transition-timing-function: $easing
    width: 16px
    &:nth-child(1)
      top: calc(50% - 6px)
    &:nth-child(2)
      top: calc(50% - 1px)
    &:nth-child(3)
      top: calc(50% + 4px)
  &:hover
    background-color: bulmaRgba(black, 0.05)
  // Modifers
  &.is-active
    span
      &:nth-child(1)
        transform: translateY(5px) rotate(45deg)
      &:nth-child(2)
        opacity: 0
      &:nth-child(3)
        transform: translateY(-5px) rotate(-45deg)

=overflow-touch
  -webkit-overflow-scrolling: touch

=placeholder
  $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
  @each $placeholder in $placeholders
    &:#{$placeholder}-placeholder
      @content

// Responsiveness

=from($device)
  @media screen and (min-width: $device)
    @content

=until($device)
  @media screen and (max-width: $device - 1px)
    @content

=mobile
  @media screen and (max-width: $tablet - 1px)
    @content

=tablet
  @media screen and (min-width: $tablet), print
    @content

=tablet-only
  @media screen and (min-width: $tablet) and (max-width: $desktop - 1px)
    @content

=touch
  @media screen and (max-width: $desktop - 1px)
    @content

=desktop
  @media screen and (min-width: $desktop)
    @content

=desktop-only
  @if $widescreen-enabled
    @media screen and (min-width: $desktop) and (max-width: $widescreen - 1px)
      @content

=until-widescreen
  @if $widescreen-enabled
    @media screen and (max-width: $widescreen - 1px)
      @content

=widescreen
  @if $widescreen-enabled
    @media screen and (min-width: $widescreen)
      @content

=widescreen-only
  @if $widescreen-enabled and $fullhd-enabled
    @media screen and (min-width: $widescreen) and (max-width: $fullhd - 1px)
      @content

=until-fullhd
  @if $fullhd-enabled
    @media screen and (max-width: $fullhd - 1px)
      @content

=fullhd
  @if $fullhd-enabled
    @media screen and (min-width: $fullhd)
      @content

// Placeholders

=unselectable
  -webkit-touch-callout: none
  -webkit-user-select: none
  -moz-user-select: none
  -ms-user-select: none
  user-select: none

%unselectable
  +unselectable

=arrow($color: transparent)
  border: 3px solid $color
  border-radius: 2px
  border-right: 0
  border-top: 0
  content: " "
  display: block
  height: 0.625em
  margin-top: -0.4375em
  pointer-events: none
  position: absolute
  top: 50%
  transform: rotate(-45deg)
  transform-origin: center
  width: 0.625em

%arrow
  +arrow

=block($spacing: $block-spacing)
  &:not(:last-child)
    margin-bottom: $spacing

%block
  +block

=delete
  @extend %unselectable
  -moz-appearance: none
  -webkit-appearance: none
  background-color: bulmaRgba($scheme-invert, 0.2)
  border: none
  border-radius: $radius-rounded
  cursor: pointer
  pointer-events: auto
  display: inline-block
  flex-grow: 0
  flex-shrink: 0
  font-size: 0
  height: 20px
  max-height: 20px
  max-width: 20px
  min-height: 20px
  min-width: 20px
  outline: none
  position: relative
  vertical-align: top
  width: 20px
  &::before,
  &::after
    background-color: $scheme-main
    content: ""
    display: block
    left: 50%
    position: absolute
    top: 50%
    transform: translateX(-50%) translateY(-50%) rotate(45deg)
    transform-origin: center center
  &::before
    height: 2px
    width: 50%
  &::after
    height: 50%
    width: 2px
  &:hover,
  &:focus
    background-color: bulmaRgba($scheme-invert, 0.3)
  &:active
    background-color: bulmaRgba($scheme-invert, 0.4)
  // Sizes
  &.is-small
    height: 16px
    max-height: 16px
    max-width: 16px
    min-height: 16px
    min-width: 16px
    width: 16px
  &.is-medium
    height: 24px
    max-height: 24px
    max-width: 24px
    min-height: 24px
    min-width: 24px
    width: 24px
  &.is-large
    height: 32px
    max-height: 32px
    max-width: 32px
    min-height: 32px
    min-width: 32px
    width: 32px

%delete
  +delete

=loader
  animation: spinAround 500ms infinite linear
  border: 2px solid $grey-lighter
  border-radius: $radius-rounded
  border-right-color: transparent
  border-top-color: transparent
  content: ""
  display: block
  height: 1em
  position: relative
  width: 1em

%loader
  +loader

=overlay($offset: 0)
  bottom: $offset
  left: $offset
  position: absolute
  right: $offset
  top: $offset

%overlay
  +overlay

$control-radius: $radius !default
$control-radius-small: $radius-small !default

$control-border-width: 1px !default

$control-height: 2.5em !default
$control-line-height: 1.5 !default

$control-padding-vertical: calc(0.5em - #{$control-border-width}) !default
$control-padding-horizontal: calc(0.75em - #{$control-border-width}) !default

=control
  -moz-appearance: none
  -webkit-appearance: none
  align-items: center
  border: $control-border-width solid transparent
  border-radius: $control-radius
  box-shadow: none
  display: inline-flex
  font-size: $size-normal
  height: $control-height
  justify-content: flex-start
  line-height: $control-line-height
  padding-bottom: $control-padding-vertical
  padding-left: $control-padding-horizontal
  padding-right: $control-padding-horizontal
  padding-top: $control-padding-vertical
  position: relative
  vertical-align: top
  // States
  &:focus,
  &.is-focused,
  &:active,
  &.is-active
    outline: none
  &[disabled],
  fieldset[disabled] &
    cursor: not-allowed

%control
  +control

// The controls sizes use mixins so they can be used at different breakpoints
=control-small
  border-radius: $control-radius-small
  font-size: $size-small
=control-medium
  font-size: $size-medium
=control-large
  font-size: $size-large

/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
// Blocks
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6
  margin: 0
  padding: 0

// Headings
h1,
h2,
h3,
h4,
h5,
h6
  font-size: 100%
  font-weight: normal

// List
ul
  list-style: none

// Form
button,
input,
select,
textarea
  margin: 0

// Box sizing
html
  box-sizing: border-box

*
  &,
  &::before,
  &::after
    box-sizing: inherit

// Media
img,
video
  height: auto
  max-width: 100%

// Iframe
iframe
  border: 0

// Table
table
  border-collapse: collapse
  border-spacing: 0

td,
th
  padding: 0
  &:not([align])
    text-align: left

$body-background-color: $scheme-main !default
$body-size: 16px !default
$body-min-width: 300px !default
$body-rendering: optimizeLegibility !default
$body-family: $family-primary !default
$body-overflow-x: hidden !default
$body-overflow-y: scroll !default

$body-color: $text !default
$body-font-size: 1em !default
$body-weight: $weight-normal !default
$body-line-height: 1.5 !default

$code-family: $family-code !default
$code-padding: 0.25em 0.5em 0.25em !default
$code-weight: normal !default
$code-size: 0.875em !default

$small-font-size: 0.875em !default

$hr-background-color: $background !default
$hr-height: 2px !default
$hr-margin: 1.5rem 0 !default

$strong-color: $text-strong !default
$strong-weight: $weight-bold !default

$pre-font-size: 0.875em !default
$pre-padding: 1.25rem 1.5rem !default
$pre-code-font-size: 1em !default

html
  background-color: $body-background-color
  font-size: $body-size
  -moz-osx-font-smoothing: grayscale
  -webkit-font-smoothing: antialiased
  min-width: $body-min-width
  overflow-x: $body-overflow-x
  overflow-y: $body-overflow-y
  text-rendering: $body-rendering
  text-size-adjust: 100%

article,
aside,
figure,
footer,
header,
hgroup,
section
  display: block

body,
button,
input,
select,
textarea
  font-family: $body-family

code,
pre
  -moz-osx-font-smoothing: auto
  -webkit-font-smoothing: auto
  font-family: $code-family

body
  color: $body-color
  font-size: $body-font-size
  font-weight: $body-weight
  line-height: $body-line-height

// Inline

a
  color: $link
  cursor: pointer
  text-decoration: none
  strong
    color: currentColor
  &:hover
    color: $link-hover

code
  background-color: $code-background
  color: $code
  font-size: $code-size
  font-weight: $code-weight
  padding: $code-padding

hr
  background-color: $hr-background-color
  border: none
  display: block
  height: $hr-height
  margin: $hr-margin

img
  height: auto
  max-width: 100%

input[type="checkbox"],
input[type="radio"]
  vertical-align: baseline

small
  font-size: $small-font-size

span
  font-style: inherit
  font-weight: inherit

strong
  color: $strong-color
  font-weight: $strong-weight

// Block

fieldset
  border: none

pre
  +overflow-touch
  background-color: $pre-background
  color: $pre
  font-size: $pre-font-size
  overflow-x: auto
  padding: $pre-padding
  white-space: pre
  word-wrap: normal
  code
    background-color: transparent
    color: currentColor
    font-size: $pre-code-font-size
    padding: 0

table
  td,
  th
    vertical-align: top
    &:not([align])
      text-align: left
  th
    color: $text-strong

// Float

.is-clearfix
  +clearfix

.is-pulled-left
  float: left !important

.is-pulled-right
  float: right !important

// Overflow

.is-clipped
  overflow: hidden !important

// Overlay

.is-overlay
  @extend %overlay

// Typography

=typography-size($target:'')
  @each $size in $sizes
    $i: index($sizes, $size)
    .is-size-#{$i}#{if($target == '', '', '-' + $target)}
      font-size: $size !important

+typography-size()

+mobile
  +typography-size('mobile')

+tablet
  +typography-size('tablet')

+touch
  +typography-size('touch')

+desktop
  +typography-size('desktop')

+widescreen
  +typography-size('widescreen')

+fullhd
  +typography-size('fullhd')

$alignments: ('centered': 'center', 'justified': 'justify', 'left': 'left', 'right': 'right')

@each $alignment, $text-align in $alignments
  .has-text-#{$alignment}
    text-align: #{$text-align} !important

@each $alignment, $text-align in $alignments
  +mobile
    .has-text-#{$alignment}-mobile
      text-align: #{$text-align} !important
  +tablet
    .has-text-#{$alignment}-tablet
      text-align: #{$text-align} !important
  +tablet-only
    .has-text-#{$alignment}-tablet-only
      text-align: #{$text-align} !important
  +touch
    .has-text-#{$alignment}-touch
      text-align: #{$text-align} !important
  +desktop
    .has-text-#{$alignment}-desktop
      text-align: #{$text-align} !important
  +desktop-only
    .has-text-#{$alignment}-desktop-only
      text-align: #{$text-align} !important
  +widescreen
    .has-text-#{$alignment}-widescreen
      text-align: #{$text-align} !important
  +widescreen-only
    .has-text-#{$alignment}-widescreen-only
      text-align: #{$text-align} !important
  +fullhd
    .has-text-#{$alignment}-fullhd
      text-align: #{$text-align} !important

.is-capitalized
  text-transform: capitalize !important

.is-lowercase
  text-transform: lowercase !important

.is-uppercase
  text-transform: uppercase !important

.is-italic
  font-style: italic !important

@each $name, $pair in $colors
  $color: nth($pair, 1)
  .has-text-#{$name}
    color: $color !important
  a.has-text-#{$name}
    &:hover,
    &:focus
      color: bulmaDarken($color, 10%) !important
  .has-background-#{$name}
    background-color: $color !important

@each $name, $shade in $shades
  .has-text-#{$name}
    color: $shade !important
  .has-background-#{$name}
    background-color: $shade !important

.has-text-weight-light
  font-weight: $weight-light !important
.has-text-weight-normal
  font-weight: $weight-normal !important
.has-text-weight-medium
  font-weight: $weight-medium !important
.has-text-weight-semibold
  font-weight: $weight-semibold !important
.has-text-weight-bold
  font-weight: $weight-bold !important

.is-family-primary
  font-family: $family-primary !important

.is-family-secondary
  font-family: $family-secondary !important

.is-family-sans-serif
  font-family: $family-sans-serif !important

.is-family-monospace
  font-family: $family-monospace !important

.is-family-code
  font-family: $family-code !important

// Visibility

$displays: 'block' 'flex' 'inline' 'inline-block' 'inline-flex'

@each $display in $displays
  .is-#{$display}
    display: #{$display} !important
  +mobile
    .is-#{$display}-mobile
      display: #{$display} !important
  +tablet
    .is-#{$display}-tablet
      display: #{$display} !important
  +tablet-only
    .is-#{$display}-tablet-only
      display: #{$display} !important
  +touch
    .is-#{$display}-touch
      display: #{$display} !important
  +desktop
    .is-#{$display}-desktop
      display: #{$display} !important
  +desktop-only
    .is-#{$display}-desktop-only
      display: #{$display} !important
  +widescreen
    .is-#{$display}-widescreen
      display: #{$display} !important
  +widescreen-only
    .is-#{$display}-widescreen-only
      display: #{$display} !important
  +fullhd
    .is-#{$display}-fullhd
      display: #{$display} !important

.is-hidden
  display: none !important

.is-sr-only
  border: none !important
  clip: rect(0, 0, 0, 0) !important
  height: 0.01em !important
  overflow: hidden !important
  padding: 0 !important
  position: absolute !important
  white-space: nowrap !important
  width: 0.01em !important

+mobile
  .is-hidden-mobile
    display: none !important

+tablet
  .is-hidden-tablet
    display: none !important

+tablet-only
  .is-hidden-tablet-only
    display: none !important

+touch
  .is-hidden-touch
    display: none !important

+desktop
  .is-hidden-desktop
    display: none !important

+desktop-only
  .is-hidden-desktop-only
    display: none !important

+widescreen
  .is-hidden-widescreen
    display: none !important

+widescreen-only
  .is-hidden-widescreen-only
    display: none !important

+fullhd
  .is-hidden-fullhd
    display: none !important

.is-invisible
  visibility: hidden !important

+mobile
  .is-invisible-mobile
    visibility: hidden !important

+tablet
  .is-invisible-tablet
    visibility: hidden !important

+tablet-only
  .is-invisible-tablet-only
    visibility: hidden !important

+touch
  .is-invisible-touch
    visibility: hidden !important

+desktop
  .is-invisible-desktop
    visibility: hidden !important

+desktop-only
  .is-invisible-desktop-only
    visibility: hidden !important

+widescreen
  .is-invisible-widescreen
    visibility: hidden !important

+widescreen-only
  .is-invisible-widescreen-only
    visibility: hidden !important

+fullhd
  .is-invisible-fullhd
    visibility: hidden !important

// Other

.is-marginless
  margin: 0 !important

.is-paddingless
  padding: 0 !important

.is-radiusless
  border-radius: 0 !important

.is-shadowless
  box-shadow: none !important

.is-unselectable
  @extend %unselectable

.is-relative
  position: relative !important

$box-color: $text !default
$box-background-color: $scheme-main !default
$box-radius: $radius-large !default
$box-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$box-padding: 1.25rem !default

$box-link-hover-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0 0 1px $link !default
$box-link-active-shadow: inset 0 1px 2px rgba($scheme-invert, 0.2), 0 0 0 1px $link !default

.box
  @extend %block
  background-color: $box-background-color
  border-radius: $box-radius
  box-shadow: $box-shadow
  color: $box-color
  display: block
  padding: $box-padding

a.box
  &:hover,
  &:focus
    box-shadow: $box-link-hover-shadow
  &:active
    box-shadow: $box-link-active-shadow

$button-color: $text-strong !default
$button-background-color: $scheme-main !default
$button-family: false !default

$button-border-color: $border !default
$button-border-width: $control-border-width !default

$button-padding-vertical: calc(0.5em - #{$button-border-width}) !default
$button-padding-horizontal: 1em !default

$button-hover-color: $link-hover !default
$button-hover-border-color: $link-hover-border !default

$button-focus-color: $link-focus !default
$button-focus-border-color: $link-focus-border !default
$button-focus-box-shadow-size: 0 0 0 0.125em !default
$button-focus-box-shadow-color: bulmaRgba($link, 0.25) !default

$button-active-color: $link-active !default
$button-active-border-color: $link-active-border !default

$button-text-color: $text !default
$button-text-decoration: underline !default
$button-text-hover-background-color: $background !default
$button-text-hover-color: $text-strong !default

$button-disabled-background-color: $scheme-main !default
$button-disabled-border-color: $border !default
$button-disabled-shadow: none !default
$button-disabled-opacity: 0.5 !default

$button-static-color: $text-light !default
$button-static-background-color: $scheme-main-ter !default
$button-static-border-color: $border !default

// The button sizes use mixins so they can be used at different breakpoints
=button-small
  border-radius: $radius-small
  font-size: $size-small
=button-normal
  font-size: $size-normal
=button-medium
  font-size: $size-medium
=button-large
  font-size: $size-large

.button
  @extend %control
  @extend %unselectable
  background-color: $button-background-color
  border-color: $button-border-color
  border-width: $button-border-width
  color: $button-color
  cursor: pointer
  @if $button-family
    font-family: $button-family
  justify-content: center
  padding-bottom: $button-padding-vertical
  padding-left: $button-padding-horizontal
  padding-right: $button-padding-horizontal
  padding-top: $button-padding-vertical
  text-align: center
  white-space: nowrap
  strong
    color: inherit
  .icon
    &,
    &.is-small,
    &.is-medium,
    &.is-large
      height: 1.5em
      width: 1.5em
    &:first-child:not(:last-child)
      margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
      margin-right: $button-padding-horizontal / 4
    &:last-child:not(:first-child)
      margin-left: $button-padding-horizontal / 4
      margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
    &:first-child:last-child
      margin-left: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
      margin-right: calc(#{-1 / 2 * $button-padding-horizontal} - #{$button-border-width})
  // States
  &:hover,
  &.is-hovered
    border-color: $button-hover-border-color
    color: $button-hover-color
  &:focus,
  &.is-focused
    border-color: $button-focus-border-color
    color: $button-focus-color
    &:not(:active)
      box-shadow: $button-focus-box-shadow-size $button-focus-box-shadow-color
  &:active,
  &.is-active
    border-color: $button-active-border-color
    color: $button-active-color
  // Colors
  &.is-text
    background-color: transparent
    border-color: transparent
    color: $button-text-color
    text-decoration: $button-text-decoration
    &:hover,
    &.is-hovered,
    &:focus,
    &.is-focused
      background-color: $button-text-hover-background-color
      color: $button-text-hover-color
    &:active,
    &.is-active
      background-color: bulmaDarken($button-text-hover-background-color, 5%)
      color: $button-text-hover-color
    &[disabled],
    fieldset[disabled] &
      background-color: transparent
      border-color: transparent
      box-shadow: none
  @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: bulmaDarken($color, 2.5%)
        border-color: transparent
        color: $color-invert
      &:focus,
      &.is-focused
        border-color: transparent
        color: $color-invert
        &:not(:active)
          box-shadow: $button-focus-box-shadow-size bulmaRgba($color, 0.25)
      &:active,
      &.is-active
        background-color: bulmaDarken($color, 5%)
        border-color: transparent
        color: $color-invert
      &[disabled],
      fieldset[disabled] &
        background-color: $color
        border-color: transparent
        box-shadow: none
      &.is-inverted
        background-color: $color-invert
        color: $color
        &:hover,
        &.is-hovered
          background-color: bulmaDarken($color-invert, 5%)
        &[disabled],
        fieldset[disabled] &
          background-color: $color-invert
          border-color: transparent
          box-shadow: none
          color: $color
      &.is-loading
        &::after
          border-color: transparent transparent $color-invert $color-invert !important
      &.is-outlined
        background-color: transparent
        border-color: $color
        color: $color
        &:hover,
        &.is-hovered,
        &:focus,
        &.is-focused
          background-color: $color
          border-color: $color
          color: $color-invert
        &.is-loading
          &::after
            border-color: transparent transparent $color $color !important
          &:hover,
          &.is-hovered,
          &:focus,
          &.is-focused
            &::after
              border-color: transparent transparent $color-invert $color-invert !important
        &[disabled],
        fieldset[disabled] &
          background-color: transparent
          border-color: $color
          box-shadow: none
          color: $color
      &.is-inverted.is-outlined
        background-color: transparent
        border-color: $color-invert
        color: $color-invert
        &:hover,
        &.is-hovered,
        &:focus,
        &.is-focused
          background-color: $color-invert
          color: $color
        &.is-loading
          &:hover,
          &.is-hovered,
          &:focus,
          &.is-focused
            &::after
              border-color: transparent transparent $color $color !important
        &[disabled],
        fieldset[disabled] &
          background-color: transparent
          border-color: $color-invert
          box-shadow: none
          color: $color-invert
      // If light and dark colors are provided
      @if length($pair) >= 4
        $color-light: nth($pair, 3)
        $color-dark: nth($pair, 4)
        &.is-light
          background-color: $color-light
          color: $color-dark
          &:hover,
          &.is-hovered
            background-color: bulmaDarken($color-light, 2.5%)
            border-color: transparent
            color: $color-dark
          &:active,
          &.is-active
            background-color: bulmaDarken($color-light, 5%)
            border-color: transparent
            color: $color-dark
  // Sizes
  &.is-small
    +button-small
  &.is-normal
    +button-normal
  &.is-medium
    +button-medium
  &.is-large
    +button-large
  // Modifiers
  &[disabled],
  fieldset[disabled] &
    background-color: $button-disabled-background-color
    border-color: $button-disabled-border-color
    box-shadow: $button-disabled-shadow
    opacity: $button-disabled-opacity
  &.is-fullwidth
    display: flex
    width: 100%
  &.is-loading
    color: transparent !important
    pointer-events: none
    &::after
      @extend %loader
      +center(1em)
      position: absolute !important
  &.is-static
    background-color: $button-static-background-color
    border-color: $button-static-border-color
    color: $button-static-color
    box-shadow: none
    pointer-events: none
  &.is-rounded
    border-radius: $radius-rounded
    padding-left: calc(#{$button-padding-horizontal} + 0.25em)
    padding-right: calc(#{$button-padding-horizontal} + 0.25em)

.buttons
  align-items: center
  display: flex
  flex-wrap: wrap
  justify-content: flex-start
  .button
    margin-bottom: 0.5rem
    &:not(:last-child):not(.is-fullwidth)
      margin-right: 0.5rem
  &:last-child
    margin-bottom: -0.5rem
  &:not(:last-child)
    margin-bottom: 1rem
  // Sizes
  &.are-small
    .button:not(.is-normal):not(.is-medium):not(.is-large)
      +button-small
  &.are-medium
    .button:not(.is-small):not(.is-normal):not(.is-large)
      +button-medium
  &.are-large
    .button:not(.is-small):not(.is-normal):not(.is-medium)
      +button-large
  &.has-addons
    .button
      &:not(:first-child)
        border-bottom-left-radius: 0
        border-top-left-radius: 0
      &:not(:last-child)
        border-bottom-right-radius: 0
        border-top-right-radius: 0
        margin-right: -1px
      &:last-child
        margin-right: 0
      &:hover,
      &.is-hovered
        z-index: 2
      &:focus,
      &.is-focused,
      &:active,
      &.is-active,
      &.is-selected
        z-index: 3
        &:hover
          z-index: 4
      &.is-expanded
        flex-grow: 1
        flex-shrink: 1
  &.is-centered
    justify-content: center
    &:not(.has-addons)
      .button:not(.is-fullwidth)
        margin-left: 0.25rem
        margin-right: 0.25rem
  &.is-right
    justify-content: flex-end
    &:not(.has-addons)
      .button:not(.is-fullwidth)
        margin-left: 0.25rem
        margin-right: 0.25rem

$container-offset: (2 * $gap) !default

.container
  flex-grow: 1
  margin: 0 auto
  position: relative
  width: auto
  &.is-fluid
    max-width: none
    padding-left: $gap
    padding-right: $gap
    width: 100%
  +desktop
    max-width: $desktop - $container-offset
  +until-widescreen
    &.is-widescreen
      max-width: $widescreen - $container-offset
  +until-fullhd
    &.is-fullhd
      max-width: $fullhd - $container-offset
  +widescreen
    max-width: $widescreen - $container-offset
  +fullhd
    max-width: $fullhd - $container-offset

$content-heading-color: $text-strong !default
$content-heading-weight: $weight-semibold !default
$content-heading-line-height: 1.125 !default

$content-blockquote-background-color: $background !default
$content-blockquote-border-left: 5px solid $border !default
$content-blockquote-padding: 1.25em 1.5em !default

$content-pre-padding: 1.25em 1.5em !default

$content-table-cell-border: 1px solid $border !default
$content-table-cell-border-width: 0 0 1px !default
$content-table-cell-padding: 0.5em 0.75em !default
$content-table-cell-heading-color: $text-strong !default
$content-table-head-cell-border-width: 0 0 2px !default
$content-table-head-cell-color: $text-strong !default
$content-table-foot-cell-border-width: 2px 0 0 !default
$content-table-foot-cell-color: $text-strong !default

.content
  @extend %block
  // Inline
  li + li
    margin-top: 0.25em
  // Block
  p,
  dl,
  ol,
  ul,
  blockquote,
  pre,
  table
    &:not(:last-child)
      margin-bottom: 1em
  h1,
  h2,
  h3,
  h4,
  h5,
  h6
    color: $content-heading-color
    font-weight: $content-heading-weight
    line-height: $content-heading-line-height
  h1
    font-size: 2em
    margin-bottom: 0.5em
    &:not(:first-child)
      margin-top: 1em
  h2
    font-size: 1.75em
    margin-bottom: 0.5714em
    &:not(:first-child)
      margin-top: 1.1428em
  h3
    font-size: 1.5em
    margin-bottom: 0.6666em
    &:not(:first-child)
      margin-top: 1.3333em
  h4
    font-size: 1.25em
    margin-bottom: 0.8em
  h5
    font-size: 1.125em
    margin-bottom: 0.8888em
  h6
    font-size: 1em
    margin-bottom: 1em
  blockquote
    background-color: $content-blockquote-background-color
    border-left: $content-blockquote-border-left
    padding: $content-blockquote-padding
  ol
    list-style-position: outside
    margin-left: 2em
    margin-top: 1em
    &:not([type])
      list-style-type: decimal
      &.is-lower-alpha
        list-style-type: lower-alpha
      &.is-lower-roman
        list-style-type: lower-roman
      &.is-upper-alpha
        list-style-type: upper-alpha
      &.is-upper-roman
        list-style-type: upper-roman
  ul
    list-style: disc outside
    margin-left: 2em
    margin-top: 1em
    ul
      list-style-type: circle
      margin-top: 0.5em
      ul
        list-style-type: square
  dd
    margin-left: 2em
  figure
    margin-left: 2em
    margin-right: 2em
    text-align: center
    &:not(:first-child)
      margin-top: 2em
    &:not(:last-child)
      margin-bottom: 2em
    img
      display: inline-block
    figcaption
      font-style: italic
  pre
    +overflow-touch
    overflow-x: auto
    padding: $content-pre-padding
    white-space: pre
    word-wrap: normal
  sup,
  sub
    font-size: 75%
  table
    width: 100%
    td,
    th
      border: $content-table-cell-border
      border-width: $content-table-cell-border-width
      padding: $content-table-cell-padding
      vertical-align: top
    th
      color: $content-table-cell-heading-color
      &:not([align])
        text-align: left
    thead
      td,
      th
        border-width: $content-table-head-cell-border-width
        color: $content-table-head-cell-color
    tfoot
      td,
      th
        border-width: $content-table-foot-cell-border-width
        color: $content-table-foot-cell-color
    tbody
      tr
        &:last-child
          td,
          th
            border-bottom-width: 0
  .tabs
    li + li
      margin-top: 0
  // Sizes
  &.is-small
    font-size: $size-small
  &.is-medium
    font-size: $size-medium
  &.is-large
    font-size: $size-large

$icon-dimensions: 1.5rem !default
$icon-dimensions-small: 1rem !default
$icon-dimensions-medium: 2rem !default
$icon-dimensions-large: 3rem !default

.icon
  align-items: center
  display: inline-flex
  justify-content: center
  height: $icon-dimensions
  width: $icon-dimensions
  // Sizes
  &.is-small
    height: $icon-dimensions-small
    width: $icon-dimensions-small
  &.is-medium
    height: $icon-dimensions-medium
    width: $icon-dimensions-medium
  &.is-large
    height: $icon-dimensions-large
    width: $icon-dimensions-large

$dimensions: 16 24 32 48 64 96 128 !default

.image
  display: block
  position: relative
  img
    display: block
    height: auto
    width: 100%
    &.is-rounded
      border-radius: $radius-rounded
  &.is-fullwidth
    width: 100%
  // Ratio
  &.is-square,
  &.is-1by1,
  &.is-5by4,
  &.is-4by3,
  &.is-3by2,
  &.is-5by3,
  &.is-16by9,
  &.is-2by1,
  &.is-3by1,
  &.is-4by5,
  &.is-3by4,
  &.is-2by3,
  &.is-3by5,
  &.is-9by16,
  &.is-1by2,
  &.is-1by3
    img,
    .has-ratio
      @extend %overlay
      height: 100%
      width: 100%
  &.is-square,
  &.is-1by1
    padding-top: 100%
  &.is-5by4
    padding-top: 80%
  &.is-4by3
    padding-top: 75%
  &.is-3by2
    padding-top: 66.6666%
  &.is-5by3
    padding-top: 60%
  &.is-16by9
    padding-top: 56.25%
  &.is-2by1
    padding-top: 50%
  &.is-3by1
    padding-top: 33.3333%
  &.is-4by5
    padding-top: 125%
  &.is-3by4
    padding-top: 133.3333%
  &.is-2by3
    padding-top: 150%
  &.is-3by5
    padding-top: 166.6666%
  &.is-9by16
    padding-top: 177.7777%
  &.is-1by2
    padding-top: 200%
  &.is-1by3
    padding-top: 300%
  // Sizes
  @each $dimension in $dimensions
    &.is-#{$dimension}x#{$dimension}
      height: $dimension * 1px
      width: $dimension * 1px

$notification-background-color: $background !default
$notification-code-background-color: $scheme-main !default
$notification-radius: $radius !default
$notification-padding: 1.25rem 2.5rem 1.25rem 1.5rem !default

.notification
  @extend %block
  background-color: $notification-background-color
  border-radius: $notification-radius
  padding: $notification-padding
  position: relative
  a:not(.button):not(.dropdown-item)
    color: currentColor
    text-decoration: underline
  strong
    color: currentColor
  code,
  pre
    background: $notification-code-background-color
  pre code
    background: transparent
  & > .delete
    position: absolute
    right: 0.5rem
    top: 0.5rem
  .title,
  .subtitle,
  .content
    color: currentColor
  // Colors
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      background-color: $color
      color: $color-invert
      // If light and dark colors are provided
      @if length($pair) >= 4
        $color-light: nth($pair, 3)
        $color-dark: nth($pair, 4)
        &.is-light
          background-color: $color-light
          color: $color-dark

$progress-bar-background-color: $border-light !default
$progress-value-background-color: $text !default
$progress-border-radius: $radius-rounded !default

$progress-indeterminate-duration: 1.5s !default

.progress
  @extend %block
  -moz-appearance: none
  -webkit-appearance: none
  border: none
  border-radius: $progress-border-radius
  display: block
  height: $size-normal
  overflow: hidden
  padding: 0
  width: 100%
  &::-webkit-progress-bar
    background-color: $progress-bar-background-color
  &::-webkit-progress-value
    background-color: $progress-value-background-color
  &::-moz-progress-bar
    background-color: $progress-value-background-color
  &::-ms-fill
    background-color: $progress-value-background-color
    border: none
  // Colors
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    &.is-#{$name}
      &::-webkit-progress-value
        background-color: $color
      &::-moz-progress-bar
        background-color: $color
      &::-ms-fill
        background-color: $color
      &:indeterminate
        background-image: linear-gradient(to right, $color 30%, $progress-bar-background-color 30%)

  &:indeterminate
    animation-duration: $progress-indeterminate-duration
    animation-iteration-count: infinite
    animation-name: moveIndeterminate
    animation-timing-function: linear
    background-color: $progress-bar-background-color
    background-image: linear-gradient(to right, $text 30%, $progress-bar-background-color 30%)
    background-position: top left
    background-repeat: no-repeat
    background-size: 150% 150%
    &::-webkit-progress-bar
      background-color: transparent
    &::-moz-progress-bar
      background-color: transparent

  // Sizes
  &.is-small
    height: $size-small
  &.is-medium
    height: $size-medium
  &.is-large
    height: $size-large

@keyframes moveIndeterminate
  from
    background-position: 200% 0
  to
    background-position: -200% 0

$table-color: $text-strong !default
$table-background-color: $scheme-main !default

$table-cell-border: 1px solid $border !default
$table-cell-border-width: 0 0 1px !default
$table-cell-padding: 0.5em 0.75em !default
$table-cell-heading-color: $text-strong !default

$table-head-cell-border-width: 0 0 2px !default
$table-head-cell-color: $text-strong !default
$table-foot-cell-border-width: 2px 0 0 !default
$table-foot-cell-color: $text-strong !default

$table-head-background-color: transparent !default
$table-body-background-color: transparent !default
$table-foot-background-color: transparent !default

$table-row-hover-background-color: $scheme-main-bis !default

$table-row-active-background-color: $primary !default
$table-row-active-color: $primary-invert !default

$table-striped-row-even-background-color: $scheme-main-bis !default
$table-striped-row-even-hover-background-color: $scheme-main-ter !default

.table
  @extend %block
  background-color: $table-background-color
  color: $table-color
  td,
  th
    border: $table-cell-border
    border-width: $table-cell-border-width
    padding: $table-cell-padding
    vertical-align: top
    // Colors
    @each $name, $pair in $colors
      $color: nth($pair, 1)
      $color-invert: nth($pair, 2)
      &.is-#{$name}
        background-color: $color
        border-color: $color
        color: $color-invert
    // Modifiers
    &.is-narrow
      white-space: nowrap
      width: 1%
    &.is-selected
      background-color: $table-row-active-background-color
      color: $table-row-active-color
      a,
      strong
        color: currentColor
  th
    color: $table-cell-heading-color
    &:not([align])
      text-align: left
  tr
    &.is-selected
      background-color: $table-row-active-background-color
      color: $table-row-active-color
      a,
      strong
        color: currentColor
      td,
      th
        border-color: $table-row-active-color
        color: currentColor
  thead
    background-color: $table-head-background-color
    td,
    th
      border-width: $table-head-cell-border-width
      color: $table-head-cell-color
  tfoot
    background-color: $table-foot-background-color
    td,
    th
      border-width: $table-foot-cell-border-width
      color: $table-foot-cell-color
  tbody
    background-color: $table-body-background-color
    tr
      &:last-child
        td,
        th
          border-bottom-width: 0
  // Modifiers
  &.is-bordered
    td,
    th
      border-width: 1px
    tr
      &:last-child
        td,
        th
          border-bottom-width: 1px
  &.is-fullwidth
    width: 100%
  &.is-hoverable
    tbody
      tr:not(.is-selected)
        &:hover
          background-color: $table-row-hover-background-color
    &.is-striped
      tbody
        tr:not(.is-selected)
          &:hover
            background-color: $table-row-hover-background-color
            &:nth-child(even)
              background-color: $table-striped-row-even-hover-background-color
  &.is-narrow
    td,
    th
      padding: 0.25em 0.5em
  &.is-striped
    tbody
      tr:not(.is-selected)
        &:nth-child(even)
          background-color: $table-striped-row-even-background-color

.table-container
  @extend %block
  +overflow-touch
  overflow: auto
  overflow-y: hidden
  max-width: 100%

$tag-background-color: $background !default
$tag-color: $text !default
$tag-radius: $radius !default
$tag-delete-margin: 1px !default

.tags
  align-items: center
  display: flex
  flex-wrap: wrap
  justify-content: flex-start
  .tag
    margin-bottom: 0.5rem
    &:not(:last-child)
      margin-right: 0.5rem
  &:last-child
    margin-bottom: -0.5rem
  &:not(:last-child)
    margin-bottom: 1rem
  // Sizes
  &.are-medium
    .tag:not(.is-normal):not(.is-large)
      font-size: $size-normal
  &.are-large
    .tag:not(.is-normal):not(.is-medium)
      font-size: $size-medium
  &.is-centered
    justify-content: center
    .tag
      margin-right: 0.25rem
      margin-left: 0.25rem
  &.is-right
    justify-content: flex-end
    .tag
      &:not(:first-child)
        margin-left: 0.5rem
      &:not(:last-child)
        margin-right: 0
  &.has-addons
    .tag
      margin-right: 0
      &:not(:first-child)
        margin-left: 0
        border-bottom-left-radius: 0
        border-top-left-radius: 0
      &:not(:last-child)
        border-bottom-right-radius: 0
        border-top-right-radius: 0

.tag:not(body)
  align-items: center
  background-color: $tag-background-color
  border-radius: $tag-radius
  color: $tag-color
  display: inline-flex
  font-size: $size-small
  height: 2em
  justify-content: center
  line-height: 1.5
  padding-left: 0.75em
  padding-right: 0.75em
  white-space: nowrap
  .delete
    margin-left: 0.25rem
    margin-right: -0.375rem
  // Colors
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      background-color: $color
      color: $color-invert
      // If a light and dark colors are provided
      @if length($pair) > 3
        $color-light: nth($pair, 3)
        $color-dark: nth($pair, 4)
        &.is-light
          background-color: $color-light
          color: $color-dark
  // Sizes
  &.is-normal
    font-size: $size-small
  &.is-medium
    font-size: $size-normal
  &.is-large
    font-size: $size-medium
  .icon
    &:first-child:not(:last-child)
      margin-left: -0.375em
      margin-right: 0.1875em
    &:last-child:not(:first-child)
      margin-left: 0.1875em
      margin-right: -0.375em
    &:first-child:last-child
      margin-left: -0.375em
      margin-right: -0.375em
  // Modifiers
  &.is-delete
    margin-left: $tag-delete-margin
    padding: 0
    position: relative
    width: 2em
    &::before,
    &::after
      background-color: currentColor
      content: ""
      display: block
      left: 50%
      position: absolute
      top: 50%
      transform: translateX(-50%) translateY(-50%) rotate(45deg)
      transform-origin: center center
    &::before
      height: 1px
      width: 50%
    &::after
      height: 50%
      width: 1px
    &:hover,
    &:focus
      background-color: darken($tag-background-color, 5%)
    &:active
      background-color: darken($tag-background-color, 10%)
  &.is-rounded
    border-radius: $radius-rounded

a.tag
  &:hover
    text-decoration: underline

$title-color: $text-strong !default
$title-family: false !default
$title-size: $size-3 !default
$title-weight: $weight-semibold !default
$title-line-height: 1.125 !default
$title-strong-color: inherit !default
$title-strong-weight: inherit !default
$title-sub-size: 0.75em !default
$title-sup-size: 0.75em !default

$subtitle-color: $text !default
$subtitle-family: false !default
$subtitle-size: $size-5 !default
$subtitle-weight: $weight-normal !default
$subtitle-line-height: 1.25 !default
$subtitle-strong-color: $text-strong !default
$subtitle-strong-weight: $weight-semibold !default
$subtitle-negative-margin: -1.25rem !default

.title,
.subtitle
  @extend %block
  word-break: break-word
  em,
  span
    font-weight: inherit
  sub
    font-size: $title-sub-size
  sup
    font-size: $title-sup-size
  .tag
    vertical-align: middle

.title
  color: $title-color
  @if $title-family
    font-family: $title-family
  font-size: $title-size
  font-weight: $title-weight
  line-height: $title-line-height
  strong
    color: $title-strong-color
    font-weight: $title-strong-weight
  & + .highlight
    margin-top: -0.75rem
  &:not(.is-spaced) + .subtitle
    margin-top: $subtitle-negative-margin
  // Sizes
  @each $size in $sizes
    $i: index($sizes, $size)
    &.is-#{$i}
      font-size: $size

.subtitle
  color: $subtitle-color
  @if $subtitle-family
    font-family: $subtitle-family
  font-size: $subtitle-size
  font-weight: $subtitle-weight
  line-height: $subtitle-line-height
  strong
    color: $subtitle-strong-color
    font-weight: $subtitle-strong-weight
  &:not(.is-spaced) + .title
    margin-top: $subtitle-negative-margin
  // Sizes
  @each $size in $sizes
    $i: index($sizes, $size)
    &.is-#{$i}
      font-size: $size

.block
  @extend %block

.delete
  @extend %delete

.heading
  display: block
  font-size: 11px
  letter-spacing: 1px
  margin-bottom: 5px
  text-transform: uppercase

.highlight
  @extend %block
  font-weight: $weight-normal
  max-width: 100%
  overflow: hidden
  padding: 0
  pre
    overflow: auto
    max-width: 100%

.loader
  @extend %loader

.number
  align-items: center
  background-color: $background
  border-radius: $radius-rounded
  display: inline-flex
  font-size: $size-medium
  height: 2em
  justify-content: center
  margin-right: 1.5rem
  min-width: 2.5em
  padding: 0.25rem 0.5rem
  text-align: center
  vertical-align: top

$input-color: $text-strong !default
$input-background-color: $scheme-main !default
$input-border-color: $border !default
$input-height: $control-height !default
$input-shadow: inset 0 0.0625em 0.125em rgba($scheme-invert, 0.05) !default
$input-placeholder-color: bulmaRgba($input-color, 0.3) !default

$input-hover-color: $text-strong !default
$input-hover-border-color: $border-hover !default

$input-focus-color: $text-strong !default
$input-focus-border-color: $link !default
$input-focus-box-shadow-size: 0 0 0 0.125em !default
$input-focus-box-shadow-color: bulmaRgba($link, 0.25) !default

$input-disabled-color: $text-light !default
$input-disabled-background-color: $background !default
$input-disabled-border-color: $background !default
$input-disabled-placeholder-color: bulmaRgba($input-disabled-color, 0.3) !default

$input-arrow: $link !default

$input-icon-color: $border !default
$input-icon-active-color: $text !default

$input-radius: $radius !default

=input
  @extend %control
  background-color: $input-background-color
  border-color: $input-border-color
  border-radius: $input-radius
  color: $input-color
  +placeholder
    color: $input-placeholder-color
  &:hover,
  &.is-hovered
    border-color: $input-hover-border-color
  &:focus,
  &.is-focused,
  &:active,
  &.is-active
    border-color: $input-focus-border-color
    box-shadow: $input-focus-box-shadow-size $input-focus-box-shadow-color
  &[disabled],
  fieldset[disabled] &
    background-color: $input-disabled-background-color
    border-color: $input-disabled-border-color
    box-shadow: none
    color: $input-disabled-color
    +placeholder
      color: $input-disabled-placeholder-color

%input
  +input

$textarea-padding: $control-padding-horizontal !default
$textarea-max-height: 40em !default
$textarea-min-height: 8em !default

%input-textarea
  @extend %input
  box-shadow: $input-shadow
  max-width: 100%
  width: 100%
  &[readonly]
    box-shadow: none
  // Colors
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    &.is-#{$name}
      border-color: $color
      &:focus,
      &.is-focused,
      &:active,
      &.is-active
        box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
  // Sizes
  &.is-small
    +control-small
  &.is-medium
    +control-medium
  &.is-large
    +control-large
  // Modifiers
  &.is-fullwidth
    display: block
    width: 100%
  &.is-inline
    display: inline
    width: auto

.input
  @extend %input-textarea
  &.is-rounded
    border-radius: $radius-rounded
    padding-left: calc(#{$control-padding-horizontal} + 0.375em)
    padding-right: calc(#{$control-padding-horizontal} + 0.375em)
  &.is-static
    background-color: transparent
    border-color: transparent
    box-shadow: none
    padding-left: 0
    padding-right: 0

.textarea
  @extend %input-textarea
  display: block
  max-width: 100%
  min-width: 100%
  padding: $textarea-padding
  resize: vertical
  &:not([rows])
    max-height: $textarea-max-height
    min-height: $textarea-min-height
  &[rows]
    height: initial
  // Modifiers
  &.has-fixed-size
    resize: none

%checkbox-radio
  cursor: pointer
  display: inline-block
  line-height: 1.25
  position: relative
  input
    cursor: pointer
  &:hover
    color: $input-hover-color
  &[disabled],
  fieldset[disabled] &
    color: $input-disabled-color
    cursor: not-allowed

.checkbox
  @extend %checkbox-radio

.radio
  @extend %checkbox-radio
  & + .radio
    margin-left: 0.5em

.select
  display: inline-block
  max-width: 100%
  position: relative
  vertical-align: top
  &:not(.is-multiple)
    height: $input-height
  &:not(.is-multiple):not(.is-loading)
    &::after
      @extend %arrow
      border-color: $input-arrow
      right: 1.125em
      z-index: 4
  &.is-rounded
    select
      border-radius: $radius-rounded
      padding-left: 1em
  select
    @extend %input
    cursor: pointer
    display: block
    font-size: 1em
    max-width: 100%
    outline: none
    &::-ms-expand
      display: none
    &[disabled]:hover,
    fieldset[disabled] &:hover
      border-color: $input-disabled-border-color
    &:not([multiple])
      padding-right: 2.5em
    &[multiple]
      height: auto
      padding: 0
      option
        padding: 0.5em 1em
  // States
  &:not(.is-multiple):not(.is-loading):hover
    &::after
      border-color: $input-hover-color
  // Colors
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    &.is-#{$name}
      &:not(:hover)::after
        border-color: $color
      select
        border-color: $color
        &:hover,
        &.is-hovered
          border-color: bulmaDarken($color, 5%)
        &:focus,
        &.is-focused,
        &:active,
        &.is-active
          box-shadow: $input-focus-box-shadow-size bulmaRgba($color, 0.25)
  // Sizes
  &.is-small
    +control-small
  &.is-medium
    +control-medium
  &.is-large
    +control-large
  // Modifiers
  &.is-disabled
    &::after
      border-color: $input-disabled-color
  &.is-fullwidth
    width: 100%
    select
      width: 100%
  &.is-loading
    &::after
      @extend %loader
      margin-top: 0
      position: absolute
      right: 0.625em
      top: 0.625em
      transform: none
    &.is-small:after
      font-size: $size-small
    &.is-medium:after
      font-size: $size-medium
    &.is-large:after
      font-size: $size-large

$file-border-color: $border !default
$file-radius: $radius !default

$file-cta-background-color: $scheme-main-ter !default
$file-cta-color: $text !default
$file-cta-hover-color: $text-strong !default
$file-cta-active-color: $text-strong !default

$file-name-border-color: $border !default
$file-name-border-style: solid !default
$file-name-border-width: 1px 1px 1px 0 !default
$file-name-max-width: 16em !default

.file
  @extend %unselectable
  align-items: stretch
  display: flex
  justify-content: flex-start
  position: relative
  // Colors
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      .file-cta
        background-color: $color
        border-color: transparent
        color: $color-invert
      &:hover,
      &.is-hovered
        .file-cta
          background-color: bulmaDarken($color, 2.5%)
          border-color: transparent
          color: $color-invert
      &:focus,
      &.is-focused
        .file-cta
          border-color: transparent
          box-shadow: 0 0 0.5em bulmaRgba($color, 0.25)
          color: $color-invert
      &:active,
      &.is-active
        .file-cta
          background-color: bulmaDarken($color, 5%)
          border-color: transparent
          color: $color-invert
  // Sizes
  &.is-small
    font-size: $size-small
  &.is-medium
    font-size: $size-medium
    .file-icon
      .fa
        font-size: 21px
  &.is-large
    font-size: $size-large
    .file-icon
      .fa
        font-size: 28px
  // Modifiers
  &.has-name
    .file-cta
      border-bottom-right-radius: 0
      border-top-right-radius: 0
    .file-name
      border-bottom-left-radius: 0
      border-top-left-radius: 0
    &.is-empty
      .file-cta
        border-radius: $file-radius
      .file-name
        display: none
  &.is-boxed
    .file-label
      flex-direction: column
    .file-cta
      flex-direction: column
      height: auto
      padding: 1em 3em
    .file-name
      border-width: 0 1px 1px
    .file-icon
      height: 1.5em
      width: 1.5em
      .fa
        font-size: 21px
    &.is-small
      .file-icon .fa
        font-size: 14px
    &.is-medium
      .file-icon .fa
        font-size: 28px
    &.is-large
      .file-icon .fa
        font-size: 35px
    &.has-name
      .file-cta
        border-radius: $file-radius $file-radius 0 0
      .file-name
        border-radius: 0 0 $file-radius $file-radius
        border-width: 0 1px 1px
  &.is-centered
    justify-content: center
  &.is-fullwidth
    .file-label
      width: 100%
    .file-name
      flex-grow: 1
      max-width: none
  &.is-right
    justify-content: flex-end
    .file-cta
      border-radius: 0 $file-radius $file-radius 0
    .file-name
      border-radius: $file-radius 0 0 $file-radius
      border-width: 1px 0 1px 1px
      order: -1

.file-label
  align-items: stretch
  display: flex
  cursor: pointer
  justify-content: flex-start
  overflow: hidden
  position: relative
  &:hover
    .file-cta
      background-color: bulmaDarken($file-cta-background-color, 2.5%)
      color: $file-cta-hover-color
    .file-name
      border-color: bulmaDarken($file-name-border-color, 2.5%)
  &:active
    .file-cta
      background-color: bulmaDarken($file-cta-background-color, 5%)
      color: $file-cta-active-color
    .file-name
      border-color: bulmaDarken($file-name-border-color, 5%)

.file-input
  height: 100%
  left: 0
  opacity: 0
  outline: none
  position: absolute
  top: 0
  width: 100%

.file-cta,
.file-name
  @extend %control
  border-color: $file-border-color
  border-radius: $file-radius
  font-size: 1em
  padding-left: 1em
  padding-right: 1em
  white-space: nowrap

.file-cta
  background-color: $file-cta-background-color
  color: $file-cta-color

.file-name
  border-color: $file-name-border-color
  border-style: $file-name-border-style
  border-width: $file-name-border-width
  display: block
  max-width: $file-name-max-width
  overflow: hidden
  text-align: left
  text-overflow: ellipsis

.file-icon
  align-items: center
  display: flex
  height: 1em
  justify-content: center
  margin-right: 0.5em
  width: 1em
  .fa
    font-size: 14px

$label-color: $text-strong !default
$label-weight: $weight-bold !default

$help-size: $size-small !default

.label
  color: $label-color
  display: block
  font-size: $size-normal
  font-weight: $label-weight
  &:not(:last-child)
    margin-bottom: 0.5em
  // Sizes
  &.is-small
    font-size: $size-small
  &.is-medium
    font-size: $size-medium
  &.is-large
    font-size: $size-large

.help
  display: block
  font-size: $help-size
  margin-top: 0.25rem
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    &.is-#{$name}
      color: $color

// Containers

.field
  &:not(:last-child)
    margin-bottom: 0.75rem
  // Modifiers
  &.has-addons
    display: flex
    justify-content: flex-start
    .control
      &:not(:last-child)
        margin-right: -1px
      &:not(:first-child):not(:last-child)
        .button,
        .input,
        .select select
          border-radius: 0
      &:first-child:not(:only-child)
        .button,
        .input,
        .select select
          border-bottom-right-radius: 0
          border-top-right-radius: 0
      &:last-child:not(:only-child)
        .button,
        .input,
        .select select
          border-bottom-left-radius: 0
          border-top-left-radius: 0
      .button,
      .input,
      .select select
        &:not([disabled])
          &:hover,
          &.is-hovered
            z-index: 2
          &:focus,
          &.is-focused,
          &:active,
          &.is-active
            z-index: 3
            &:hover
              z-index: 4
      &.is-expanded
        flex-grow: 1
        flex-shrink: 1
    &.has-addons-centered
      justify-content: center
    &.has-addons-right
      justify-content: flex-end
    &.has-addons-fullwidth
      .control
        flex-grow: 1
        flex-shrink: 0
  &.is-grouped
    display: flex
    justify-content: flex-start
    & > .control
      flex-shrink: 0
      &:not(:last-child)
        margin-bottom: 0
        margin-right: 0.75rem
      &.is-expanded
        flex-grow: 1
        flex-shrink: 1
    &.is-grouped-centered
      justify-content: center
    &.is-grouped-right
      justify-content: flex-end
    &.is-grouped-multiline
      flex-wrap: wrap
      & > .control
        &:last-child,
        &:not(:last-child)
          margin-bottom: 0.75rem
      &:last-child
        margin-bottom: -0.75rem
      &:not(:last-child)
        margin-bottom: 0
  &.is-horizontal
    +tablet
      display: flex

.field-label
  .label
    font-size: inherit
  +mobile
    margin-bottom: 0.5rem
  +tablet
    flex-basis: 0
    flex-grow: 1
    flex-shrink: 0
    margin-right: 1.5rem
    text-align: right
    &.is-small
      font-size: $size-small
      padding-top: 0.375em
    &.is-normal
      padding-top: 0.375em
    &.is-medium
      font-size: $size-medium
      padding-top: 0.375em
    &.is-large
      font-size: $size-large
      padding-top: 0.375em

.field-body
  .field .field
    margin-bottom: 0
  +tablet
    display: flex
    flex-basis: 0
    flex-grow: 5
    flex-shrink: 1
    .field
      margin-bottom: 0
    & > .field
      flex-shrink: 1
      &:not(.is-narrow)
        flex-grow: 1
      &:not(:last-child)
        margin-right: 0.75rem

.control
  box-sizing: border-box
  clear: both
  font-size: $size-normal
  position: relative
  text-align: left
  // Modifiers
  &.has-icons-left,
  &.has-icons-right
    .input,
    .select
      &:focus
        & ~ .icon
          color: $input-icon-active-color
      &.is-small ~ .icon
        font-size: $size-small
      &.is-medium ~ .icon
        font-size: $size-medium
      &.is-large ~ .icon
        font-size: $size-large
    .icon
      color: $input-icon-color
      height: $input-height
      pointer-events: none
      position: absolute
      top: 0
      width: $input-height
      z-index: 4
  &.has-icons-left
    .input,
    .select select
      padding-left: $input-height
    .icon.is-left
      left: 0
  &.has-icons-right
    .input,
    .select select
      padding-right: $input-height
    .icon.is-right
      right: 0
  &.is-loading
    &::after
      @extend %loader
      position: absolute !important
      right: 0.625em
      top: 0.625em
      z-index: 4
    &.is-small:after
      font-size: $size-small
    &.is-medium:after
      font-size: $size-medium
    &.is-large:after
      font-size: $size-large

$breadcrumb-item-color: $link !default
$breadcrumb-item-hover-color: $link-hover !default
$breadcrumb-item-active-color: $text-strong !default

$breadcrumb-item-padding-vertical: 0 !default
$breadcrumb-item-padding-horizontal: 0.75em !default

$breadcrumb-item-separator-color: $border-hover !default

.breadcrumb
  @extend %block
  @extend %unselectable
  font-size: $size-normal
  white-space: nowrap
  a
    align-items: center
    color: $breadcrumb-item-color
    display: flex
    justify-content: center
    padding: $breadcrumb-item-padding-vertical $breadcrumb-item-padding-horizontal
    &:hover
      color: $breadcrumb-item-hover-color
  li
    align-items: center
    display: flex
    &:first-child a
      padding-left: 0
    &.is-active
      a
        color: $breadcrumb-item-active-color
        cursor: default
        pointer-events: none
    & + li::before
      color: $breadcrumb-item-separator-color
      content: "\0002f"
  ul,
  ol
    align-items: flex-start
    display: flex
    flex-wrap: wrap
    justify-content: flex-start
  .icon
    &:first-child
      margin-right: 0.5em
    &:last-child
      margin-left: 0.5em
  // Alignment
  &.is-centered
    ol,
    ul
      justify-content: center
  &.is-right
    ol,
    ul
      justify-content: flex-end
  // Sizes
  &.is-small
    font-size: $size-small
  &.is-medium
    font-size: $size-medium
  &.is-large
    font-size: $size-large
  // Styles
  &.has-arrow-separator
    li + li::before
      content: "\02192"
  &.has-bullet-separator
    li + li::before
      content: "\02022"
  &.has-dot-separator
    li + li::before
      content: "\000b7"
  &.has-succeeds-separator
    li + li::before
      content: "\0227B"

$card-color: $text !default
$card-background-color: $scheme-main !default
$card-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default

$card-header-background-color: transparent !default
$card-header-color: $text-strong !default
$card-header-padding: 0.75rem 1rem !default
$card-header-shadow: 0 0.125em 0.25em rgba($scheme-invert, 0.1) !default
$card-header-weight: $weight-bold !default

$card-content-background-color: transparent !default
$card-content-padding: 1.5rem !default

$card-footer-background-color: transparent !default
$card-footer-border-top: 1px solid $border-light !default
$card-footer-padding: 0.75rem !default

$card-media-margin: $block-spacing !default

.card
  background-color: $card-background-color
  box-shadow: $card-shadow
  color: $card-color
  max-width: 100%
  position: relative

.card-header
  background-color: $card-header-background-color
  align-items: stretch
  box-shadow: $card-header-shadow
  display: flex

.card-header-title
  align-items: center
  color: $card-header-color
  display: flex
  flex-grow: 1
  font-weight: $card-header-weight
  padding: $card-header-padding
  &.is-centered
    justify-content: center

.card-header-icon
  align-items: center
  cursor: pointer
  display: flex
  justify-content: center
  padding: $card-header-padding

.card-image
  display: block
  position: relative

.card-content
  background-color: $card-content-background-color
  padding: $card-content-padding

.card-footer
  background-color: $card-footer-background-color
  border-top: $card-footer-border-top
  align-items: stretch
  display: flex

.card-footer-item
  align-items: center
  display: flex
  flex-basis: 0
  flex-grow: 1
  flex-shrink: 0
  justify-content: center
  padding: $card-footer-padding
  &:not(:last-child)
    border-right: $card-footer-border-top

// Combinations

.card
  .media:not(:last-child)
    margin-bottom: $card-media-margin

$dropdown-menu-min-width: 12rem !default

$dropdown-content-background-color: $scheme-main !default
$dropdown-content-arrow: $link !default
$dropdown-content-offset: 4px !default
$dropdown-content-padding-bottom: 0.5rem !default
$dropdown-content-padding-top: 0.5rem !default
$dropdown-content-radius: $radius !default
$dropdown-content-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default
$dropdown-content-z: 20 !default

$dropdown-item-color: $text !default
$dropdown-item-hover-color: $scheme-invert !default
$dropdown-item-hover-background-color: $background !default
$dropdown-item-active-color: $link-invert !default
$dropdown-item-active-background-color: $link !default

$dropdown-divider-background-color: $border-light !default

.dropdown
  display: inline-flex
  position: relative
  vertical-align: top
  &.is-active,
  &.is-hoverable:hover
    .dropdown-menu
      display: block
  &.is-right
    .dropdown-menu
      left: auto
      right: 0
  &.is-up
    .dropdown-menu
      bottom: 100%
      padding-bottom: $dropdown-content-offset
      padding-top: initial
      top: auto

.dropdown-menu
  display: none
  left: 0
  min-width: $dropdown-menu-min-width
  padding-top: $dropdown-content-offset
  position: absolute
  top: 100%
  z-index: $dropdown-content-z

.dropdown-content
  background-color: $dropdown-content-background-color
  border-radius: $dropdown-content-radius
  box-shadow: $dropdown-content-shadow
  padding-bottom: $dropdown-content-padding-bottom
  padding-top: $dropdown-content-padding-top

.dropdown-item
  color: $dropdown-item-color
  display: block
  font-size: 0.875rem
  line-height: 1.5
  padding: 0.375rem 1rem
  position: relative

a.dropdown-item,
button.dropdown-item
  padding-right: 3rem
  text-align: left
  white-space: nowrap
  width: 100%
  &:hover
    background-color: $dropdown-item-hover-background-color
    color: $dropdown-item-hover-color
  &.is-active
    background-color: $dropdown-item-active-background-color
    color: $dropdown-item-active-color

.dropdown-divider
  background-color: $dropdown-divider-background-color
  border: none
  display: block
  height: 1px
  margin: 0.5rem 0

$level-item-spacing: ($block-spacing / 2) !default

.level
  @extend %block
  align-items: center
  justify-content: space-between
  code
    border-radius: $radius
  img
    display: inline-block
    vertical-align: top
  // Modifiers
  &.is-mobile
    display: flex
    .level-left,
    .level-right
      display: flex
    .level-left + .level-right
      margin-top: 0
    .level-item
      &:not(:last-child)
        margin-bottom: 0
        margin-right: $level-item-spacing
      &:not(.is-narrow)
        flex-grow: 1
  // Responsiveness
  +tablet
    display: flex
    & > .level-item
      &:not(.is-narrow)
        flex-grow: 1

.level-item
  align-items: center
  display: flex
  flex-basis: auto
  flex-grow: 0
  flex-shrink: 0
  justify-content: center
  .title,
  .subtitle
    margin-bottom: 0
  // Responsiveness
  +mobile
    &:not(:last-child)
      margin-bottom: $level-item-spacing

.level-left,
.level-right
  flex-basis: auto
  flex-grow: 0
  flex-shrink: 0
  .level-item
    // Modifiers
    &.is-flexible
      flex-grow: 1
    // Responsiveness
    +tablet
      &:not(:last-child)
        margin-right: $level-item-spacing

.level-left
  align-items: center
  justify-content: flex-start
  // Responsiveness
  +mobile
    & + .level-right
      margin-top: 1.5rem
  +tablet
    display: flex

.level-right
  align-items: center
  justify-content: flex-end
  // Responsiveness
  +tablet
    display: flex

$list-background-color: $scheme-main !default
$list-shadow: 0 2px 3px rgba($scheme-invert, 0.1), 0 0 0 1px rgba($scheme-invert, 0.1) !default
$list-radius: $radius !default

$list-item-border: 1px solid $border !default
$list-item-color: $text !default
$list-item-active-background-color: $link !default
$list-item-active-color: $link-invert !default
$list-item-hover-background-color: $background !default

.list
  @extend %block
  background-color: $list-background-color
  border-radius: $list-radius
  box-shadow: $list-shadow
  // &.is-hoverable > .list-item:hover:not(.is-active)
  //   background-color: $list-item-hover-background-color
  //   cursor: pointer

.list-item
  display: block
  padding: 0.5em 1em
  &:not(a)
    color: $list-item-color
  &:first-child
    border-top-left-radius: $list-radius
    border-top-right-radius: $list-radius
  &:last-child
    border-bottom-left-radius: $list-radius
    border-bottom-right-radius: $list-radius
  &:not(:last-child)
    border-bottom: $list-item-border
  &.is-active
    background-color: $list-item-active-background-color
    color: $list-item-active-color

a.list-item
  background-color: $list-item-hover-background-color
  cursor: pointer

$media-border-color: bulmaRgba($border, 0.5) !default

.media
  align-items: flex-start
  display: flex
  text-align: left
  .content:not(:last-child)
    margin-bottom: 0.75rem
  .media
    border-top: 1px solid $media-border-color
    display: flex
    padding-top: 0.75rem
    .content:not(:last-child),
    .control:not(:last-child)
      margin-bottom: 0.5rem
    .media
      padding-top: 0.5rem
      & + .media
        margin-top: 0.5rem
  & + .media
    border-top: 1px solid $media-border-color
    margin-top: 1rem
    padding-top: 1rem
  // Sizes
  &.is-large
    & + .media
      margin-top: 1.5rem
      padding-top: 1.5rem

.media-left,
.media-right
  flex-basis: auto
  flex-grow: 0
  flex-shrink: 0

.media-left
  margin-right: 1rem

.media-right
  margin-left: 1rem

.media-content
  flex-basis: auto
  flex-grow: 1
  flex-shrink: 1
  text-align: left

+mobile
  .media-content
    overflow-x: auto

$menu-item-color: $text !default
$menu-item-radius: $radius-small !default
$menu-item-hover-color: $text-strong !default
$menu-item-hover-background-color: $background !default
$menu-item-active-color: $link-invert !default
$menu-item-active-background-color: $link !default

$menu-list-border-left: 1px solid $border !default
$menu-list-line-height: 1.25 !default
$menu-list-link-padding: 0.5em 0.75em !default
$menu-nested-list-margin: 0.75em !default
$menu-nested-list-padding-left: 0.75em !default

$menu-label-color: $text-light !default
$menu-label-font-size: 0.75em !default
$menu-label-letter-spacing: 0.1em !default
$menu-label-spacing: 1em !default

.menu
  font-size: $size-normal
  // Sizes
  &.is-small
    font-size: $size-small
  &.is-medium
    font-size: $size-medium
  &.is-large
    font-size: $size-large

.menu-list
  line-height: $menu-list-line-height
  a
    border-radius: $menu-item-radius
    color: $menu-item-color
    display: block
    padding: $menu-list-link-padding
    &:hover
      background-color: $menu-item-hover-background-color
      color: $menu-item-hover-color
    // Modifiers
    &.is-active
      background-color: $menu-item-active-background-color
      color: $menu-item-active-color
  li
    ul
      border-left: $menu-list-border-left
      margin: $menu-nested-list-margin
      padding-left: $menu-nested-list-padding-left

.menu-label
  color: $menu-label-color
  font-size: $menu-label-font-size
  letter-spacing: $menu-label-letter-spacing
  text-transform: uppercase
  &:not(:first-child)
    margin-top: $menu-label-spacing
  &:not(:last-child)
    margin-bottom: $menu-label-spacing

$message-background-color: $background !default
$message-radius: $radius !default

$message-header-background-color: $text !default
$message-header-color: $text-invert !default
$message-header-weight: $weight-bold !default
$message-header-padding: 0.75em 1em !default
$message-header-radius: $radius !default

$message-body-border-color: $border !default
$message-body-border-width: 0 0 0 4px !default
$message-body-color: $text !default
$message-body-padding: 1.25em 1.5em !default
$message-body-radius: $radius !default

$message-body-pre-background-color: $scheme-main !default
$message-body-pre-code-background-color: transparent !default

$message-header-body-border-width: 0 !default
$message-colors: $colors !default

.message
  @extend %block
  background-color: $message-background-color
  border-radius: $message-radius
  font-size: $size-normal
  strong
    color: currentColor
  a:not(.button):not(.tag):not(.dropdown-item)
    color: currentColor
    text-decoration: underline
  // Sizes
  &.is-small
    font-size: $size-small
  &.is-medium
    font-size: $size-medium
  &.is-large
    font-size: $size-large
  // Colors
  @each $name, $components in $message-colors
    $color: nth($components, 1)
    $color-invert: nth($components, 2)
    $color-light: null
    $color-dark: null

    @if length($components) >= 3
      $color-light: nth($components, 3)
      @if length($components) >= 4
        $color-dark: nth($components, 4)
      @else
        $color-luminance: colorLuminance($color)
        $darken-percentage: $color-luminance * 70%
        $desaturate-percentage: $color-luminance * 30%
        $color-dark: desaturate(darken($color, $darken-percentage), $desaturate-percentage)
    @else
      $color-lightning: max((100% - lightness($color)) - 2%, 0%)
      $color-light: lighten($color, $color-lightning)

    &.is-#{$name}
      background-color: $color-light
      .message-header
        background-color: $color
        color: $color-invert
      .message-body
        border-color: $color
        color: $color-dark

.message-header
  align-items: center
  background-color: $message-header-background-color
  border-radius: $message-header-radius $message-header-radius 0 0
  color: $message-header-color
  display: flex
  font-weight: $message-header-weight
  justify-content: space-between
  line-height: 1.25
  padding: $message-header-padding
  position: relative
  .delete
    flex-grow: 0
    flex-shrink: 0
    margin-left: 0.75em
  & + .message-body
    border-width: $message-header-body-border-width
    border-top-left-radius: 0
    border-top-right-radius: 0

.message-body
  border-color: $message-body-border-color
  border-radius: $message-body-radius
  border-style: solid
  border-width: $message-body-border-width
  color: $message-body-color
  padding: $message-body-padding
  code,
  pre
    background-color: $message-body-pre-background-color
  pre code
    background-color: $message-body-pre-code-background-color

$modal-z: 40 !default

$modal-background-background-color: bulmaRgba($scheme-invert, 0.86) !default

$modal-content-width: 640px !default
$modal-content-margin-mobile: 20px !default
$modal-content-spacing-mobile: 160px !default
$modal-content-spacing-tablet: 40px !default

$modal-close-dimensions: 40px !default
$modal-close-right: 20px !default
$modal-close-top: 20px !default

$modal-card-spacing: 40px !default

$modal-card-head-background-color: $background !default
$modal-card-head-border-bottom: 1px solid $border !default
$modal-card-head-padding: 20px !default
$modal-card-head-radius: $radius-large !default

$modal-card-title-color: $text-strong !default
$modal-card-title-line-height: 1 !default
$modal-card-title-size: $size-4 !default

$modal-card-foot-radius: $radius-large !default
$modal-card-foot-border-top: 1px solid $border !default

$modal-card-body-background-color: $scheme-main !default
$modal-card-body-padding: 20px !default

.modal
  @extend %overlay
  align-items: center
  display: none
  flex-direction: column
  justify-content: center
  overflow: hidden
  position: fixed
  z-index: $modal-z
  // Modifiers
  &.is-active
    display: flex

.modal-background
  @extend %overlay
  background-color: $modal-background-background-color

.modal-content,
.modal-card
  margin: 0 $modal-content-margin-mobile
  max-height: calc(100vh - #{$modal-content-spacing-mobile})
  overflow: auto
  position: relative
  width: 100%
  // Responsiveness
  +tablet
    margin: 0 auto
    max-height: calc(100vh - #{$modal-content-spacing-tablet})
    width: $modal-content-width

.modal-close
  @extend %delete
  background: none
  height: $modal-close-dimensions
  position: fixed
  right: $modal-close-right
  top: $modal-close-top
  width: $modal-close-dimensions

.modal-card
  display: flex
  flex-direction: column
  max-height: calc(100vh - #{$modal-card-spacing})
  overflow: hidden
  -ms-overflow-y: visible

.modal-card-head,
.modal-card-foot
  align-items: center
  background-color: $modal-card-head-background-color
  display: flex
  flex-shrink: 0
  justify-content: flex-start
  padding: $modal-card-head-padding
  position: relative

.modal-card-head
  border-bottom: $modal-card-head-border-bottom
  border-top-left-radius: $modal-card-head-radius
  border-top-right-radius: $modal-card-head-radius

.modal-card-title
  color: $modal-card-title-color
  flex-grow: 1
  flex-shrink: 0
  font-size: $modal-card-title-size
  line-height: $modal-card-title-line-height

.modal-card-foot
  border-bottom-left-radius: $modal-card-foot-radius
  border-bottom-right-radius: $modal-card-foot-radius
  border-top: $modal-card-foot-border-top
  .button
    &:not(:last-child)
      margin-right: 0.5em

.modal-card-body
  +overflow-touch
  background-color: $modal-card-body-background-color
  flex-grow: 1
  flex-shrink: 1
  overflow: auto
  padding: $modal-card-body-padding

$navbar-background-color: $scheme-main !default
$navbar-box-shadow-size: 0 2px 0 0 !default
$navbar-box-shadow-color: $background !default
$navbar-height: 3.25rem !default
$navbar-padding-vertical: 1rem !default
$navbar-padding-horizontal: 2rem !default
$navbar-z: 30 !default
$navbar-fixed-z: 30 !default

$navbar-item-color: $text !default
$navbar-item-hover-color: $link !default
$navbar-item-hover-background-color: $scheme-main-bis !default
$navbar-item-active-color: $scheme-invert !default
$navbar-item-active-background-color: transparent !default
$navbar-item-img-max-height: 1.75rem !default

$navbar-burger-color: $navbar-item-color !default

$navbar-tab-hover-background-color: transparent !default
$navbar-tab-hover-border-bottom-color: $link !default
$navbar-tab-active-color: $link !default
$navbar-tab-active-background-color: transparent !default
$navbar-tab-active-border-bottom-color: $link !default
$navbar-tab-active-border-bottom-style: solid !default
$navbar-tab-active-border-bottom-width: 3px !default

$navbar-dropdown-background-color: $scheme-main !default
$navbar-dropdown-border-top: 2px solid $border !default
$navbar-dropdown-offset: -4px !default
$navbar-dropdown-arrow: $link !default
$navbar-dropdown-radius: $radius-large !default
$navbar-dropdown-z: 20 !default

$navbar-dropdown-boxed-radius: $radius-large !default
$navbar-dropdown-boxed-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1), 0 0 0 1px bulmaRgba($scheme-invert, 0.1) !default

$navbar-dropdown-item-hover-color: $scheme-invert !default
$navbar-dropdown-item-hover-background-color: $background !default
$navbar-dropdown-item-active-color: $link !default
$navbar-dropdown-item-active-background-color: $background !default

$navbar-divider-background-color: $background !default
$navbar-divider-height: 2px !default

$navbar-bottom-box-shadow-size: 0 -2px 0 0 !default

$navbar-breakpoint: $desktop !default

=navbar-fixed
  left: 0
  position: fixed
  right: 0
  z-index: $navbar-fixed-z

.navbar
  background-color: $navbar-background-color
  min-height: $navbar-height
  position: relative
  z-index: $navbar-z
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      background-color: $color
      color: $color-invert
      .navbar-brand
        & > .navbar-item,
        .navbar-link
          color: $color-invert
        & > a.navbar-item,
        .navbar-link
          &:focus,
          &:hover,
          &.is-active
            background-color: bulmaDarken($color, 5%)
            color: $color-invert
        .navbar-link
          &::after
            border-color: $color-invert
      .navbar-burger
        color: $color-invert
      +from($navbar-breakpoint)
        .navbar-start,
        .navbar-end
          & > .navbar-item,
          .navbar-link
            color: $color-invert
          & > a.navbar-item,
          .navbar-link
            &:focus,
            &:hover,
            &.is-active
              background-color: bulmaDarken($color, 5%)
              color: $color-invert
          .navbar-link
            &::after
              border-color: $color-invert
        .navbar-item.has-dropdown:focus .navbar-link,
        .navbar-item.has-dropdown:hover .navbar-link,
        .navbar-item.has-dropdown.is-active .navbar-link
          background-color: bulmaDarken($color, 5%)
          color: $color-invert
        .navbar-dropdown
          a.navbar-item
            &.is-active
              background-color: $color
              color: $color-invert
  & > .container
    align-items: stretch
    display: flex
    min-height: $navbar-height
    width: 100%
  &.has-shadow
    box-shadow: $navbar-box-shadow-size $navbar-box-shadow-color
  &.is-fixed-bottom,
  &.is-fixed-top
    +navbar-fixed
  &.is-fixed-bottom
    bottom: 0
    &.has-shadow
      box-shadow: $navbar-bottom-box-shadow-size $navbar-box-shadow-color
  &.is-fixed-top
    top: 0

html,
body
  &.has-navbar-fixed-top
    padding-top: $navbar-height
  &.has-navbar-fixed-bottom
    padding-bottom: $navbar-height

.navbar-brand,
.navbar-tabs
  align-items: stretch
  display: flex
  flex-shrink: 0
  min-height: $navbar-height

.navbar-brand
  a.navbar-item
    &:focus,
    &:hover
      background-color: transparent

.navbar-tabs
  +overflow-touch
  max-width: 100vw
  overflow-x: auto
  overflow-y: hidden

.navbar-burger
  color: $navbar-burger-color
  +hamburger($navbar-height)
  margin-left: auto

.navbar-menu
  display: none

.navbar-item,
.navbar-link
  color: $navbar-item-color
  display: block
  line-height: 1.5
  padding: 0.5rem 0.75rem
  position: relative
  .icon
    &:only-child
      margin-left: -0.25rem
      margin-right: -0.25rem

a.navbar-item,
.navbar-link
  cursor: pointer
  &:focus,
  &:focus-within,
  &:hover,
  &.is-active
    background-color: $navbar-item-hover-background-color
    color: $navbar-item-hover-color

.navbar-item
  flex-grow: 0
  flex-shrink: 0
  img
    max-height: $navbar-item-img-max-height
  &.has-dropdown
    padding: 0
  &.is-expanded
    flex-grow: 1
    flex-shrink: 1
  &.is-tab
    border-bottom: 1px solid transparent
    min-height: $navbar-height
    padding-bottom: calc(0.5rem - 1px)
    &:focus,
    &:hover
      background-color: $navbar-tab-hover-background-color
      border-bottom-color: $navbar-tab-hover-border-bottom-color
    &.is-active
      background-color: $navbar-tab-active-background-color
      border-bottom-color: $navbar-tab-active-border-bottom-color
      border-bottom-style: $navbar-tab-active-border-bottom-style
      border-bottom-width: $navbar-tab-active-border-bottom-width
      color: $navbar-tab-active-color
      padding-bottom: calc(0.5rem - #{$navbar-tab-active-border-bottom-width})

.navbar-content
  flex-grow: 1
  flex-shrink: 1

.navbar-link:not(.is-arrowless)
  padding-right: 2.5em
  &::after
    @extend %arrow
    border-color: $navbar-dropdown-arrow
    margin-top: -0.375em
    right: 1.125em

.navbar-dropdown
  font-size: 0.875rem
  padding-bottom: 0.5rem
  padding-top: 0.5rem
  .navbar-item
    padding-left: 1.5rem
    padding-right: 1.5rem

.navbar-divider
  background-color: $navbar-divider-background-color
  border: none
  display: none
  height: $navbar-divider-height
  margin: 0.5rem 0

+until($navbar-breakpoint)
  .navbar > .container
    display: block
  .navbar-brand,
  .navbar-tabs
    .navbar-item
      align-items: center
      display: flex
  .navbar-link
    &::after
      display: none
  .navbar-menu
    background-color: $navbar-background-color
    box-shadow: 0 8px 16px bulmaRgba($scheme-invert, 0.1)
    padding: 0.5rem 0
    &.is-active
      display: block
  // Fixed navbar
  .navbar
    &.is-fixed-bottom-touch,
    &.is-fixed-top-touch
      +navbar-fixed
    &.is-fixed-bottom-touch
      bottom: 0
      &.has-shadow
        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
    &.is-fixed-top-touch
      top: 0
    &.is-fixed-top,
    &.is-fixed-top-touch
      .navbar-menu
        +overflow-touch
        max-height: calc(100vh - #{$navbar-height})
        overflow: auto
  html,
  body
    &.has-navbar-fixed-top-touch
      padding-top: $navbar-height
    &.has-navbar-fixed-bottom-touch
      padding-bottom: $navbar-height

+from($navbar-breakpoint)
  .navbar,
  .navbar-menu,
  .navbar-start,
  .navbar-end
    align-items: stretch
    display: flex
  .navbar
    min-height: $navbar-height
    &.is-spaced
      padding: $navbar-padding-vertical $navbar-padding-horizontal
      .navbar-start,
      .navbar-end
        align-items: center
      a.navbar-item,
      .navbar-link
        border-radius: $radius
    &.is-transparent
      a.navbar-item,
      .navbar-link
        &:focus,
        &:hover,
        &.is-active
          background-color: transparent !important
      .navbar-item.has-dropdown
        &.is-active,
        &.is-hoverable:focus,
        &.is-hoverable:focus-within,
        &.is-hoverable:hover
          .navbar-link
            background-color: transparent !important
      .navbar-dropdown
        a.navbar-item
          &:focus,
          &:hover
            background-color: $navbar-dropdown-item-hover-background-color
            color: $navbar-dropdown-item-hover-color
          &.is-active
            background-color: $navbar-dropdown-item-active-background-color
            color: $navbar-dropdown-item-active-color
  .navbar-burger
    display: none
  .navbar-item,
  .navbar-link
    align-items: center
    display: flex
  .navbar-item
    &.has-dropdown
      align-items: stretch
    &.has-dropdown-up
      .navbar-link::after
        transform: rotate(135deg) translate(0.25em, -0.25em)
      .navbar-dropdown
        border-bottom: $navbar-dropdown-border-top
        border-radius: $navbar-dropdown-radius $navbar-dropdown-radius 0 0
        border-top: none
        bottom: 100%
        box-shadow: 0 -8px 8px bulmaRgba($scheme-invert, 0.1)
        top: auto
    &.is-active,
    &.is-hoverable:focus,
    &.is-hoverable:focus-within,
    &.is-hoverable:hover
      .navbar-dropdown
        display: block
        .navbar.is-spaced &,
        &.is-boxed
          opacity: 1
          pointer-events: auto
          transform: translateY(0)
  .navbar-menu
    flex-grow: 1
    flex-shrink: 0
  .navbar-start
    justify-content: flex-start
    margin-right: auto
  .navbar-end
    justify-content: flex-end
    margin-left: auto
  .navbar-dropdown
    background-color: $navbar-dropdown-background-color
    border-bottom-left-radius: $navbar-dropdown-radius
    border-bottom-right-radius: $navbar-dropdown-radius
    border-top: $navbar-dropdown-border-top
    box-shadow: 0 8px 8px bulmaRgba($scheme-invert, 0.1)
    display: none
    font-size: 0.875rem
    left: 0
    min-width: 100%
    position: absolute
    top: 100%
    z-index: $navbar-dropdown-z
    .navbar-item
      padding: 0.375rem 1rem
      white-space: nowrap
    a.navbar-item
      padding-right: 3rem
      &:focus,
      &:hover
        background-color: $navbar-dropdown-item-hover-background-color
        color: $navbar-dropdown-item-hover-color
      &.is-active
        background-color: $navbar-dropdown-item-active-background-color
        color: $navbar-dropdown-item-active-color
    .navbar.is-spaced &,
    &.is-boxed
      border-radius: $navbar-dropdown-boxed-radius
      border-top: none
      box-shadow: $navbar-dropdown-boxed-shadow
      display: block
      opacity: 0
      pointer-events: none
      top: calc(100% + (#{$navbar-dropdown-offset}))
      transform: translateY(-5px)
      transition-duration: $speed
      transition-property: opacity, transform
    &.is-right
      left: auto
      right: 0
  .navbar-divider
    display: block
  .navbar > .container,
  .container > .navbar
    .navbar-brand
      margin-left: -.75rem
    .navbar-menu
      margin-right: -.75rem
  // Fixed navbar
  .navbar
    &.is-fixed-bottom-desktop,
    &.is-fixed-top-desktop
      +navbar-fixed
    &.is-fixed-bottom-desktop
      bottom: 0
      &.has-shadow
        box-shadow: 0 -2px 3px bulmaRgba($scheme-invert, 0.1)
    &.is-fixed-top-desktop
      top: 0
  html,
  body
    &.has-navbar-fixed-top-desktop
      padding-top: $navbar-height
    &.has-navbar-fixed-bottom-desktop
      padding-bottom: $navbar-height
    &.has-spaced-navbar-fixed-top
      padding-top: $navbar-height + ($navbar-padding-vertical * 2)
    &.has-spaced-navbar-fixed-bottom
      padding-bottom: $navbar-height + ($navbar-padding-vertical * 2)
  // Hover/Active states
  a.navbar-item,
  .navbar-link
    &.is-active
      color: $navbar-item-active-color
    &.is-active:not(:focus):not(:hover)
      background-color: $navbar-item-active-background-color
  .navbar-item.has-dropdown
    &:focus,
    &:hover,
    &.is-active
      .navbar-link
        background-color: $navbar-item-hover-background-color

// Combination

.hero
  &.is-fullheight-with-navbar
    min-height: calc(100vh - #{$navbar-height})

$pagination-color: $text-strong !default
$pagination-border-color: $border !default
$pagination-margin: -0.25rem !default
$pagination-min-width: $control-height !default

$pagination-item-font-size: 1em !default
$pagination-item-margin: 0.25rem !default
$pagination-item-padding-left: 0.5em !default
$pagination-item-padding-right: 0.5em !default

$pagination-hover-color: $link-hover !default
$pagination-hover-border-color: $link-hover-border !default

$pagination-focus-color: $link-focus !default
$pagination-focus-border-color: $link-focus-border !default

$pagination-active-color: $link-active !default
$pagination-active-border-color: $link-active-border !default

$pagination-disabled-color: $text-light !default
$pagination-disabled-background-color: $border !default
$pagination-disabled-border-color: $border !default

$pagination-current-color: $link-invert !default
$pagination-current-background-color: $link !default
$pagination-current-border-color: $link !default

$pagination-ellipsis-color: $grey-light !default

$pagination-shadow-inset: inset 0 1px 2px rgba($scheme-invert, 0.2)

.pagination
  @extend %block
  font-size: $size-normal
  margin: $pagination-margin
  // Sizes
  &.is-small
    font-size: $size-small
  &.is-medium
    font-size: $size-medium
  &.is-large
    font-size: $size-large
  &.is-rounded
    .pagination-previous,
    .pagination-next
      padding-left: 1em
      padding-right: 1em
      border-radius: $radius-rounded
    .pagination-link
      border-radius: $radius-rounded

.pagination,
.pagination-list
  align-items: center
  display: flex
  justify-content: center
  text-align: center

.pagination-previous,
.pagination-next,
.pagination-link,
.pagination-ellipsis
  @extend %control
  @extend %unselectable
  font-size: $pagination-item-font-size
  justify-content: center
  margin: $pagination-item-margin
  padding-left: $pagination-item-padding-left
  padding-right: $pagination-item-padding-right
  text-align: center

.pagination-previous,
.pagination-next,
.pagination-link
  border-color: $pagination-border-color
  color: $pagination-color
  min-width: $pagination-min-width
  &:hover
    border-color: $pagination-hover-border-color
    color: $pagination-hover-color
  &:focus
    border-color: $pagination-focus-border-color
  &:active
    box-shadow: $pagination-shadow-inset
  &[disabled]
    background-color: $pagination-disabled-background-color
    border-color: $pagination-disabled-border-color
    box-shadow: none
    color: $pagination-disabled-color
    opacity: 0.5

.pagination-previous,
.pagination-next
  padding-left: 0.75em
  padding-right: 0.75em
  white-space: nowrap

.pagination-link
  &.is-current
    background-color: $pagination-current-background-color
    border-color: $pagination-current-border-color
    color: $pagination-current-color

.pagination-ellipsis
  color: $pagination-ellipsis-color
  pointer-events: none

.pagination-list
  flex-wrap: wrap

+mobile
  .pagination
    flex-wrap: wrap
  .pagination-previous,
  .pagination-next
    flex-grow: 1
    flex-shrink: 1
  .pagination-list
    li
      flex-grow: 1
      flex-shrink: 1

+tablet
  .pagination-list
    flex-grow: 1
    flex-shrink: 1
    justify-content: flex-start
    order: 1
  .pagination-previous
    order: 2
  .pagination-next
    order: 3
  .pagination
    justify-content: space-between
    &.is-centered
      .pagination-previous
        order: 1
      .pagination-list
        justify-content: center
        order: 2
      .pagination-next
        order: 3
    &.is-right
      .pagination-previous
        order: 1
      .pagination-next
        order: 2
      .pagination-list
        justify-content: flex-end
        order: 3

$panel-margin: $block-spacing !default
$panel-item-border: 1px solid $border-light !default
$panel-radius: $radius-large !default
$panel-shadow: 0 0.5em 1em -0.125em rgba($scheme-invert, 0.1), 0 0px 0 1px rgba($scheme-invert, 0.02) !default

$panel-heading-background-color: $border-light !default
$panel-heading-color: $text-strong !default
$panel-heading-line-height: 1.25 !default
$panel-heading-padding: 0.75em 1em !default
$panel-heading-radius: $radius !default
$panel-heading-size: 1.25em !default
$panel-heading-weight: $weight-bold !default

$panel-tabs-font-size: 0.875em !default
$panel-tab-border-bottom: 1px solid $border !default
$panel-tab-active-border-bottom-color: $link-active-border !default
$panel-tab-active-color: $link-active !default

$panel-list-item-color: $text !default
$panel-list-item-hover-color: $link !default

$panel-block-color: $text-strong !default
$panel-block-hover-background-color: $background !default
$panel-block-active-border-left-color: $link !default
$panel-block-active-color: $link-active !default
$panel-block-active-icon-color: $link !default

$panel-icon-color: $text-light !default
$panel-colors: $colors !default

.panel
  border-radius: $panel-radius
  box-shadow: $panel-shadow
  font-size: $size-normal
  &:not(:last-child)
    margin-bottom: $panel-margin
  // Colors
  @each $name, $components in $panel-colors
    $color: nth($components, 1)
    $color-invert: nth($components, 2)
    &.is-#{$name}
      .panel-heading
        background-color: $color
        color: $color-invert
      .panel-tabs a.is-active
        border-bottom-color: $color
      .panel-block.is-active .panel-icon
        color: $color

.panel-tabs,
.panel-block
  &:not(:last-child)
    border-bottom: $panel-item-border

.panel-heading
  background-color: $panel-heading-background-color
  border-radius: $panel-radius $panel-radius 0 0
  color: $panel-heading-color
  font-size: $panel-heading-size
  font-weight: $panel-heading-weight
  line-height: $panel-heading-line-height
  padding: $panel-heading-padding

.panel-tabs
  align-items: flex-end
  display: flex
  font-size: $panel-tabs-font-size
  justify-content: center
  a
    border-bottom: $panel-tab-border-bottom
    margin-bottom: -1px
    padding: 0.5em
    // Modifiers
    &.is-active
      border-bottom-color: $panel-tab-active-border-bottom-color
      color: $panel-tab-active-color

.panel-list
  a
    color: $panel-list-item-color
    &:hover
      color: $panel-list-item-hover-color

.panel-block
  align-items: center
  color: $panel-block-color
  display: flex
  justify-content: flex-start
  padding: 0.5em 0.75em
  input[type="checkbox"]
    margin-right: 0.75em
  & > .control
    flex-grow: 1
    flex-shrink: 1
    width: 100%
  &.is-wrapped
    flex-wrap: wrap
  &.is-active
    border-left-color: $panel-block-active-border-left-color
    color: $panel-block-active-color
    .panel-icon
      color: $panel-block-active-icon-color
  &:last-child
    border-bottom-left-radius: $panel-radius
    border-bottom-right-radius: $panel-radius

a.panel-block,
label.panel-block
  cursor: pointer
  &:hover
    background-color: $panel-block-hover-background-color

.panel-icon
  +fa(14px, 1em)
  color: $panel-icon-color
  margin-right: 0.75em
  .fa
    font-size: inherit
    line-height: inherit

$tabs-border-bottom-color: $border !default
$tabs-border-bottom-style: solid !default
$tabs-border-bottom-width: 1px !default
$tabs-link-color: $text !default
$tabs-link-hover-border-bottom-color: $text-strong !default
$tabs-link-hover-color: $text-strong !default
$tabs-link-active-border-bottom-color: $link !default
$tabs-link-active-color: $link !default
$tabs-link-padding: 0.5em 1em !default

$tabs-boxed-link-radius: $radius !default
$tabs-boxed-link-hover-background-color: $background !default
$tabs-boxed-link-hover-border-bottom-color: $border !default

$tabs-boxed-link-active-background-color: $scheme-main !default
$tabs-boxed-link-active-border-color: $border !default
$tabs-boxed-link-active-border-bottom-color: transparent !default

$tabs-toggle-link-border-color: $border !default
$tabs-toggle-link-border-style: solid !default
$tabs-toggle-link-border-width: 1px !default
$tabs-toggle-link-hover-background-color: $background !default
$tabs-toggle-link-hover-border-color: $border-hover !default
$tabs-toggle-link-radius: $radius !default
$tabs-toggle-link-active-background-color: $link !default
$tabs-toggle-link-active-border-color: $link !default
$tabs-toggle-link-active-color: $link-invert !default

.tabs
  @extend %block
  +overflow-touch
  @extend %unselectable
  align-items: stretch
  display: flex
  font-size: $size-normal
  justify-content: space-between
  overflow: hidden
  overflow-x: auto
  white-space: nowrap
  a
    align-items: center
    border-bottom-color: $tabs-border-bottom-color
    border-bottom-style: $tabs-border-bottom-style
    border-bottom-width: $tabs-border-bottom-width
    color: $tabs-link-color
    display: flex
    justify-content: center
    margin-bottom: -#{$tabs-border-bottom-width}
    padding: $tabs-link-padding
    vertical-align: top
    &:hover
      border-bottom-color: $tabs-link-hover-border-bottom-color
      color: $tabs-link-hover-color
  li
    display: block
    &.is-active
      a
        border-bottom-color: $tabs-link-active-border-bottom-color
        color: $tabs-link-active-color
  ul
    align-items: center
    border-bottom-color: $tabs-border-bottom-color
    border-bottom-style: $tabs-border-bottom-style
    border-bottom-width: $tabs-border-bottom-width
    display: flex
    flex-grow: 1
    flex-shrink: 0
    justify-content: flex-start
    &.is-left
      padding-right: 0.75em
    &.is-center
      flex: none
      justify-content: center
      padding-left: 0.75em
      padding-right: 0.75em
    &.is-right
      justify-content: flex-end
      padding-left: 0.75em
  .icon
    &:first-child
      margin-right: 0.5em
    &:last-child
      margin-left: 0.5em
  // Alignment
  &.is-centered
    ul
      justify-content: center
  &.is-right
    ul
      justify-content: flex-end
  // Styles
  &.is-boxed
    a
      border: 1px solid transparent
      border-radius: $tabs-boxed-link-radius $tabs-boxed-link-radius 0 0
      &:hover
        background-color: $tabs-boxed-link-hover-background-color
        border-bottom-color: $tabs-boxed-link-hover-border-bottom-color
    li
      &.is-active
        a
          background-color: $tabs-boxed-link-active-background-color
          border-color: $tabs-boxed-link-active-border-color
          border-bottom-color: $tabs-boxed-link-active-border-bottom-color !important
  &.is-fullwidth
    li
      flex-grow: 1
      flex-shrink: 0
  &.is-toggle
    a
      border-color: $tabs-toggle-link-border-color
      border-style: $tabs-toggle-link-border-style
      border-width: $tabs-toggle-link-border-width
      margin-bottom: 0
      position: relative
      &:hover
        background-color: $tabs-toggle-link-hover-background-color
        border-color: $tabs-toggle-link-hover-border-color
        z-index: 2
    li
      & + li
        margin-left: -#{$tabs-toggle-link-border-width}
      &:first-child a
        border-radius: $tabs-toggle-link-radius 0 0 $tabs-toggle-link-radius
      &:last-child a
        border-radius: 0 $tabs-toggle-link-radius $tabs-toggle-link-radius 0
      &.is-active
        a
          background-color: $tabs-toggle-link-active-background-color
          border-color: $tabs-toggle-link-active-border-color
          color: $tabs-toggle-link-active-color
          z-index: 1
    ul
      border-bottom: none
    &.is-toggle-rounded
      li
        &:first-child a
          border-bottom-left-radius: $radius-rounded
          border-top-left-radius: $radius-rounded
          padding-left: 1.25em
        &:last-child a
          border-bottom-right-radius: $radius-rounded
          border-top-right-radius: $radius-rounded
          padding-right: 1.25em
  // Sizes
  &.is-small
    font-size: $size-small
  &.is-medium
    font-size: $size-medium
  &.is-large
    font-size: $size-large

$column-gap: 0.75rem !default

.column
  display: block
  flex-basis: 0
  flex-grow: 1
  flex-shrink: 1
  padding: $column-gap
  .columns.is-mobile > &.is-narrow
    flex: none
  .columns.is-mobile > &.is-full
    flex: none
    width: 100%
  .columns.is-mobile > &.is-three-quarters
    flex: none
    width: 75%
  .columns.is-mobile > &.is-two-thirds
    flex: none
    width: 66.6666%
  .columns.is-mobile > &.is-half
    flex: none
    width: 50%
  .columns.is-mobile > &.is-one-third
    flex: none
    width: 33.3333%
  .columns.is-mobile > &.is-one-quarter
    flex: none
    width: 25%
  .columns.is-mobile > &.is-one-fifth
    flex: none
    width: 20%
  .columns.is-mobile > &.is-two-fifths
    flex: none
    width: 40%
  .columns.is-mobile > &.is-three-fifths
    flex: none
    width: 60%
  .columns.is-mobile > &.is-four-fifths
    flex: none
    width: 80%
  .columns.is-mobile > &.is-offset-three-quarters
    margin-left: 75%
  .columns.is-mobile > &.is-offset-two-thirds
    margin-left: 66.6666%
  .columns.is-mobile > &.is-offset-half
    margin-left: 50%
  .columns.is-mobile > &.is-offset-one-third
    margin-left: 33.3333%
  .columns.is-mobile > &.is-offset-one-quarter
    margin-left: 25%
  .columns.is-mobile > &.is-offset-one-fifth
    margin-left: 20%
  .columns.is-mobile > &.is-offset-two-fifths
    margin-left: 40%
  .columns.is-mobile > &.is-offset-three-fifths
    margin-left: 60%
  .columns.is-mobile > &.is-offset-four-fifths
    margin-left: 80%
  @for $i from 0 through 12
    .columns.is-mobile > &.is-#{$i}
      flex: none
      width: percentage($i / 12)
    .columns.is-mobile > &.is-offset-#{$i}
      margin-left: percentage($i / 12)
  +mobile
    &.is-narrow-mobile
      flex: none
    &.is-full-mobile
      flex: none
      width: 100%
    &.is-three-quarters-mobile
      flex: none
      width: 75%
    &.is-two-thirds-mobile
      flex: none
      width: 66.6666%
    &.is-half-mobile
      flex: none
      width: 50%
    &.is-one-third-mobile
      flex: none
      width: 33.3333%
    &.is-one-quarter-mobile
      flex: none
      width: 25%
    &.is-one-fifth-mobile
      flex: none
      width: 20%
    &.is-two-fifths-mobile
      flex: none
      width: 40%
    &.is-three-fifths-mobile
      flex: none
      width: 60%
    &.is-four-fifths-mobile
      flex: none
      width: 80%
    &.is-offset-three-quarters-mobile
      margin-left: 75%
    &.is-offset-two-thirds-mobile
      margin-left: 66.6666%
    &.is-offset-half-mobile
      margin-left: 50%
    &.is-offset-one-third-mobile
      margin-left: 33.3333%
    &.is-offset-one-quarter-mobile
      margin-left: 25%
    &.is-offset-one-fifth-mobile
      margin-left: 20%
    &.is-offset-two-fifths-mobile
      margin-left: 40%
    &.is-offset-three-fifths-mobile
      margin-left: 60%
    &.is-offset-four-fifths-mobile
      margin-left: 80%
    @for $i from 0 through 12
      &.is-#{$i}-mobile
        flex: none
        width: percentage($i / 12)
      &.is-offset-#{$i}-mobile
        margin-left: percentage($i / 12)
  +tablet
    &.is-narrow,
    &.is-narrow-tablet
      flex: none
    &.is-full,
    &.is-full-tablet
      flex: none
      width: 100%
    &.is-three-quarters,
    &.is-three-quarters-tablet
      flex: none
      width: 75%
    &.is-two-thirds,
    &.is-two-thirds-tablet
      flex: none
      width: 66.6666%
    &.is-half,
    &.is-half-tablet
      flex: none
      width: 50%
    &.is-one-third,
    &.is-one-third-tablet
      flex: none
      width: 33.3333%
    &.is-one-quarter,
    &.is-one-quarter-tablet
      flex: none
      width: 25%
    &.is-one-fifth,
    &.is-one-fifth-tablet
      flex: none
      width: 20%
    &.is-two-fifths,
    &.is-two-fifths-tablet
      flex: none
      width: 40%
    &.is-three-fifths,
    &.is-three-fifths-tablet
      flex: none
      width: 60%
    &.is-four-fifths,
    &.is-four-fifths-tablet
      flex: none
      width: 80%
    &.is-offset-three-quarters,
    &.is-offset-three-quarters-tablet
      margin-left: 75%
    &.is-offset-two-thirds,
    &.is-offset-two-thirds-tablet
      margin-left: 66.6666%
    &.is-offset-half,
    &.is-offset-half-tablet
      margin-left: 50%
    &.is-offset-one-third,
    &.is-offset-one-third-tablet
      margin-left: 33.3333%
    &.is-offset-one-quarter,
    &.is-offset-one-quarter-tablet
      margin-left: 25%
    &.is-offset-one-fifth,
    &.is-offset-one-fifth-tablet
      margin-left: 20%
    &.is-offset-two-fifths,
    &.is-offset-two-fifths-tablet
      margin-left: 40%
    &.is-offset-three-fifths,
    &.is-offset-three-fifths-tablet
      margin-left: 60%
    &.is-offset-four-fifths,
    &.is-offset-four-fifths-tablet
      margin-left: 80%
    @for $i from 0 through 12
      &.is-#{$i},
      &.is-#{$i}-tablet
        flex: none
        width: percentage($i / 12)
      &.is-offset-#{$i},
      &.is-offset-#{$i}-tablet
        margin-left: percentage($i / 12)
  +touch
    &.is-narrow-touch
      flex: none
    &.is-full-touch
      flex: none
      width: 100%
    &.is-three-quarters-touch
      flex: none
      width: 75%
    &.is-two-thirds-touch
      flex: none
      width: 66.6666%
    &.is-half-touch
      flex: none
      width: 50%
    &.is-one-third-touch
      flex: none
      width: 33.3333%
    &.is-one-quarter-touch
      flex: none
      width: 25%
    &.is-one-fifth-touch
      flex: none
      width: 20%
    &.is-two-fifths-touch
      flex: none
      width: 40%
    &.is-three-fifths-touch
      flex: none
      width: 60%
    &.is-four-fifths-touch
      flex: none
      width: 80%
    &.is-offset-three-quarters-touch
      margin-left: 75%
    &.is-offset-two-thirds-touch
      margin-left: 66.6666%
    &.is-offset-half-touch
      margin-left: 50%
    &.is-offset-one-third-touch
      margin-left: 33.3333%
    &.is-offset-one-quarter-touch
      margin-left: 25%
    &.is-offset-one-fifth-touch
      margin-left: 20%
    &.is-offset-two-fifths-touch
      margin-left: 40%
    &.is-offset-three-fifths-touch
      margin-left: 60%
    &.is-offset-four-fifths-touch
      margin-left: 80%
    @for $i from 0 through 12
      &.is-#{$i}-touch
        flex: none
        width: percentage($i / 12)
      &.is-offset-#{$i}-touch
        margin-left: percentage($i / 12)
  +desktop
    &.is-narrow-desktop
      flex: none
    &.is-full-desktop
      flex: none
      width: 100%
    &.is-three-quarters-desktop
      flex: none
      width: 75%
    &.is-two-thirds-desktop
      flex: none
      width: 66.6666%
    &.is-half-desktop
      flex: none
      width: 50%
    &.is-one-third-desktop
      flex: none
      width: 33.3333%
    &.is-one-quarter-desktop
      flex: none
      width: 25%
    &.is-one-fifth-desktop
      flex: none
      width: 20%
    &.is-two-fifths-desktop
      flex: none
      width: 40%
    &.is-three-fifths-desktop
      flex: none
      width: 60%
    &.is-four-fifths-desktop
      flex: none
      width: 80%
    &.is-offset-three-quarters-desktop
      margin-left: 75%
    &.is-offset-two-thirds-desktop
      margin-left: 66.6666%
    &.is-offset-half-desktop
      margin-left: 50%
    &.is-offset-one-third-desktop
      margin-left: 33.3333%
    &.is-offset-one-quarter-desktop
      margin-left: 25%
    &.is-offset-one-fifth-desktop
      margin-left: 20%
    &.is-offset-two-fifths-desktop
      margin-left: 40%
    &.is-offset-three-fifths-desktop
      margin-left: 60%
    &.is-offset-four-fifths-desktop
      margin-left: 80%
    @for $i from 0 through 12
      &.is-#{$i}-desktop
        flex: none
        width: percentage($i / 12)
      &.is-offset-#{$i}-desktop
        margin-left: percentage($i / 12)
  +widescreen
    &.is-narrow-widescreen
      flex: none
    &.is-full-widescreen
      flex: none
      width: 100%
    &.is-three-quarters-widescreen
      flex: none
      width: 75%
    &.is-two-thirds-widescreen
      flex: none
      width: 66.6666%
    &.is-half-widescreen
      flex: none
      width: 50%
    &.is-one-third-widescreen
      flex: none
      width: 33.3333%
    &.is-one-quarter-widescreen
      flex: none
      width: 25%
    &.is-one-fifth-widescreen
      flex: none
      width: 20%
    &.is-two-fifths-widescreen
      flex: none
      width: 40%
    &.is-three-fifths-widescreen
      flex: none
      width: 60%
    &.is-four-fifths-widescreen
      flex: none
      width: 80%
    &.is-offset-three-quarters-widescreen
      margin-left: 75%
    &.is-offset-two-thirds-widescreen
      margin-left: 66.6666%
    &.is-offset-half-widescreen
      margin-left: 50%
    &.is-offset-one-third-widescreen
      margin-left: 33.3333%
    &.is-offset-one-quarter-widescreen
      margin-left: 25%
    &.is-offset-one-fifth-widescreen
      margin-left: 20%
    &.is-offset-two-fifths-widescreen
      margin-left: 40%
    &.is-offset-three-fifths-widescreen
      margin-left: 60%
    &.is-offset-four-fifths-widescreen
      margin-left: 80%
    @for $i from 0 through 12
      &.is-#{$i}-widescreen
        flex: none
        width: percentage($i / 12)
      &.is-offset-#{$i}-widescreen
        margin-left: percentage($i / 12)
  +fullhd
    &.is-narrow-fullhd
      flex: none
    &.is-full-fullhd
      flex: none
      width: 100%
    &.is-three-quarters-fullhd
      flex: none
      width: 75%
    &.is-two-thirds-fullhd
      flex: none
      width: 66.6666%
    &.is-half-fullhd
      flex: none
      width: 50%
    &.is-one-third-fullhd
      flex: none
      width: 33.3333%
    &.is-one-quarter-fullhd
      flex: none
      width: 25%
    &.is-one-fifth-fullhd
      flex: none
      width: 20%
    &.is-two-fifths-fullhd
      flex: none
      width: 40%
    &.is-three-fifths-fullhd
      flex: none
      width: 60%
    &.is-four-fifths-fullhd
      flex: none
      width: 80%
    &.is-offset-three-quarters-fullhd
      margin-left: 75%
    &.is-offset-two-thirds-fullhd
      margin-left: 66.6666%
    &.is-offset-half-fullhd
      margin-left: 50%
    &.is-offset-one-third-fullhd
      margin-left: 33.3333%
    &.is-offset-one-quarter-fullhd
      margin-left: 25%
    &.is-offset-one-fifth-fullhd
      margin-left: 20%
    &.is-offset-two-fifths-fullhd
      margin-left: 40%
    &.is-offset-three-fifths-fullhd
      margin-left: 60%
    &.is-offset-four-fifths-fullhd
      margin-left: 80%
    @for $i from 0 through 12
      &.is-#{$i}-fullhd
        flex: none
        width: percentage($i / 12)
      &.is-offset-#{$i}-fullhd
        margin-left: percentage($i / 12)

.columns
  margin-left: (-$column-gap)
  margin-right: (-$column-gap)
  margin-top: (-$column-gap)
  &:last-child
    margin-bottom: (-$column-gap)
  &:not(:last-child)
    margin-bottom: calc(1.5rem - #{$column-gap})
  // Modifiers
  &.is-centered
    justify-content: center
  &.is-gapless
    margin-left: 0
    margin-right: 0
    margin-top: 0
    & > .column
      margin: 0
      padding: 0 !important
    &:not(:last-child)
      margin-bottom: 1.5rem
    &:last-child
      margin-bottom: 0
  &.is-mobile
    display: flex
  &.is-multiline
    flex-wrap: wrap
  &.is-vcentered
    align-items: center
  // Responsiveness
  +tablet
    &:not(.is-desktop)
      display: flex
  +desktop
    // Modifiers
    &.is-desktop
      display: flex

@if $variable-columns
  .columns.is-variable
    --columnGap: 0.75rem
    margin-left: calc(-1 * var(--columnGap))
    margin-right: calc(-1 * var(--columnGap))
    .column
      padding-left: var(--columnGap)
      padding-right: var(--columnGap)
    @for $i from 0 through 8
      &.is-#{$i}
        --columnGap: #{$i * 0.25rem}
      +mobile
        &.is-#{$i}-mobile
          --columnGap: #{$i * 0.25rem}
      +tablet
        &.is-#{$i}-tablet
          --columnGap: #{$i * 0.25rem}
      +tablet-only
        &.is-#{$i}-tablet-only
          --columnGap: #{$i * 0.25rem}
      +touch
        &.is-#{$i}-touch
          --columnGap: #{$i * 0.25rem}
      +desktop
        &.is-#{$i}-desktop
          --columnGap: #{$i * 0.25rem}
      +desktop-only
        &.is-#{$i}-desktop-only
          --columnGap: #{$i * 0.25rem}
      +widescreen
        &.is-#{$i}-widescreen
          --columnGap: #{$i * 0.25rem}
      +widescreen-only
        &.is-#{$i}-widescreen-only
          --columnGap: #{$i * 0.25rem}
      +fullhd
        &.is-#{$i}-fullhd
          --columnGap: #{$i * 0.25rem}

$tile-spacing: 0.75rem !default

.tile
  align-items: stretch
  display: block
  flex-basis: 0
  flex-grow: 1
  flex-shrink: 1
  min-height: min-content
  // Modifiers
  &.is-ancestor
    margin-left: $tile-spacing * -1
    margin-right: $tile-spacing * -1
    margin-top: $tile-spacing * -1
    &:last-child
      margin-bottom: $tile-spacing * -1
    &:not(:last-child)
      margin-bottom: $tile-spacing
  &.is-child
    margin: 0 !important
  &.is-parent
    padding: $tile-spacing
  &.is-vertical
    flex-direction: column
    & > .tile.is-child:not(:last-child)
      margin-bottom: 1.5rem !important
  // Responsiveness
  +tablet
    &:not(.is-child)
      display: flex
    @for $i from 1 through 12
      &.is-#{$i}
        flex: none
        width: ($i / 12) * 100%

$hero-body-padding: 3rem 1.5rem !default
$hero-body-padding-small: 1.5rem !default
$hero-body-padding-medium: 9rem 1.5rem !default
$hero-body-padding-large: 18rem 1.5rem !default

// Main container
.hero
  align-items: stretch
  display: flex
  flex-direction: column
  justify-content: space-between
  .navbar
    background: none
  .tabs
    ul
      border-bottom: none
  // Colors
  @each $name, $pair in $colors
    $color: nth($pair, 1)
    $color-invert: nth($pair, 2)
    &.is-#{$name}
      background-color: $color
      color: $color-invert
      a:not(.button):not(.dropdown-item):not(.tag):not(.pagination-link.is-current),
      strong
        color: inherit
      .title
        color: $color-invert
      .subtitle
        color: bulmaRgba($color-invert, 0.9)
        a:not(.button),
        strong
          color: $color-invert
      .navbar-menu
        +touch
          background-color: $color
      .navbar-item,
      .navbar-link
        color: bulmaRgba($color-invert, 0.7)
      a.navbar-item,
      .navbar-link
        &:hover,
        &.is-active
          background-color: bulmaDarken($color, 5%)
          color: $color-invert
      .tabs
        a
          color: $color-invert
          opacity: 0.9
          &:hover
            opacity: 1
        li
          &.is-active a
            opacity: 1
        &.is-boxed,
        &.is-toggle
          a
            color: $color-invert
            &:hover
              background-color: bulmaRgba($scheme-invert, 0.1)
          li.is-active a
            &,
            &:hover
              background-color: $color-invert
              border-color: $color-invert
              color: $color
      // Modifiers
      @if type-of($color) == 'color'
        &.is-bold
          $gradient-top-left: darken(saturate(adjust-hue($color, -10deg), 10%), 10%)
          $gradient-bottom-right: lighten(saturate(adjust-hue($color, 10deg), 5%), 5%)
          background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
          +mobile
            .navbar-menu
              background-image: linear-gradient(141deg, $gradient-top-left 0%, $color 71%, $gradient-bottom-right 100%)
  // Sizes
  &.is-small
    .hero-body
      padding: $hero-body-padding-small
  &.is-medium
    +tablet
      .hero-body
        padding: $hero-body-padding-medium
  &.is-large
    +tablet
      .hero-body
        padding: $hero-body-padding-large
  &.is-halfheight,
  &.is-fullheight,
  &.is-fullheight-with-navbar
    .hero-body
      align-items: center
      display: flex
      & > .container
        flex-grow: 1
        flex-shrink: 1
  &.is-halfheight
    min-height: 50vh
  &.is-fullheight
    min-height: 100vh

// Components

.hero-video
  @extend %overlay
  overflow: hidden
  video
    left: 50%
    min-height: 100%
    min-width: 100%
    position: absolute
    top: 50%
    transform: translate3d(-50%, -50%, 0)
  // Modifiers
  &.is-transparent
    opacity: 0.3
  // Responsiveness
  +mobile
    display: none

.hero-buttons
  margin-top: 1.5rem
  // Responsiveness
  +mobile
    .button
      display: flex
      &:not(:last-child)
        margin-bottom: 0.75rem
  +tablet
    display: flex
    justify-content: center
    .button:not(:last-child)
      margin-right: 1.5rem

// Containers

.hero-head,
.hero-foot
  flex-grow: 0
  flex-shrink: 0

.hero-body
  flex-grow: 1
  flex-shrink: 0
  padding: $hero-body-padding

$section-padding: 3rem 1.5rem !default
$section-padding-medium: 9rem 1.5rem !default
$section-padding-large: 18rem 1.5rem !default

.section
  padding: $section-padding
  // Responsiveness
  +desktop
    // Sizes
    &.is-medium
      padding: $section-padding-medium
    &.is-large
      padding: $section-padding-large

$footer-background-color: $scheme-main-bis !default
$footer-color: false !default
$footer-padding: 3rem 1.5rem 6rem !default

.footer
  background-color: $footer-background-color
  padding: $footer-padding
  @if $footer-color
    color: $footer-color