@use "sass:map"
@use "sass:string"
@use "sass:math"

$bal-spacing-values: ("auto": $bal-space-auto, "none": $bal-space-none, "xx-small": $bal-space-xx-small, "x-small": $bal-space-x-small, "small": $bal-space-small, "normal": $bal-space-normal, "medium": $bal-space-medium, "large": $bal-space-large, "x-large": $bal-space-x-large, "xx-large": $bal-space-xx-large, "xxx-large": $bal-space-xxx-large, "xxxx-large": $bal-space-xxxx-large) !default
$bal-spacing-values-tablet: ("auto": $bal-space-auto, "none": $bal-space-none, "xx-small": $bal-space-xx-small-tablet, "x-small": $bal-space-x-small-tablet, "small": $bal-space-small-tablet, "normal": $bal-space-normal-tablet, "medium": $bal-space-medium-tablet, "large": $bal-space-large-tablet, "x-large": $bal-space-x-large-tablet, "xx-large": $bal-space-xx-large-tablet, "xxx-large": $bal-space-xxx-large-tablet, "xxxx-large": $bal-space-xxxx-large-tablet) !default
$bal-spacing-values-desktop: ("auto": $bal-space-auto, "none": $bal-space-none, "xx-small": $bal-space-xx-small-desktop, "x-small": $bal-space-x-small-desktop, "small": $bal-space-small-desktop, "normal": $bal-space-normal-desktop, "medium": $bal-space-medium-desktop, "large": $bal-space-large-desktop, "x-large": $bal-space-x-large-desktop, "xx-large": $bal-space-xx-large-desktop, "xxx-large": $bal-space-xxx-large-desktop, "xxxx-large": $bal-space-xxxx-large-desktop) !default

$bal-legacy-spacing-values: ("auto": $bal-space-auto, "0": $bal-space-none, "1": $bal-space-xx-small, "2": $bal-space-x-small, "3": $bal-space-small, "4": $bal-space-normal, "5": $bal-space-medium, "6": $bal-space-large, "7": $bal-space-x-large, "8": $bal-space-xx-large, "9": $bal-space-xxx-large, "10": $bal-space-xxxx-large) !default
$bal-legacy-spacing-values-tablet: ("auto": $bal-space-auto, "0": $bal-space-none, "1": $bal-space-xx-small-tablet, "2": $bal-space-x-small-tablet, "3": $bal-space-small-tablet, "4": $bal-space-normal-tablet, "5": $bal-space-medium-tablet, "6": $bal-space-large-tablet, "7": $bal-space-x-large-tablet, "8": $bal-space-xx-large-tablet, "9": $bal-space-xxx-large-tablet, "10": $bal-space-xxxx-large-tablet) !default
$bal-legacy-spacing-values-desktop: ("auto": $bal-space-auto, "0": $bal-space-none, "1": $bal-space-xx-small-desktop, "2": $bal-space-x-small-desktop, "3": $bal-space-small-desktop, "4": $bal-space-normal-desktop, "5": $bal-space-medium-desktop, "6": $bal-space-large-desktop, "7": $bal-space-x-large-desktop, "8": $bal-space-xx-large-desktop, "9": $bal-space-xxx-large-desktop, "10": $bal-space-xxxx-large-desktop) !default

@function bulmaRgba($color, $alpha)
  @if type-of($color) != 'color'
    @return $color
  @return rgba($color, $alpha)

=hover
  @media(hover: hover) and (pointer: fine)
    @content

=overflow-touch
  -webkit-overflow-scrolling: touch

=focus-shadow
  +hover
    box-shadow: var(--bal-focus-shadow) !important

=focus-inset-shadow
  +hover
    box-shadow: var(--bal-focus-shadow-inset) !important

=focus-inverted-shadow
  +hover
    box-shadow: var(--bal-focus-shadow-inverted) !important

=focus-inverted-inset-shadow
  +hover
    box-shadow: var(--bal-focus-shadow-inverted-inset) !important

=placeholder
  $placeholders: ':-moz' ':-webkit-input' '-moz' '-ms-input'
  @each $placeholder in $placeholders
    &:#{$placeholder}-placeholder
      @content

=font-smoothing
  -moz-osx-font-smoothing: grayscale
  -webkit-font-smoothing: antialiased

=bottomSpacing($spacing: $block-spacing)
  &:not(:last-child)
    margin-bottom: $spacing

=typography($font-size: 1rem, $line-height: 1.5rem, $spacing: $block-spacing)
  font-size: $font-size
  line-height: $line-height
  +bottomSpacing($spacing)

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

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

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

=disabled
  cursor: default !important
  pointer-events: none !important

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

=property($prop, $top, $end: $top, $bottom: $top, $start: $end)
  +property-horizontal($prop, $start, $end)
  #{$prop}-top: $top
  #{$prop}-bottom: $bottom

