/* You can add global styles to this file, and also import other style files */
@use 'sass:map'
@use '@angular/material' as mat
@tailwind base
@tailwind components
@tailwind utilities

@include mat.core()

html,
body
  height: 100%
  overscroll-behavior-y: contain
a
  color: rgb(0, 0, 238)
  text-decoration: underline

.basis-15
  flex-basis: 15%

.basis-1-6
  flex-basis: 16.67%

.basis-1-5
  flex-basis: 20%

.basis-1-4
  flex-basis: 25%

.basis-30
  flex-basis: 30%

.basis-1-3
  flex-basis: 33.33%

.basis-2-5
  flex-basis: 40%

.basis-1-2
  flex-basis: 50%

.basis-3-4
  flex-basis: 75%

.basis-4-5
  flex-basis: 80%

.row-container
  display: flex
  flex-direction: row
  gap: 20px  // sets 20px space between all children

$my-primary: mat.m2-define-palette(mat.$m2-indigo-palette, 500)
$my-accent: mat.m2-define-palette(mat.$m2-amber-palette, A200, A100, A400)
/* The "warn" palette is optional and defaults to red if not specified.*/
$my-warn: mat.m2-define-palette(mat.$m2-red-palette)
$my-disabled: mat.m2-define-palette(mat.$m2-grey-palette, 500)

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

.center
  text-align: center

.warn
  background-color: red

.square-button.primary
  /* Read the 500 hue from the primary color palete.*/
  color: mat.m2-get-color-from-palette($my-primary, '200-contrast')
  background: mat.m2-get-color-from-palette($my-primary, 200)

.square-button.strong-primary
  /* Read the 500 hue from the primary color palete.*/
  color: mat.m2-get-color-from-palette($my-primary, '700-contrast')
  background: mat.m2-get-color-from-palette($my-primary, 700)

.square-button.accent
  /* Read the 500 hue from the primary color palete.*/
  color: mat.m2-get-color-from-palette($my-accent, '200-contrast')
  background: mat.m2-get-color-from-palette($my-accent, 200)

.square-button.strong-accent
  /* Read the 500 hue from the primary color palete.*/
  color: mat.m2-get-color-from-palette($my-accent, '700-contrast')
  background: mat.m2-get-color-from-palette($my-accent, 700)

.square-button.warn
  /* Read the 500 hue from the primary color palete.*/
  color: mat.m2-get-color-from-palette($my-warn, '700-contrast')
  background: mat.m2-get-color-from-palette($my-warn, 700)

.square-button.strong-warn
  /* Read the 500 hue from the primary color palete.*/
  color: mat.m2-get-color-from-palette($my-warn, '700-contrast')
  background: mat.m2-get-color-from-palette($my-warn, 700)

.square-button.disabled
  /* Read the 500 hue from the primary color palete.*/
  color: mat.m2-get-color-from-palette($my-disabled, '500-contrast')
  background: mat.m2-get-color-from-palette($my-disabled, 500)

.square-button.strong-disabled
  /* Read the 500 hue from the primary color palete.*/
  color: mat.m2-get-color-from-palette($my-disabled, '800-contrast')
  background: mat.m2-get-color-from-palette($my-disabled, 800)