// Button (Bootstrap button)
// Based on https://material.google.com/components/buttons.html#buttons-style

// N.B. Material design only specifies specs for default button (.btn) and dense button (.btn-sm)

@use "sass:math";

$btn-bg-active: rgba(153, 153, 153, 0.4) !default;
$btn-bg-active-inverse: rgba(204, 204, 204, 0.25) !default;
$btn-bg-disabled: $black-divider !default;
$btn-bg-disabled-inverse: $white-divider !default;
$btn-border-radius: $border-radius !default;
$btn-block-margin-y: $spacer-xs !default;
$btn-color: $black-primary !default;
$btn-color-disabled: rgba(0, 0, 0, 0.26) !default;
$btn-color-disabled-inverse: rgba(255, 255, 255, 0.3) !default;
$btn-elevation-shadow: map-get($elevation-shadows, 2) !default;
$btn-elevation-shadow-active: map-get($elevation-shadows, 8) !default;
$btn-font-weight: $font-weight-medium !default;
$btn-line-height: 1 !default;
$btn-min-width: 0 !default;
$btn-overlay: $black-divider !default;
$btn-overlay-inverse: $white-divider !default;

$btn-font-size: 0.875rem !default;
$btn-font-size-lg: 0.9375rem !default;
$btn-font-size-sm: 0.8125rem !default;
$btn-height: 2.75rem !default;
$btn-height-lg: 2.75rem !default;
$btn-height-sm: 2.5rem !default;
$btn-padding-x: 1rem !default;
$btn-padding-x-lg: $btn-padding-x !default;
$btn-padding-x-sm: $btn-padding-x !default;
$btn-padding-y: (($btn-height - $btn-font-size * $btn-line-height) * 0.5) !default;
$btn-padding-y-lg: (($btn-height-lg - $btn-font-size-lg * $btn-line-height) * 0.5) !default;
$btn-padding-y-sm: (($btn-height-sm - $btn-font-size-sm * $btn-line-height) * 0.5) !default;

@if $theme == 'dark' {
  $btn-bg-active: rgba(153, 153, 153, 0.4);
  $btn-bg-active-inverse: rgba(204, 204, 204, 0.25);
  $btn-bg-disabled: $black-divider;
  $btn-bg-disabled-inverse: $white-divider;
  $btn-color: $material-color-grey-200;
  $btn-color-disabled: rgba(0, 0, 0, 0.26);
  $btn-color-disabled-inverse: rgba(255, 255, 255, 0.3);
  $btn-elevation-shadow: map-get($elevation-shadows, 2);
  $btn-elevation-shadow-active: map-get($elevation-shadows, 8);
  $btn-overlay: $black-divider;
  $btn-overlay-inverse: $white-divider;
}

// Button: floating action button
// Based on https://material.google.com/components/buttons-floating-action-button.html#buttons-floating-action-button-floating-action-button

$btn-float-dropdown-inner-spacer-y: 1rem !default;
$btn-float-elevation-shadow: map-get($elevation-shadows, 6) !default;
$btn-float-elevation-shadow-active: map-get($elevation-shadows, 12) !default;
$btn-float-size: 3.5rem !default;
$btn-float-size-sm: 2.5rem !default;

// Button: toggle buttons (Boostrap button group)
// Based on https://material.io/guidelines/components/buttons.html#buttons-toggle-buttons

$btn-group-bg: $white-primary !default;
$btn-group-inner-spacer-x: 1px !default;
$btn-group-inner-spacer-y: 1px !default;
$btn-group-toggle-opacity: 0.7 !default;

@if $theme == 'dark' {
  $btn-group-bg: $dark-theme-3;
}

// Card (Bootstrap card)
// Based on https://material.google.com/components/cards.html#cards-usage

$card-action-inner-spacer-x: 0.5rem !default;
$card-action-inner-spacer-y: 0.25rem !default;
$card-action-padding-x: 0.5rem !default;
$card-action-padding-y: 0.5rem !default;
$card-bg: $white !default;
$card-border-color: $border-color !default;
$card-border-radius: $border-radius !default;
$card-border-width: $border-width !default;
$card-columns-count: 2 !default;
$card-columns-count-desktop: 3 !default;
$card-elevation-shadow: map-get($elevation-shadows, 2) !default;
$card-elevation-shadow-hover: map-get($elevation-shadows, 8) !default;
$card-inner-spacer-x: 1rem !default;
$card-inner-spacer-y: 1rem !default;
$card-margin-x: $spacer-sm !default;
$card-margin-y: $spacer-sm !default;
$card-padding-x: 1rem !default;
$card-padding-y: 1rem !default;

