// 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
  overlay()

// Typography

typography-size($target = '')
  for $size in $sizes
    $i = index($sizes, $size) + 1
    if $target == ''
      .is-size{$i}
        font-size $size !important
    else
      .is-size{$i}-{$target}
        font-size $size !important

typography-size()

+mobile()
  typography-size('mobile')

+tablet()
  typography-size('tablet')

+desktop()
  typography-size('desktop')

+widescreen()
  typography-size('widescreen')

+fullhd()
  typography-size('fullhd')

$alignments ?= {
  'centered': 'center',
  'justified': 'justify',
  'left': 'left',
  'right': 'right'
}

for $alignment, $text-align in $alignments
  .has-text-{$alignment}
    text-align unquote($text-align) !important
  +mobile()
    .has-text-{$alignment}-mobile
      text-align unquote($text-align) !important
  +tablet()
    .has-text-{$alignment}-tablet
      text-align unquote($text-align) !important
  +tablet-only()
    .has-text-{$alignment}-tablet-only
      text-align unquote($text-align) !important
  +touch()
    .has-text-{$alignment}-touch
      text-align unquote($text-align) !important
  +desktop()
    .has-text-{$alignment}-desktop
      text-align unquote($text-align) !important
  +desktop-only()
    .has-text-{$alignment}-desktop-only
      text-align unquote($text-align) !important
  +widescreen()
    .has-text-{$alignment}-widescreen
      text-align unquote($text-align) !important
  +widescreen-only()
    .has-text-{$alignment}-widescreen-only
      text-align unquote($text-align) !important
  +fullhd()
    .has-text-{$alignment}-fullhd
      text-align unquote($text-align) !important

.is-capitalized
  text-transform capitalize !important

.is-lowercase
  text-transform lowercase !important

.is-uppercase
  text-transform uppercase !important

for $name, $pair in $colors
  $color = $pair['1']
  .has-text-{$name}
    color $color
  a.has-text-{$name}
    &:hover,
    &:focus
      color darken($color, 10%) !important

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

// Visibility

$displays ?= block flex inline inline-block inline-flex

for $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

+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-vertically-marginless
  margin-top 0 !important
  margin-bottom 0 !important

.is-horizontally-marginless
  margin-left 0 !important
  margin-right 0 !important

.is-paddingless
  padding 0 !important

.is-vertically-paddingless
  padding-top 0 !important
  padding-bottom 0 !important

.is-horizontally-paddingless
  padding-left 0 !important
  padding-right 0 !important

.is-radiusless
  border-radius 0 !important

.is-shadowless
  box-shadow none !important

.is-unselectable
  unselectable()