// square-buttons.sass

@use 'sass:color'
@use 'sass:math'
@use 'sass:map'
@use '@angular/material' as mat

@function get-on-color($background)
  $r: math.div(color.channel($background, "red", $space: rgb), 255)
  $g: math.div(color.channel($background, "green", $space: rgb), 255)
  $b: math.div(color.channel($background, "blue", $space: rgb), 255)
  $l: 0.2126 * $r + 0.7152 * $g + 0.0722 * $b

  @if ($l > 0.5)
    @return #000
  @else
    @return #fff

.square-button
  min-width: 150px
  max-width: 150px
  min-height: 150px
  max-height: 150px
  cursor: pointer
  h3
    text-align: center
    padding: 0.5rem
  span
    text-align: center

.square-button.primary
  $sbp: map.get(mat.$violet-palette, 70)
  color: get-on-color($sbp) !important
  background: $sbp !important

.square-button.strong-primary
  $sbsp: map.get(mat.$violet-palette, 20)
  color: get-on-color($sbsp) !important
  background: $sbsp !important

.square-button.accent
  $a: map.get(mat.$orange-palette, 70)
  color: get-on-color($a) !important
  background: $a !important

.square-button.strong-accent
  $sa: map.get(mat.$orange-palette, 20)
  color: get-on-color($sa) !important
  background: $sa !important

.square-button.warn
  $sbw: map.get(mat.$red-palette, 70)
  color: get-on-color($sbw) !important
  background: $sbw !important

.square-button.strong-warn
  $sbsw: map.get(mat.$red-palette, 20)
  color: get-on-color($sbsw) !important
  background: $sbsw !important

.square-button.disabled
  color: var(--mat-sys-on-outline) !important
  background: var(--mat-sys-outline) !important