@if $theme == 'dark' {
  $card-bg: $dark-theme-2;
  $card-border-color: $border-color;
}

// Chip
// Based on https://material.google.com/components/chips.html#chips-specs

$chip-bg: $material-color-grey-300 !default;
$chip-bg-active: $material-color-grey-400 !default;
$chip-color: $black-primary !default;
$chip-elevation-shadow-hover: map-get($elevation-shadows, 2) !default;
$chip-font-size: 0.875rem !default;
$chip-font-weight: $font-weight-regular !default;
$chip-height: 2rem !default;
$chip-icon-bg: theme-color(secondary) !default;
$chip-icon-font-size: 1rem !default;
$chip-inner-spacer-x: 0.25rem !default;
$chip-line-height: 1 !default;
$chip-padding-x: 0.75rem !default;

@if $theme == 'dark' {
  $chip-bg: $material-color-grey-300;
  $chip-bg-active: $material-color-grey-400;
  $chip-color: $material-color-grey-200;
}

// Data table (Bootstrap table)
// Based on https://material.google.com/components/data-tables.html#data-tables-structure

$table-bg: none !default;
$table-bg-active: rgba(0, 0, 0, 0.07);
$table-bg-active-hover: rgba(0, 0, 0, 0.07);
$table-bg-accent: rgba(0, 0, 0, 0.04);
$table-bg-hover: rgba(0, 0, 0, 0.07);
$table-border-color: $border-color-solid !default;
$table-border-width: $border-width !default;
$table-cell-padding-x: 1.75rem !default;
$table-cell-padding-x-alt: 1rem !default;
$table-line-height: $line-height-base !default;
$table-margin-y: $spacer !default;
$table-striped-order: odd !default;

$table-dark-bg: $dark-theme-4 !default;
$table-dark-bg-accent: $dark-theme-3 !default;
$table-dark-bg-hover: $dark-theme-2 !default;
$table-dark-border-color: $dark-theme-3 !default;
$table-dark-color: $white-primary !default;

$table-tbody-cell-height: 3rem !default;
$table-tbody-color: $black-primary !default;
$table-tbody-font-size: 0.8125rem !default;
$table-tbody-font-weight: $font-weight-regular !default;
$table-tbody-padding-y: (($table-tbody-cell-height - $table-tbody-font-size * $table-line-height) * 0.5) !default;

$table-tfoot-cell-height: 2.5rem !default;
$table-tfoot-color: $black-secondary !default;
$table-tfoot-font-size: 0.75rem !default;
$table-tfoot-font-weight: $font-weight-regular !default;
$table-tfoot-padding-y: (($table-tfoot-cell-height - $table-tfoot-font-size * $table-line-height) * 0.5) !default;

$table-thead-bg: $table-bg-accent !default;
$table-thead-cell-height: $table-tfoot-cell-height !default;
$table-thead-color: $table-tfoot-color !default;
$table-thead-font-size: $table-tfoot-font-size !default;
$table-thead-font-weight: $font-weight-medium !default;
$table-thead-padding-y: (($table-thead-cell-height - $table-thead-font-size * $table-line-height) * 0.5) !default;

$table-sm-cell-padding-x: 1rem !default;
$table-sm-cell-padding-x-alt: 1rem !default;
$table-sm-tbody-cell-height: 2.25rem !default;
$table-sm-tbody-padding-y: (($table-sm-tbody-cell-height - $table-tbody-font-size * $table-line-height) * 0.5) !default;
$table-sm-tfoot-cell-height: 2.0rem !default;
$table-sm-tfoot-padding-y: (($table-sm-tfoot-cell-height - $table-tfoot-font-size * $table-line-height) * 0.5) !default;
$table-sm-thead-cell-height: $table-sm-tfoot-cell-height !default;
$table-sm-thead-padding-y: (($table-sm-thead-cell-height - $table-thead-font-size * $table-line-height) * 0.5) !default;