=margin($level: 2, $position: '')
  +spacing(margin, $level, $position)

=padding($level: 2, $position: '')
  +spacing(padding, $level, $position)

=spacing($prop: 'margin', $level: 2, $position: '')
  $key: string.quote(#{$level})
  $value: map.get($bal-spacing-values, $key)
  $value-tablet: map.get($bal-spacing-values-tablet, $key)
  $value-desktop: map.get($bal-spacing-values-desktop, $key)

  @if $position == ''
    #{$prop}: $value
    +tablet
      #{$prop}: $value-tablet
    +desktop
      #{$prop}: $value-desktop
  @else if $position == 'y'
    #{$prop}-top: $value
    #{$prop}-bottom: $value
    +tablet
      #{$prop}-top: $value-tablet
      #{$prop}-bottom: $value-tablet
    +desktop
      #{$prop}-top: $value-desktop
      #{$prop}-bottom: $value-desktop
  @else if $position == 'x'
    #{$prop}-left: $value
    #{$prop}-right: $value
    +tablet
      #{$prop}-left: $value-tablet
      #{$prop}-right: $value-tablet
    +desktop
      #{$prop}-left: $value-desktop
      #{$prop}-right: $value-desktop
  @else if $position == 'l'
    #{$prop}-left: $value
    +tablet
      #{$prop}-left: $value-tablet
    +desktop
      #{$prop}-left: $value-desktop
  @else if $position == 'r'
    #{$prop}-right: $value
    +tablet
      #{$prop}-right: $value-tablet
    +desktop
      #{$prop}-right: $value-desktop
  @else if $position == 't'
    #{$prop}-top: $value
    +tablet
      #{$prop}-top: $value-tablet
    +desktop
      #{$prop}-top: $value-desktop
  @else if $position == 'b'
    #{$prop}-bottom: $value
    +tablet
      #{$prop}-bottom: $value-tablet
    +desktop
      #{$prop}-bottom: $value-desktop

=property-horizontal($prop, $start, $end: $start)
  @if $start == 0 and $end == 0
    #{$prop}-left: $start
    #{$prop}-right: $end
  @else
    #{$prop}-left: $start
    #{$prop}-right: $end
    @at-root
      @supports ((margin-inline-start: 0) or (-webkit-margin-start: 0))
        &
          @if $start != null
            #{$prop}-left: unset
          @if $end != null
            #{$prop}-right: unset
            -webkit-#{$prop}-start: $start
            #{$prop}-inline-start: $start
            -webkit-#{$prop}-end: $end
            #{$prop}-inline-end: $end

=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

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

=hide-element
  display: none !important
  visibility: hidden !important

=hidden-input
  position: absolute !important
  left: 0
  top: 0
  margin: 0
  padding: 0
  opacity: 0
  outline: 0
  border: none
  width: 1px
  height: 1px
  clip: rect(1px, 1px, 1px, 1px)
  overflow: hidden

=invisible
  position: absolute !important
  height: 1px !important
  width: 1px !important
  padding: 0 !important
  overflow: hidden !important
  border: none !important
  white-space: nowrap !important
  clip: rect(1px 1px 1px 1px) !important
  clip: rect(1px, 1px, 1px, 1px) !important

=delete
  +unselectable
  -moz-appearance: none
  -webkit-appearance: none
  background-color: bulmaRgba($bal-color-primary, 0.2)
  border: none
  border-radius: $bal-radius-rounded
  cursor: pointer
  pointer-events: auto
  display: inline-block
  flex-grow: 0
  flex-shrink: 0
  font-size: 0
  height: 1.25rem
  max-height: 1.25rem
  max-width: 1.25rem
  min-height: 1.25rem
  min-width: 1.25rem
  outline: none
  position: relative
  vertical-align: top
  width: 1.25rem
  &::before,
  &::after
    background-color: $bal-color-white
    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: bulmaRgba($bal-color-primary, 0.3)
  &:active
    background-color: bulmaRgba($bal-color-primary, 0.4)
  // Sizes
  &.is-small
    height: 1rem
    max-height: 1rem
    max-width: 1rem
    min-height: 1rem
    min-width: 1rem
    width: 1rem
  &.is-medium
    height: 1.5rem
    max-height: 1.5rem
    max-width: 1.5rem
    min-height: 1.5rem
    min-width: 1.5rem
    width: 1.5rem
  &.is-large
    height: 2rem
    max-height: 2rem
    max-width: 2rem
    min-height: 2rem
    min-width: 2rem
    width: 2rem

=text-shadow
  text-shadow: var(--bal-text-shadow-normal)

=button-shadow
  box-shadow: var(--bal-text-shadow-normal)