@import "derived-variables"

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

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

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

=hamburger($dimensions)
  --hamburger-dimensions: #{$dimensions}
  cursor: pointer
  display: block
  height: var(--hamburger-dimensions)
  position: relative
  width: var(--hamburger-dimensions)
  span
    background-color: currentColor
    display: block
    height: 1px
    left: calc(50% - 8px)
    position: absolute
    transform-origin: center
    transition-duration: var(--speed, #{$speed})
    transition-property: background-color, opacity, transform
    transition-timing-function: var(--easing, #{$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

=reset
  -moz-appearance: none
  -webkit-appearance: none
  appearance: none
  background: none
  border: none
  color: currentColor
  font-family: inherit
  font-size: 1em
  margin: 0
  padding: 0

// 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

=ltr
  @if not $rtl
    @content

=rtl
  @if $rtl
    @content

=ltr-property($property, $spacing, $right: true)
  $normal: if($right, "right", "left")
  $opposite: if($right, "left", "right")
  @if $rtl
    #{$property}-#{$opposite}: $spacing
  @else
    #{$property}-#{$normal}: $spacing

=ltr-position($spacing, $right: true)
  $normal: if($right, "right", "left")
  $opposite: if($right, "left", "right")
  @if $rtl
    #{$opposite}: $spacing
  @else
    #{$normal}: $spacing

// Placeholders

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

=arrow($color: transparent)
  --arrow-color: #{$color}
  border: 3px solid var(--arrow-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

=block($spacing: $block-spacing)
  --block-spacing: #{$spacing}
  &:not(:last-child)
    margin-bottom: var(--block-spacing)

=delete
  --delete-height: 20px
  --delete-width: 20px
  +unselectable
  -moz-appearance: none
  -webkit-appearance: none
  background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.2)
  border: none
  border-radius: var(--radius-rounded, #{$radius-rounded})
  cursor: pointer
  pointer-events: auto
  display: inline-block
  flex-grow: 0
  flex-shrink: 0
  font-size: 0
  height: var(--delete-height)
  max-height: var(--delete-height)
  max-width: var(--delete-width)
  min-height: var(--delete-height)
  min-width: var(--delete-width)
  outline: none
  position: relative
  vertical-align: top
  width: var(--delete-width)
  &::before,
  &::after
    background-color: var(--scheme-main, #{$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: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.3)
  &:active
    background-color: rgba(var(--scheme-invert-rgb, #{bulmaToRGB($black)}), 0.4)
  // Sizes
  &.is-small
    --delete-height: 16px
    --delete-width: 16px
  &.is-medium
    --delete-height: 24px
    --delete-width: 24px
  &.is-large
    --delete-height: 32px
    --delete-width: 32px

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

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