@if $theme == 'dark' {
  $table-bg: none;
  $table-bg-active: rgba(255, 255, 255, 0.05);
  $table-bg-active-hover: rgba(255, 255, 255, 0.05);
  $table-bg-accent: rgba(255, 255, 255, 0.03);
  $table-bg-hover: rgba(255, 255, 255, 0.05);
  $table-border-color: $theme-color-4;
  $table-border-width: 0;

  $table-dark-bg: $dark-theme-4;
  $table-dark-bg-accent: $dark-theme-3;
  $table-dark-bg-hover: $dark-theme-2;
  $table-dark-border-color: $dark-theme-3;
  $table-dark-color: $white-primary;

  $table-tbody-color: $material-color-grey-400;

  $table-tfoot-color: $white-secondary;

  $table-thead-bg: $table-bg-accent;
  $table-thead-color: $table-tfoot-color;
}

// Dialog (Bootstrap modal)
// Based on https://material.google.com/components/dialogs.html#dialogs-specs

$dialog-backdrop-bg: $black-hint !default;
$dialog-border-radius: $border-radius !default;
$dialog-content-bg: $white !default;
$dialog-elevation-shadow: map-get($elevation-shadows, 24) !default;
$dialog-footer-btn-min-width: 4rem !default;
$dialog-footer-btn-stacked-height: 3rem !default;
$dialog-footer-btn-stacked-padding-x: 1rem !default;
$dialog-footer-btn-stacked-padding-y: (($dialog-footer-btn-stacked-height - $btn-font-size * $btn-line-height) * 0.5) !default;
$dialog-footer-inner-spacer-x: 0.5rem !default;
$dialog-footer-padding-x: 0.5rem !default;
$dialog-footer-padding-y: 0.5rem !default;
$dialog-margin-x: $spacer-lg !default;
$dialog-margin-y: $spacer-lg !default;
$dialog-padding-x: 1.5rem !default;
$dialog-padding-y: 1.25rem !default;
$dialog-transition-scale: $transition-scale !default;
$dialog-width: 35rem !default;
$dialog-width-lg: 52.5rem !default;
$dialog-width-sm: 17.5rem !default;

@if $theme == 'dark' {
  $dialog-backdrop-bg: $black-hint;
  $dialog-content-bg: $dark-theme-2;
}

// Expansion panel (Bootstrap list group)
// Based on https://material.google.com/components/expansion-panels.html#expansion-panels-specs

$expansion-panel-bg: $white !default;
$expansion-panel-bg-active: $material-color-grey-200 !default;
$expansion-panel-border-color: $border-color !default;
$expansion-panel-border-radius: $border-radius !default;
$expansion-panel-border-width: $border-width !default;
$expansion-panel-color: $black-primary !default;
$expansion-panel-color-disabled: $black-hint !default;
$expansion-panel-elevation-shadow: map-get($elevation-shadows, 1) !default;
$expansion-panel-font-size: 0.9375rem !default;
$expansion-panel-footer-btn-min-width: 4rem !default;
$expansion-panel-footer-inner-spacer-x: 0.5rem !default;
$expansion-panel-footer-inner-spacer-y: 0.25rem !default;
$expansion-panel-footer-padding-x: 0.5rem !default;
$expansion-panel-height: 3rem !default;
$expansion-panel-inner-spacer-x: 1rem !default;
$expansion-panel-inner-spacer-y: 1rem !default;
$expansion-panel-line-height: $line-height-base !default;
$expansion-panel-margin-y: $spacer !default;
$expansion-panel-padding-x: 1.5rem !default;
$expansion-panel-padding-y: (($expansion-panel-height - $expansion-panel-font-size * $expansion-panel-line-height) * 0.5) !default;

@if $theme == 'dark' {
  $expansion-panel-bg: $dark-theme-3;
  $expansion-panel-bg-active: $dark-theme-4;
  $expansion-panel-border-color: $border-color;
  $expansion-panel-border-width: $border-width;
  $expansion-panel-color: $material-color-grey-200;
  $expansion-panel-color-disabled: $white-hint;
}

// Menu (Bootstrap dropdown)
// Based on https://material.google.com/components/menus.html#menus-specs

