@use "@/colors"

@mixin width-available
  width: -moz-available
  width: -webkit-fill-available

@mixin height-available
  height: -moz-available
  height: -webkit-fill-available

@mixin controllable
  &.automated, .automated &
    border-radius: 1px
    outline-offset: 1px
    outline: 0.5px hsla(200, 83%, 60%, 0.5) solid
    background-color: rgba(white, 0.02)

@mixin clips-aware
  &:not(.clips-visible *)
    margin-left: 1px

@mixin form-element
  color: var(--color-gray)
  background-color: rgba(black, 0.08)
  box-shadow: 0 0 0 1px rgba(white, 0.02)
  padding: 0.25em
  top: -0.25em
  position: relative
  border-radius: 1px

  &::placeholder
    font-size: 0.875em
    opacity: 0.5

@mixin dragging
  &.dragging
    opacity: 0.1

@mixin unit-type-colors
  &
    --color: var(--color-green)

  &.aux
    --color: var(--color-purple)

  &.bus
    --color: var(--color-orange)

  &.output
    --color: var(--color-blue)

@mixin markdown
  color: var(--color-gray)

  h1, h2, h3, h4, h5, h6, p
    margin: 0 0 0.75rem 0

  li
    margin: 0.5rem 0

  code
    font-size: 90%
    color: var(--color-purple)
    padding: 1px 2px
    border-radius: 2px
    background-color: black
    cursor: pointer

  h1
    color: var(--color-blue)

  h2
    color: var(--color-green)

  h3
    color: var(--color-orange)

  a
    color: var(--color-purple)

  strong
    color: white
    font-weight: bolder

  hr
    margin: 2rem 0
    height: 1px
    border: none
    background-color: rgba(white, 0.1)

@mixin Control()
  padding: 0.5em 0.25em
  height: 192px
  width: min-content

@mixin ControlLayout($numColumns)
  display: grid
  grid-template: repeat(3, 3.5em) / repeat($numColumns, 3.5em)
  row-gap: 0.25em
  @include Control

@mixin Input($ident: right)
  display: flex
  flex-direction: row
  column-gap: 2px
  min-height: 2em
  font-size: 0.75em
  align-items: center
  border-radius: 0.25em
  width: min-content
  cursor: default

  .disabled &, &.disabled
    opacity: 0.3
    pointer-events: none

    > div[contenteditable]
      color: var(--color-dark)

  &.negative > div[contenteditable]
    color: var(--color-red)

  &.invalid:not(:focus-within)
    > div[contenteditable]
      color: transparent
      position: relative

      &:after
        content: "-"
        color: var(--color-dark)
        position: absolute
        left: 50%
        transform: translateX(-50%)

  > div[contenteditable]
    appearance: none
    border: none
    outline: none
    color: var(--color-dark)
    background-color: rgba(black, 0.08)
    box-shadow: 0 0 0 1px rgba(white, 0.02)
    text-align: $ident
    padding: 0.125em 0.25em
    border-radius: 1px
    height: min-content
    white-space: nowrap

    &:focus
      color: var(--color-gray)

@mixin floating($semitransparent: true)
  font-size: 0.75rem
  font-weight: inherit
  font-family: inherit
  display: flex
  padding: 0.5em 0
  outline: none
  border: none
  border-radius: 0.5em
  color: var(--color-bright)
  box-shadow: 0 0 0 0.5px rgba(white, 0.1), 0 2em 1.5em 0 rgba(black, 0.3)
  z-index: 9999

  @if $semitransparent
    backdrop-filter: blur(1px)
    background-color: hsla(200, 12%, 9%, 0.95)
  @else
    background-color: hsl(200, 12%, 11%)

@mixin corner-frame($color: rgba(white, 0.06))
  position: relative

  &::before,
  &::after
    content: ""
    top: 0
    left: 0
    width: 100%
    height: 100%
    position: absolute
    background-image: linear-gradient($color, $color), linear-gradient($color, $color), linear-gradient($color, $color), linear-gradient($color, $color)
    background-repeat: no-repeat
    pointer-events: none

  &::before
    background-size: 1px 3px, 2px 1px, 1px 2px, 3px 1px
    background-position: 0 0, 1px 0, 100% calc(100% - 1px), 100% 100%

  &::after
    background-size: 1px 2px, 3px 1px, 1px 2px, 3px 1px
    background-position: 100% 1px, 100% 0, 0 calc(100% - 1px), 0 100%