$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