$menu-bg: $white !default;
$menu-border-radius: $border-radius !default;
$menu-divider-bg: $border-color !default;
$menu-font-size: .8rem !default;
$menu-font-size-cascading: 0.9375rem !default;
$menu-font-weight: $font-weight-regular !default;
$menu-elevation-shadow: map-get($elevation-shadows, 8) !default;
$menu-header-color: $black-primary !default;
$menu-line-height: 1.5rem !default;
$menu-line-height-cascading: $menu-line-height !default;
$menu-link-bg: transparent !default;
$menu-link-bg-hover: $material-color-grey-100 !default;
$menu-link-color: $black-primary !default;
$menu-link-color-disabled: $black-hint !default;
$menu-link-height: 3rem !default;
$menu-link-height-cascading: 2rem !default;
$menu-link-padding-x: 1rem !default;
$menu-link-padding-x-cascading: 1.5rem !default;
$menu-link-padding-y: (($menu-link-height - $menu-line-height) * 0.5) !default;
$menu-link-padding-y-cascading: (($menu-link-height-cascading - $menu-line-height-cascading) * 0.5) !default;
$menu-min-width: 7rem !default;
$menu-min-width-cascading: 20rem !default;
$menu-padding-y: 0.3rem !default;
$menu-padding-y-cascading: 1rem !default;

@if $theme == 'dark' {
  $menu-bg: $dark-theme-3;
  $menu-divider-bg: $border-color;
  $menu-header-color: $material-color-grey-200;
  $menu-link-bg: transparent;
  $menu-link-bg-hover: $dark-theme-4;
  $menu-link-color: $material-color-grey-200;
  $menu-link-color-disabled: $white-hint;
}

// Navigation drawer
// Based on https://material.google.com/patterns/navigation-drawer.html#navigation-drawer-specs

$navdrawer-backdrop-bg: $dialog-backdrop-bg !default;
$navdrawer-border-color: $border-color !default;
$navdrawer-border-width: $border-width !default;
$navdrawer-content-bg: $dialog-content-bg !default;
$navdrawer-divider-bg: $border-color !default;
$navdrawer-elevation-shadow: map-get($elevation-shadows, 16) !default;
$navdrawer-gutter-width: 3.5rem !default;
$navdrawer-header-bg: $material-color-grey-100 !default;
$navdrawer-header-border-color: $border-color !default;
$navdrawer-header-border-width: $border-width !default;
$navdrawer-inner-spacer-x: 1rem !default;
$navdrawer-inner-spacer-y: 0.5rem !default;
$navdrawer-nav-icon-color: $black-secondary !default;
$navdrawer-nav-icon-width: 2rem !default;
$navdrawer-nav-link-bg-hover: $material-color-grey-300 !default;
$navdrawer-nav-link-color: $black-primary !default;
$navdrawer-nav-link-color-active: theme-color(primary) !default;
$navdrawer-nav-link-color-disabled: $black-hint !default;
$navdrawer-nav-link-font-size: 0.875rem !default;
$navdrawer-nav-link-font-weight: $font-weight-medium !default;
$navdrawer-nav-link-height: 3rem !default;
$navdrawer-subheader-color: $black-hint !default;
$navdrawer-subheader-font-size: 0.875rem !default;
$navdrawer-subheader-font-weight: $font-weight-medium !default;
$navdrawer-subheader-height: 3rem !default;
$navdrawer-width: 17.5rem !default;

@if $theme == 'dark' {
  $navdrawer-backdrop-bg: $dialog-backdrop-bg;
  $navdrawer-border-color: $border-color;
  $navdrawer-border-width: 0;
  $navdrawer-content-bg: $dialog-content-bg;
  $navdrawer-divider-bg: $border-color;
  $navdrawer-header-bg: $dark-theme-3;
  $navdrawer-header-border-color: $border-color;
  $navdrawer-header-border-width: 0;
  $navdrawer-nav-icon-color: $material-color-grey-700;
  $navdrawer-nav-link-bg-hover: $dark-theme-4;
  $navdrawer-nav-link-color: $material-color-grey-400;
  $navdrawer-nav-link-color-disabled: $material-color-grey-600;
  $navdrawer-subheader-color: $material-color-grey-400;
}

// Picker
// Based on https://material.google.com/components/pickers.html#pickers-date-pickers

