$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