// Quasar Sass (& SCSS) Variables
// --------------------------------------------------
// To customize the look and feel of this app, you can override
// the Sass/SCSS variables found in Quasar's source Sass/SCSS files.

// Check documentation for full list of Quasar variables

// Your own variables (that are declared here) and Quasar's own
// ones will be available out of the box in your .vue/.scss/.sass files

// It's highly recommended to change the default colors
// to match your app's branding.
// Tip: Use the "Theme Builder" on Quasar's documentation website.

@use "sass:color"

$darkBase: #151d30

$primary: #40cc3d
$secondary: #3b3440
$tertiary: #6e747f
$accent: #9C27B0

$neutral: #E0E1E2
$positive: $primary
$negative: #de2a2a
$info: #38c7ce
$warning: #ffcc24
$faded: #999999
$dark: rgba($darkBase, 80%)
$white: #ffffff
$light: #cccccc

$main-menu-background: $dark
$main-menu-background-light: rgba($primary, 10%)

$main-menu-item-hover-background: color.adjust($main-menu-background, $lightness: 12%)
$main-menu-title-color: $white
$main-menu-title-hover-color: $white
$main-menu-title-active-color: $primary
$main-menu-subtitle-color: $white
$main-menu-subtitle-hover-color: $white
$main-menu-subtitle-active-color: $primary
$main-menu-icon-color: $white
$main-menu-icon-hover-color: $white
$main-menu-icon-active-color: $primary

$main-menu-minimized-width: 56px

$call-minimized-background: $main-menu-background

$body-background: $secondary
$body-color: $secondary

$header-height: 60px
$header-height-mobile: 60px

$space-base   : 16px !default
$flex-gutter-sm : ($space-base * .5) !default
$flex-gutter-xs : ($space-base * .25) !default

$logo-margin: $flex-gutter-sm
$logo-margin-mobile: $flex-gutter-xs
$logo-min-width: 84px
$logo-max-width: 100px
$logo-max-height: $header-height

$csc-label: rgba(0,0,0,0.46)

$alert-color: $dark

$toolbar-background: $primary
$toolbar-min-height: 60px

$layout-aside-background: $main-menu-background
$layout-aside-left-width: 316px
$layout-aside-right-width: 320px

$tooltip-background: $primary

$csc-subtitle-font-size: 18px
$csc-subtitle-line-height: 2rem

$item-stripe-color: rgba(white, 6%)
$item-highlight-color: rgba(white, 10%)
$item-content-secondary-text-color: rgba($white, 70%)

$typography-font-family: 'Muli', '-apple-system', 'Helvetica Neue', Helvetica, Arial, sans-serif

$popover-background: rgba($dark, 90%)

$modal-background: $body-background
$modal-body-color: $body-color

$call-footer-height: $toolbar-min-height
$call-footer-height-big: $call-footer-height * 2
$call-footer-action-margin: 27px
$call-footer-height-mobile: $call-footer-height * 1.4

$shadow-color: #000 !default

$elevation-umbra: rgba($shadow-color, .2) !default
$elevation-penumbra: rgba($shadow-color, .14) !default
$elevation-ambient: rgba($shadow-color, .12) !default

$shadow-1: 0 1px 3px $elevation-umbra, 0 1px 1px $elevation-penumbra, 0 2px 1px -1px $elevation-ambient !default

$popover-box-shadow: $shadow-1

$loading-background: $main-menu-background

$chip-color: $dark

$conf-participant-icon-color: rgba(255, 255, 255, 0.6)
$conf-participant-box-color: rgba(21,29,48,0.8)

$cf-disabled-label: color.adjust($white, $lightness: -35%)
$cf-disabled-link: color.adjust($primary, $lightness: -35%)
$cf-disabled-btn: color.adjust($negative, $lightness: -35%)