$picker-border-radius: $border-radius !default;
$picker-cell-size: 2.5rem !default;
$picker-content-bg: $dialog-content-bg !default;
$picker-day-bg-selected: theme-color(primary) !default;
$picker-day-color-disabled: $black-hint !default;
$picker-day-color-today: theme-color(primary) !default;
$picker-elevation-shadow: $dialog-elevation-shadow !default;
$picker-header-bg: theme-color(primary) !default;
$picker-header-padding-x: 1.5rem !default;
$picker-header-padding-y: 1rem !default;
$picker-holder-bg: $dialog-backdrop-bg !default;
$picker-inner-spacer-x: 0.5rem !default;
$picker-inner-spacer-y: 0.5rem !default;
$picker-margin-x: $dialog-margin-x !default;
$picker-margin-y: $dialog-margin-y !default;
$picker-nav-next-icon: 'keyboard_arrow_right' !default;
$picker-nav-prev-icon: 'keyboard_arrow_left' !default;
$picker-select-bg: $black-divider !default;
$picker-select-border-radius: $border-radius !default;
$picker-select-opacity: 0.7 !default;
$picker-transition-scale: $transition-scale !default;
$picker-weekday-color: $black-hint !default;

@if $theme == 'dark' {
  $picker-content-bg: $dialog-content-bg;
  $picker-day-bg-selected: theme-color(primary);
  $picker-day-color-disabled: $black-hint;
  $picker-day-color-today: theme-color(primary);
  $picker-header-bg: theme-color(primary);
  $picker-holder-bg: $dialog-backdrop-bg;
  $picker-weekday-color: $black-hint;
}

// Progress (Bootstrap progress bar)
// Based on https://material.google.com/components/progress-activity.html#progress-activity-types-of-indicators

$progress-bar-bg: $material-color-indigo-500 !default;
$progress-bar-border-radius: 0.25rem !default;
$progress-bar-buffer-width: 1.5rem !default;
$progress-height: 0.25rem !default;
$progress-bg: $material-color-indigo-100 !default;

$progress-circular-animation-duration: 5.332s !default;
$progress-circular-bg: $material-color-indigo-500 !default;
$progress-circular-height: 2.5rem !default;
$progress-circular-spinner-width: 0.25rem !default;

@if $theme == 'dark' {
  $progress-bar-bg: $material-color-indigo-500;
  $progress-bg: $material-color-indigo-100;

  $progress-circular-bg: $material-color-indigo-500;
}

// Selection control (Bootstrap custom form control)
// Based on https://material.google.com/components/selection-controls.html

$selection-control-color: $black-secondary !default;
$selection-control-color-active: theme-color(secondary) !default;
$selection-control-color-disabled: rgba(0, 0, 0, 0.26) !default;
$selection-control-indicator-size: $material-icon-size !default;
$selection-control-radial-opacity: $black-divider-opacity !default;
$selection-control-spacer-x: math.div($material-icon-size, 3) !default;
$selection-control-spacer-y: math.div($material-icon-size, 2.5) !default;
$selection-control-thumb-bg: $material-color-grey-050 !default;
$selection-control-thumb-bg-disabled: #bdbdbd !default;
$selection-control-thumb-shadow: 0 1px 5px 0 rgba(0, 0, 0, $black-secondary-opacity) !default;
$selection-control-track-bg: $black-hint !default;
$selection-control-track-bg-disabled: $black-divider !default;
$selection-control-track-height: 1rem !default;
$selection-control-track-opacity: 0.5 !default;
$selection-control-track-width: ($selection-control-indicator-size * 2) !default;

@if $theme == 'dark' {
  $selection-control-color: $white-hint;
  $selection-control-color-active: theme-color(secondary);
  $selection-control-color-disabled: rgba(0, 0, 0, 0.26);
  $selection-control-indicator-size: $material-icon-size;
  $selection-control-radial-opacity: $black-divider-opacity;
  $selection-control-thumb-bg: $material-color-grey-050;
  $selection-control-thumb-bg-disabled: #bdbdbd;
  $selection-control-thumb-shadow: 0 1px 5px 0 rgba(0, 0, 0, $black-secondary-opacity);
  $selection-control-track-bg: $black-hint;
  $selection-control-track-bg-disabled: $black-divider;
}

