bulma/docs/_sass/global.sass

svg
  max-height: 100%
  max-width: 100%

.bd-notice
  background-color: $primary
  color: $primary-invert
  padding: 1em
  text-align: center

.bd-notice-body
  align-items: center
  display: flex
  justify-content: center
  a,
  strong
    color: currentColor
  a
    border-bottom: 1px solid rgba($white, 0.5)
    padding-bottom: 2px
    &:hover
      border-bottom-color: $white
  span
    margin: 0 0.25em
    opacity: 0.5

+mobile
  .bd-notice
    font-size: 0.75rem
  .bd-notice-body
    flex-wrap: wrap
    p:first-child
      width: 100%

+tablet
  .bd-notice-body
    p:first-child
      margin-right: 1em

.bd-patreon-button
  display: inline-block
  position: relative
  vertical-align: top
  img
    border-radius: $radius
    display: block
    max-height: none !important
  &:hover
    &::after
      +overlay
      background-color: rgba(#000, 0.05)
      border-radius: $radius
      content: ""
      display: block

$carbon-spacing: 1rem
$carbon-shadow-size: 0.75rem
$carbon-image-height: 100px
$carbon-image-width: 130px
$carbon-poweredby-height: 20px

#carboncontainer
  align-items: center
  display: flex
  justify-content: center
  margin-left: auto
  margin-right: auto
  max-width: $carbon-width
  min-height: $carbon-height + $carbon-poweredby-height
  min-width: 280px

#carbon
  flex-grow: 1
  min-height: $carbon-height
  padding: 0
  position: relative
  &:hover
    background-color: $white
    box-shadow: 0 0 0 $carbon-shadow-size $white
  +tablet
    width: $carbon-width

#carbonads
  font-size: 14px
  text-align: left
  a,
  span
    display: block
  .carbon-wrap
    min-height: $carbon-height
    position: relative
    &:hover
      .carbon-img::after
        background-color: rgba(#000, 0.05)
        content: ""
        display: block
        height: $carbon-height
        left: 0
        position: absolute
        right: $carbon-spacing
        top: 0
  .carbon-img
    bottom: 0
    float: left
    left: 0
    min-height: $carbon-height
    padding: 0
    position: absolute
    top: 0
    width: calc(#{$carbon-image-width} + #{$carbon-spacing})
    img
      display: block
      height: $carbon-image-height
      width: $carbon-image-width
    &:hover
      & + .carbon-text
        color: $link
    &:active
      opacity: 0.8
  .carbon-text
    display: block
    color: $text-strong
    line-height: 20px
    min-height: $carbon-height
    padding: 0 0 $carbon-poweredby-height calc(#{$carbon-image-width} + #{$carbon-spacing})
    &:hover
      color: $link
  .carbon-poweredby
    bottom: 0
    color: $grey-light
    display: inline
    font-size: $size-small
    line-height: $carbon-poweredby-height
    position: absolute
    right: 0
    &:hover
      text-decoration: underline