$selection-control-checkbox-icon: str-replace(url('data:image/svg+xml;charset=utf8,<svg fill="#{$selection-control-color}" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"/></svg>'), '#', '%23');
$selection-control-checkbox-icon-checked: str-replace(url('data:image/svg+xml;charset=utf8,<svg fill="#{$selection-control-color-active}" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>'), '#', '%23');
$selection-control-checkbox-icon-indeterminate: str-replace(url('data:image/svg+xml;charset=utf8,<svg fill="#{$selection-control-color}" xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="24" viewBox="0 0 24 24" width="24"><g><rect fill="none" height="24" width="24"/></g><g><g><g><path d="M19,3H5C3.9,3,3,3.9,3,5v14c0,1.1,0.9,2,2,2h14c1.1,0,2-0.9,2-2V5C21,3.9,20.1,3,19,3z M17,13H7v-2h10V13z"/></g></g></g></svg>'), '#', '%23');

$selection-control-radio-icon: str-replace(url('data:image/svg+xml;charset=utf8,<svg fill="#{$selection-control-color}" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>'), '#', '%23');
$selection-control-radio-icon-checked: str-replace(url('data:image/svg+xml;charset=utf8,<svg fill="#{$selection-control-color-active}" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/></svg>'), '#', '%23');

// Slider (Bootstrap custom form control)
// Based on https://material.io/guidelines/components/sliders.html#sliders-continuous-slider

$slider-thumb-bg: theme-color(secondary) !default;
$slider-thumb-radial-opacity: $black-divider-opacity !default;
$slider-thumb-size: ($material-icon-size * 0.5) !default;
$slider-track-bg: rgba(0, 0, 0, 0.26) !default;
$slider-track-bg-active: rgba(0, 0, 0, 0.38) !default;
$slider-track-height: 0.125rem !default;

@if $theme == 'dark' {
  $slider-track-bg: $material-color-grey-800;
  $slider-track-bg-active: $material-color-grey-700;
}

// Snackbar
// Based on https://material.io/guidelines/components/snackbars-toasts.html#snackbars-toasts-specs

$snackbar-bg: #323232 !default;
$snackbar-border-radius: $border-radius !default;
$snackbar-breakpoint: sm !default;
$snackbar-btn-color: theme-color(secondary) !default;
$snackbar-btn-color-hover: theme-color-light(secondary) !default;
$snackbar-color: $white-primary !default;
$snackbar-elevation-shadow: map-get($elevation-shadows, 6) !default;
$snackbar-font-size: 0.875rem !default;
$snackbar-height-multi: 5rem !default;
$snackbar-inner-spacer-x: 1.5rem !default;
$snackbar-inner-spacer-x-desktop: 3rem !default;
$snackbar-line-height: $line-height-base !default;
$snackbar-margin-x: $spacer-lg !default;
$snackbar-margin-y: $spacer-lg !default;
$snackbar-max-width: 35.5rem !default;
$snackbar-min-width: 18rem !default;
$snackbar-padding-x: 1.5rem !default;
$snackbar-padding-y: 0.875rem !default;
$snackbar-padding-y-multi: 1.25rem !default;

// Stepper
// Based on https://material.google.com/components/steppers.html#steppers-specs

$stepper-bg: $body-bg !default;
$stepper-border-color: $material-color-grey-400 !default;
$stepper-border-width: $border-width !default;
$stepper-icon-bg: $black-hint !default;
$stepper-icon-bg-active: theme-color(primary) !default;
$stepper-icon-color: $white-primary !default;
$stepper-icon-font-size: 0.75rem !default;
$stepper-icon-font-weight: $font-weight-regular !default;
$stepper-icon-height: $material-icon-size !default;
$stepper-inner-spacer: 0.5rem !default;
$stepper-padding-x: 1.5rem !default;
$stepper-padding-y: 1.5rem !default;
$stepper-text-color: $text-hint !default;
$stepper-text-color-active: $text-primary !default;
$stepper-text-font-size: 0.875rem !default;
$stepper-text-font-weight: $font-weight-regular !default;

@if $theme == 'dark' {
  $stepper-border-color: $material-color-grey-800;
  $stepper-icon-bg: $theme-color-3;
  $stepper-icon-height: $material-icon-size;
}

// Tab (Bootstrap tab)
// Based on https://material.google.com/components/tabs.html#tabs-specs

$nav-tab-bg-hover: $black-divider !default;
$nav-tab-border-color: $border-color !default;
$nav-tab-border-width: $border-width !default;
$nav-tab-color: $text-secondary !default;
$nav-tab-color-active: $text-primary !default;
$nav-tab-color-disabled: $black-hint !default;
$nav-tab-font-size: 0.875rem !default;
$nav-tab-font-weight: $font-weight-medium !default;
$nav-tab-height: 3rem !default;
$nav-tab-indicator-bg: theme-color(secondary) !default;
$nav-tab-indicator-height: 0.125rem !default;
$nav-tab-line-height: 1 !default;
$nav-tab-link-opacity: 0.7 !default;
$nav-tab-link-padding-x: 0.75rem !default;
$nav-tab-link-padding-y: (($nav-tab-height - $nav-tab-font-size * $nav-tab-line-height) * 0.5) !default;

@if $theme == 'dark' {
  $nav-tab-bg-hover: $black-divider;
  $nav-tab-border-color: $border-color;
  $nav-tab-border-width: $border-width;
  $nav-tab-color: $text-secondary;
  $nav-tab-color-active: $text-primary;
  $nav-tab-color-disabled: $black-hint;
  $nav-tab-indicator-bg: theme-color(secondary);
}

// Text field (Bootstrap form control)
// Based on https://material.io/guidelines/components/text-fields.html#text-fields-states

$textfield-border-color: rgba(206, 212, 218, 1) !default;
$textfield-border-color-focus: theme-color(secondary) !default;
$textfield-border-color-hover: rgba(206, 212, 218, 1) !default;
$textfield-border-width: $border-width !default;
$textfield-border-width-focus: ($textfield-border-width * 2) !default;
$textfield-border-width-hover: ($textfield-border-width * 2) !default;
$textfield-color: $black-primary !default;
$textfield-color-disabled: $black-hint !default;
$textfield-hint-color: $black-secondary !default;
$textfield-margin-x: $spacer !default;
$textfield-plaintext-color: $body-color !default;

$textfield-font-size: .9rem !default;
$textfield-font-size-lg: 2.125rem !default;
$textfield-font-size-sm: 0.8125rem !default;
$textfield-height: 2.25rem !default;
$textfield-height-lg: 3.75rem !default;
$textfield-height-sm: 2rem !default;
$textfield-line-height: 1.5 !default;
$textfield-line-height-lg: 1.176471 !default;
$textfield-line-height-sm: 1.538462 !default;
$textfield-margin-y: .5rem !default;
$textfield-margin-y-lg: .75rem !default;
$textfield-margin-y-sm: .25rem !default;
$textfield-padding-x: .75rem !default;
$textfield-padding-x-lg: .75rem !default;
$textfield-padding-x-sm: .75rem !default;
$textfield-padding-y: .6rem !default;
$textfield-padding-y-lg: (($textfield-height-lg - $textfield-font-size-lg * $textfield-line-height-lg) * 0.5) !default;
$textfield-padding-y-sm: (($textfield-height-sm - $textfield-font-size-sm * $textfield-line-height-sm) * 0.5) !default;

$textfield-select-bg-size: (math.div($material-icon-size, $textfield-font-size) * 1em) !default;

@if $theme == 'dark' {
  $textfield-border-color: rgba(255, 255, 255, 0.22);
  $textfield-border-color-focus: theme-color(secondary);
  $textfield-border-color-hover: rgba(255, 255, 255, 0.47);
  $textfield-border-width: $border-width;
  $textfield-border-width-focus: ($textfield-border-width * 2);
  $textfield-border-width-hover: ($textfield-border-width * 2);
  $textfield-color: $white-secondary;
  $textfield-color-disabled: $white-hint;
  $textfield-hint-color: $white-secondary;
  $textfield-plaintext-color: $body-color;
}

// Text field: box
// Based on https://material.io/guidelines/components/text-fields.html#text-fields-text-field-boxes

$textfield-box-bg: rgba(0, 0, 0, 0.06) !default;
$textfield-box-border-radius: 4px !default;

$textfield-box-height: 3.5rem !default;
$textfield-box-height-lg: 4.25rem !default;
$textfield-box-height-sm: 2.75rem !default;
$textfield-box-label-spacer-y: .5rem !default;
$textfield-box-padding-x: .75rem !default;
$textfield-box-padding-x-lg: 1rem !default;
$textfield-box-padding-x-sm: .75rem !default;
$textfield-box-padding-y: .6rem !default;
$textfield-box-padding-y-lg: (($textfield-box-height-lg - $textfield-font-size-lg * $textfield-line-height-lg) * 0.5) !default;
$textfield-box-padding-y-sm: (($textfield-box-height-sm - $textfield-font-size-sm * $textfield-line-height-sm) * 0.5) !default;

// Text field: floating label
// Based on https://material.google.com/components/text-fields.html#text-fields-labels

$floating-label-color: $textfield-hint-color !default;
$floating-label-color-focus: theme-color(secondary) !default;
$floating-label-font-size: 0.75rem !default;
$floating-label-font-size-lg: 0.875rem !default;
$floating-label-font-size-sm: 0.625rem !default;

// Toolbar (Bootstrap navbar)
// Based on https://material.google.com/components/toolbars.html#toolbars-usage

$toolbar-color: $white-primary !default;
$toolbar-color-lighter: $white-hint !default;
$toolbar-element-bg: $black-divider !default;
$toolbar-element-border-radius: $border-radius !default;
$toolbar-element-height: 2.25rem !default;
$toolbar-element-opacity: 0.7 !default;
$toolbar-elevation-shadow: map-get($elevation-shadows, 4) !default;
$toolbar-height: 4.5rem !default;
$toolbar-inner-spacer-x: 1rem !default;
$toolbar-link-font-size: 1rem !default;
$toolbar-link-height: $toolbar-element-height !default;
$toolbar-link-line-height: 1 !default;
$toolbar-link-padding-x: 1rem !default;
$toolbar-link-padding-y: (($toolbar-link-height - $toolbar-link-font-size * $toolbar-link-line-height) * 0.5) !default;
$toolbar-padding-x: 1rem !default;
$toolbar-padding-y: 1rem !default;
$toolbar-waterfall-bg: theme-color(primary) !default;

$toolbar-dark-color: $white-primary !default;
$toolbar-dark-color-lighter: $white-hint !default;
$toolbar-dark-element-bg: $white-divider !default;

@if $theme == 'dark' {
  $toolbar-color: $material-color-grey-200;
  $toolbar-color-lighter: $black-hint;
  $toolbar-element-bg: $black-divider;
  $toolbar-waterfall-bg: theme-color(primary);

  $toolbar-dark-color: $white-primary;
  $toolbar-dark-color-lighter: $white-hint;
  $toolbar-dark-element-bg: $white-divider;
}

$toolbar-toggler-icon: str-replace(url('data:image/svg+xml;charset=utf8,<svg fill="#{$toolbar-color}" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></svg>'), '#', '%23');

// Tooltip (Bootstrap tooltip)
// Based on https://material.google.com/components/tooltips.html#tooltips-tooltips-desktop

$tooltip-bg: $material-color-grey-800 !default;
$tooltip-border-radius: $border-radius !default;
$tooltip-breakpoint: md !default;
$tooltip-color: $white-primary !default;
$tooltip-font-size: 0.875rem !default;
$tooltip-font-size-desktop: 0.875rem !default;
$tooltip-height: 2rem !default;
$tooltip-height-desktop: 1.8rem !default;
$tooltip-line-height: $line-height-base !default;
$tooltip-margin: 1.5rem !default;
$tooltip-margin-desktop: 0.875rem !default;
$tooltip-opacity: 0.9 !default;
$tooltip-padding-x: 1rem !default;
$tooltip-padding-x-desktop: 0.5rem !default;
$tooltip-padding-y: (($tooltip-height - $tooltip-font-size * $tooltip-line-height) * 0.5) !default;
$tooltip-padding-y-desktop: (($tooltip-height-desktop - $tooltip-font-size-desktop * $tooltip-line-height) * 0.5) !default;
$tooltip-scale: 0.87 !default;
$tooltip-zindex: map-get($elevations, 24) !default;

$tooltip-arrow-width: .8rem !default;
$tooltip-arrow-height: .4rem !default;
$tooltip-arrow-color: $tooltip-bg !default;
$tooltip-max-width: 200px !default;

$zindex-tooltip: 1070 !default;

@if $theme == 'dark' {
  $tooltip-bg: $material-color-grey-700;
  $tooltip-color: $white-primary;
  $tooltip-opacity: 0.9;
}
