/**
 * AppBuckets UI
 *
 * _ConfigElements @ src/styles/grid/_config-elements.scss
 *
 * Defined at 11 giu 2020
 * Copyright Marco Cavanna • 2020
 *
 * ---
 * Style Configuration for all Elements
 *
 */

@use 'sass:math';


/******
    Shared Variables
******/

// ----
//  Form Variables
// ----
$form-control-color: $text !default;
$form-control-font-weight: $semi-bold !default;
$form-control-background-color: rgba(0, 0, 0, 0.05) !default;
$form-control-border-width: 2px !default;
$form-control-border-color: transparent !default;
$form-control-active-main-color: $primary !default;
$form-control-active-inverse-color: $white !default;
$form-control-focus-background-color: transparent !default;
$form-control-focus-border-color: $primary !default;


// ----
//  Icon Variables
// ----
$icon-size: inherit !default;
$icon-spacer: $spacer * .25 !default;
$icon-width: 1.5em !default;
$icon-opacity: 1 !default;
$icon-bordered-box-size: 1.65em !default;
$icon-bordered-border-width: pixel-to-em(1px) !default;


/******
    Z-Index
******/
$backdrop-z-index: 1010 !default;
$overlay-loader-z-index: 1000 !default;
$popup-z-index: 1900 !default;


/******
    Accordions
******/
$accordions-base-background: $white !default;
$accordions-disabled-background: $white-shade !default;
$accordions-padding: 1.25em !default;
$accordions-border-radius: $border-radius !default;

$accordions-closed-vertical-margins: 0 !default;
$accordions-opened-vertical-margins: 1em !default;
$accordions-opened-elevation: 3 !default;

$accordions-trigger-font-size: $h5-font-size !default;
$accordions-trigger-hover-background: $white-shade-2 !default;
$accordions-trigger-divider-color: $hr-color-light !default;
$accordions-trigger-divider-width: 1px !default;
$accordions-trigger-divider-style: solid !default;


/******
    Avatar
******/
$avatar-icon-font-size: 1em !default;
$avatar-base-size: pixel-to-em(36) !default;
$avatar-square-border-radius: $border-radius !default;
$avatar-round-border-radius: $border-radius-rounded !default;
$avatar-flex-horizontal-padding: .75em !default;
$avatar-font-weight: $bold !default;
$avatar-color: $text !default;
$avatar-inner-shadow: inset 0 0 .15em 0px rgba(0, 0, 0, .2) !default;
$avatar-base-background-color: $white-shade-2 !default;

$avatar-flat-content-color: inherit !default;
$avatar-flat-content-opacity: .65 !default;

$avatar-content-font-size: 1.15em !default;


/******
    Backdrop Configuration
******/
$backdrop-content-color: $white-shade !default;
$backdrop-color: #3b414f !default;
$backdrop-opacity: .8 !default;
$backdrop-padding: 1em !default;


/******
    Badge
******/
$badge-base-size: 1em !default;
$badge-background-color: $danger !default;
$badge-font-size: .75em !default;


/******
    Button Configuration
******/
$button-base-background-color: $cloud-light !default;
$button-height: 2.5em !default;
$button-min-width: 8em !default;
$button-font-size: 1rem !default;
$button-font-weight: $semi-bold !default;
$button-text-transform: none !default;
$button-line-height: $default-line-height !default;
$button-spacer: $spacer * .5 !default;
$button-border-radius: $border-radius !default;
$button-horizontal-padding: 1em !default;
$button-inverted-border-width: pixel-to-em(2px) !default;
$button-icon-opacity: .8 !default;
$button-fab-spacer: .5em !default;
$button-fab-base-size: 1.5em !default;

/// Set if button hover will drop shadow
$button-hover-will-drop-shadow: true !default;

/// Generate Button Variation using Colors
$generate-button-brands-variation: true !default;
$generate-button-ui-variation: true !default;


/******
    Checkbox Style
******/
$checkbox-size: pixel-to-em(24) !default;
$checkbox-label-padding: pixel-to-em(8) !default;
$checkbox-border-radius: $border-radius-normal !default;
$checkbox-background-color: $form-control-background-color !default;
$checkbox-border-width: $form-control-border-width !default;
$checkbox-border-color: $form-control-border-color !default;

$checkbox-indeterminate-background-opacity: .65 !default;
$checkbox-checked-background-color: $form-control-active-main-color !default;
$checkbox-checked-checkmark-color: $form-control-active-inverse-color !default;

$checkbox-label-font-weight: $form-control-font-weight !default;

$switch-bullet-background-color: $white !default;
$switch-bullet-size: pixel-to-em(18) !default;
$switch-rail-expand-size: pixel-to-em(2) !default;
$switch-travel-distance: $switch-bullet-size * 2.1 !default;
$switch-background-color: $checkbox-background-color !default;

$toggle-bullet-size: 1.25em !default;

$switch-label-distance: $switch-travel-distance + $checkbox-label-padding;
$switch-computed-travel-distance: $switch-travel-distance - $switch-bullet-size - $switch-rail-expand-size;


/******
    DayPicker
******/
$day-picker-header-font-size: 1.5em !default;
$day-picker-header-font-weight: $semi-bold !default;
$day-picker-day-size: 2.5em !default;
$day-picker-day-hover-background-color: transparentize($primary, .9) !default;
$day-picker-day-today-background-color: transparent !default;
$day-picker-day-today-color: $primary !default;
$day-picker-selected-day-hover-background-color: $primary-shade !default;
$day-picker-selected-font-weight: $semi-bold !default;
$day-picker-selected-color: $white !default;
$day-picker-selected-background-color: $primary !default;
$day-picker-outside-day-opacity: .5 !default;
$day-picker-day-caption-color: $text-secondary !default;
$day-picker-week-number-color: $orange !default;


/******
    Divider
******/
$divider-spacer: $spacer * 1.75 !default;
$divider-base-color: $text !default;
$divider-size: 1px !default;
$divider-color: $hr-color-light !default;
$divider-inverted-color: rgba(255, 255, 255, .5) !default;
$divider-font-weight: $semi-bold !default;


/******
    DropDown Menu
******/
$dropdown-menu-item-vertical-padding: 1em !default;
$dropdown-menu-item-horizontal-padding: 1em !default;

$dropdown-inverted-menu-item-color: $text-contrast !default;

$dropdown-menu-item-font-weight: $semi-bold !default;

$dropdown-menu-item-base-opacity: .8 !default;
$dropdown-menu-item-hover-opacity: 1 !default;
$dropdown-menu-item-border-width: 0 !default;
$dropdown-menu-item-border-style: solid !default;
$dropdown-menu-item-border-color: transparent !default;


/******
    Dropzone
******/
$dropzone-disabled-border-color: $cloud !default;
$dropzone-disabled-background-color: $cloud-light !default;
$dropzone-border-style: dashed !default;
$dropzone-border-width: 2px !default;
$dropzone-border-color: $cloud-light !default;
$dropzone-border-radius: $border-radius-big !default;
$dropzone-hover-color: $primary !default;
$dropzone-hover-border-color: $dropzone-hover-color !default;
$dropzone-hover-background-color: transparentize($dropzone-hover-border-color, .95) !default;

$dropzone-fulfilled-padding: 1em !default;


/******
    Empty Content
******/
$empty-content-vertical-spacer: 3em !default;
$empty-content-button-spacer: $empty-content-vertical-spacer * .5 !default;
$empty-content-header-opacity: .4 !default;
$empty-content-icon-size: 4.5em !default;


/******
    Field Elements
******/
$field-label-font-weight: $semi-bold !default;
$field-label-font-size: .85em !default;
$field-label-text-transform: uppercase !default;
$field-label-spacer: $spacer * .5 !default;
$field-label-color: $text-secondary !default;

$field-required-symbol-content: '*' !default;
$field-required-symbol-transform: translate(0.25em, 0) !default;
$field-required-symbol-font-size: 1.25em !default;
$field-required-symbol-color: $danger !default;
$field-required-symbol-opacity: .75 !default;

$field-icon-base-color: rgba(0, 0, 0, .35) !default;
$field-clear-icon-base-color: rgba(0, 0, 0, .25) !default;
$field-clear-icon-hover-color: rgba(0, 0, 0, .55) !default;

$field-focus-main-color: $primary !default;
$field-focus-label-color: $field-focus-main-color !default;
$field-focus-icon-color: $field-focus-main-color !default;

$field-hint-spacer: $field-label-spacer !default;
$field-hint-size: $field-label-font-size !default;


/******
    Form
******/
$form-field-spacer: $spacer !default;
$form-action-align: right !default;


/******
    Header
******/
$header-top-margin: 2em !default;
$header-bottom-margin: 1em !default;
$header-base-font-size: $h3-font-size !default;
$header-font-weight: $headers-font-weight !default;
$header-subheader-relative-font-size: .75em !default;
$header-subheader-opacity: .6 !default;
$header-actions-spacer: 1.5em !default;

$header-icon-size: $header-base-font-size !default;
$header-icon-spacer: $icon-spacer * 2 !default;
$header-centered-icon-size: $h2-font-size !default;

$header-solid-padding: 1.25em !default;
$header-solid-base-background: $cloud-light !default;
$header-solid-border-radius: $border-radius-huge !default;


/******
    Hero Button
******/
$hero-button-border-radius: $border-radius-huge !default;
$hero-button-base-background: $white !default;
$hero-button-base-color: $text !default;
$hero-button-alt-color: $white-shade !default;

$hero-button-content-padding: 1.25em !default;
$hero-button-content-font-size: 1.25em !default;
$hero-button-content-font-weight: $bold !default;
$hero-button-content-opacity: .75 !default;
$hero-button-hover-content-opacity: 1 !default;

$hero-button-icon-size: 3.5em !default;
$hero-button-icon-opacity: .25 !default;
$hero-button-icon-scale: 1 !default;
$hero-button-icon-translate: 5%, 5% !default;
$hero-button-hover-icon-opacity: .5 !default;
$hero-button-hover-icon-scale: 1.25 !default;
$hero-button-hover-icon-translate: 10%, 10% !default;

$hero-button-shadow-strength: 10px !default;
$hero-button-discreet-shadow-strength: 0 !default;
$hero-button-shadow-opacity: .6 !default;
$hero-button-discreet-shadow-opacity: .8 !default;
$hero-button-color-variations: ($blue, $teal, $green, $yellow, $orange, $red, $pink, $purple) !default;


/******
    Input Configuration
******/
$input-line-height: 18px !default;
$input-vertical-padding: 10px !default;
$input-horizontal-padding: 1em !default;
$input-placeholder-vertical-position-fix: 2px !default;

$input-font-weight: $form-control-font-weight !default;

$input-background-color: $form-control-background-color !default;

$input-border-radius: $border-radius !default;
$input-border-color: $form-control-border-color !default;
$input-border-width: $form-control-border-width !default;

$input-focus-background-color: $form-control-focus-background-color !default;
$input-focus-border-color: $form-control-focus-border-color !default;

$computed-input-line-height: strip-unit(pixel-to-em($input-line-height));
$computed-input-height: pixel-to-em($input-line-height + ($input-vertical-padding * 2));


/******
    Items
******/
$item-content-spacer: .75em !default;
$item-content-min-height: $avatar-base-size !default;
$item-min-height: $avatar-base-size !default;
$item-content-color: $text !default;
$item-header-font-weight: $semi-bold !default;
$item-header-font-size: 1em !default;
$item-text-opacity: .85 !default;
$item-text-font-weight: $regular !default;
$item-text-font-size: 1em !default;
$item-meta-divider-color: $divider-color !default;
$item-meta-opacity: .7 !default;
$item-meta-font-weight: $regular !default;
$item-meta-font-size: .85em !default;

$item-tools-opacity: .5 !default;
$item-tool-hover-color: rgba(0, 0, 0, .075) !default;

$item-clickable-border-radius: $border-radius-big !default;
$item-clickable-hover-color: rgba(0, 0, 0, .05) !default;

$item-solid-border-radius: $item-clickable-border-radius * 1.25 !default;
$item-solid-background-color: rgba(0, 0, 0, .05) !default;
$item-solid-clickable-hover-elevation: 0 !default;

$items-group-spacer: 1.25em !default;
$items-divider-color: $divider-color !default;

$item-progress-spacer: .25em !default;


/******
    Labels
******/
$label-base-background-color: $button-base-background-color !default;
$label-font-size: .9em !default;
$label-font-weight: $button-font-weight !default;
$label-border-radius: $border-radius-rounded !default;
$label-padding-vertical: .35em !default;
$label-padding-horizontal: .75em !default;
$label-content-spacer: .5em !default;
$labels-spacer: .25em !default;


/******
    Loader
******/
$loader-in-component-size: pixel-to-em(20px) !default;
$loader-in-component-stroke-size: .2em !default;
$loader-in-component-background-color: rgba(0, 0, 0, 0.15) !default;
$loader-in-component-spinner-color: rgba(255, 255, 255, 0.85) !default;

$loader-stroke-size: .3em !default;
$loader-background-color: transparentize($text, .85) !default;
$loader-spinner-color: transparentize($text, .5) !default;

$loader-indeterminate-min-width: 10rem !default;

$loader-dots-animation-duration: 1600ms !default;
$loader-dots-animation-delay: 250ms !default;
$loader-dots-timing-function: ease-in-out !default;

$loader-circular-dots-dot-size: 1.25em !default;
$loader-circular-dots-dot-starting-opacity: .3 !default;
$loader-circular-dots-rotate-animation-duration: 1600ms !default;
$loader-circular-dots-rotate-timing-function: linear !default;
$loader-circular-dots-dot-animation-duration: 1000ms !default;
$loader-circular-dots-dot-animation-delay: 400ms !default;
$loader-circular-dots-dot-timing-function: linear !default;

$loader-sizing: (
  extra-small: 1rem,
  small: 1.75rem,
  normal: 2.5rem,
  large: 3.5rem,
  big: 5rem,
  huge: 7rem
) !default;
$loader-font-size: (
  extra-small: .5em,
  small: .75em,
  normal: 1em,
  large: 1.25em,
  big: 1.5em,
  huge: 2em
) !default;


/******
    Menu
******/
$menu-vertical-max-width: 15em !default;

$menu-divider-spacer: 0 !default;
$menu-divider-with-content-spacer: .25em !default;

$menu-header-item-text-transform: uppercase !default;
$menu-header-item-font-weight: $semi-bold !default;
$menu-header-item-color: $text !default;
$menu-header-item-font-size: 1em !default;

$menu-base-border-color: $cloud-light !default;
$menu-base-border-width: 2px !default;
$menu-base-border-style: solid !default;

$menu-bordered-border-radius: $border-radius !default;
$menu-bordered-border-color: $menu-base-border-color !default;
$menu-bordered-border-width: 1px !default;
$menu-bordered-border-style: solid !default;

$menu-item-padding-horizontal: 1em !default;
$menu-item-padding-vertical: .75em !default;
$menu-item-text-transform: none !default;
$menu-item-icon-spacer: .75em !default;

$menu-base-item-font-weight: $regular !default;
$menu-base-item-color: $cloud-dark !default;
$menu-base-item-active-color: $text !default;
$menu-base-item-hover-border-color: $cloud !default;
$menu-base-item-active-border-color: $menu-base-item-active-color !default;

$menu-text-item-hover-color: $text-secondary !default;

$menu-tab-item-spacer: .5em !default;
$menu-tab-item-font-weight: $semi-bold !default;
$menu-tab-item-border-radius: $border-radius !default;
$menu-tab-item-base-background: $button-base-background-color !default;
$menu-tab-item-base-color: $text !default;
$menu-tab-item-active-background: $primary !default;
$menu-tab-item-active-color: $white !default;
$menu-tab-item-active-contrast-color: $text !default;
$menu-tab-item-active-shadow: inset 0 0 3px 0 rgba(0, 0, 0, .2);
$menu-tab-item-active-text-shadow: 0 0 3px rgba(0, 0, 0, .2);


/******
    Message Element
******/
$message-background-color: $white-shade-2 !default;
$message-padding: 1em 1.5em !default;
$message-font-color: $text-secondary !default;
$message-border-radius: $border-radius !default;
$message-border-width: 1px !default;
$message-border-color: $cloud-light !default;
$message-spacer: 1em !default;
$message-content-opacity: .85 !default;
$message-header-font-size: 1.25em !default;
$message-dismiss-font-size: 1.25em !default;


/******
    Modal
******/
$modal-transition-offset: -2em !default;
$modal-transition-duration: $transition-duration !default;
$modal-transition-timing-function: $transition-ease !default;

$modal-background-color: $white !default;
$modal-color: $text !default;
$modal-border-radius: $border-radius-big * 2 !default;
$modal-top-offset: 75px !default;
$modal-bottom-offset: 30px !default;
$modal-vertical-padding: 2em !default;
$modal-horizontal-padding: 2em !default;
$modal-elevation: 5 !default;

$modal-icon-size: 3em !default;

$modal-close-button-size: 2em !default;

$modal-header-font-size: 1.5em !default;
$modal-header-icon-size: 2.5em !default;

$modal-actions-divider-border-color: $divider-color !default;

$modal-size-small: 380px !default;
$modal-size-default: 560px !default;
$modal-size-large: 720px !default;
$modal-size-big: 920px !default;
$modal-size-huge: 1200px !default;


/******
    Panels
******/
$panel-background-color: $white !default;
$panel-border-radius: $border-radius-big * 2 !default;
$panel-bottom-spacer: $spacer !default;
$panel-vertical-padding: 1.25em !default;
$panel-horizontal-padding: 1.5em !default;
$panel-fab-size: 1.15em !default;
$panel-appearance-border-width: 0.2rem !default;
$panel-appearance-border-consistence: .5rem !default;


/******
    PopUp
******/
$popup-background: $white-shade !default;
$popup-content-background: $white !default;
$popup-color: $text !default;

$popup-inverted-background: $backdrop-color !default;
$popup-inverted-background-opacity: $backdrop-opacity !default;
$popup-inverted-color: $white-shade !default;

$popup-border-radius: $border-radius !default;
$popup-min-width: 18rem !default;
$popup-max-width: 25rem !default;
$popup-border: none !default;
$popup-content-padding: 0.4em !default;

$popup-elevation: 4 !default;

$popup-basic-font-size: .85em !default;
$popup-basic-min-width: min-content !default;
$popup-basic-max-width: 20rem !default;
$popup-basic-line-height: 1.25 !default;

$popup-basic-content-padding: $popup-content-padding !default;

$popup-basic-border: none !default;
$popup-basic-elevation: 2 !default;


/******
    Progress
******/
$progress-bar-background: $cloud-light !default;
$progress-value-background: $cloud !default;

$progress-indicator-size: .9em !default;
$progress-indicator-font-weight: $bold !default;

$linear-progress-indicator-color: rgba(255, 255, 255, .75) !default;
$linear-progress-height: 1.25em !default;

$linear-progress-limits-color: $text-secondary !default;
$linear-progress-limits-font-weight: $semi-bold !default;
$linear-progress-limits-spacer: .25em !default;

$circular-progress-linecap: round !default;
$circular-progress-linejoin: round !default;

$circular-progress-indicator-color: $text-secondary !default;


/******
    Ripples
******/
$ripple-base-opacity: .25 !default;
$ripple-base-color: $white !default;
$ripple-inverted-color: $text-secondary !default;
$ripple-animation-duration: 850ms !default;


/******
    Section
******/
$section-spacer: 1.25em !default;
$section-label-font-weight: $field-label-font-weight !default;
$section-label-text-transform: $field-label-text-transform !default;
$section-label-color: $field-label-color !default;
$section-label-font-size: $field-label-font-size !default;
$section-label-spacer: $field-label-spacer !default;
$section-divided-border-style: solid !default;
$section-divided-border-width: 1px !default;
$section-divided-border-color: $divider-color !default;


/******
    Select
******/
$select-multi-value-spacer: .5em !default;
$select-multi-value-color: $white !default;
$select-multi-value-background: $primary !default;
$select-multi-value-border-radius: $border-radius !default;
$select-multi-value-label-padding: .75em !default;


/******
    Slider
******/
$slider-rail-height: pixel-to-em(6) !default;
$slider-rail-border-radius: math.div($slider-rail-height, 2) !default;
$slider-rail-background: $cloud-light !default;

$slider-track-base-background: $primary !default;

$slider-handle-size: $slider-rail-height * 3 !default;
$slider-handle-border-radius: 100% !default;
$slider-handle-border-style: solid !default;
$slider-handle-border-width: .25em !default;
$slider-handle-border-color: $slider-track-base-background !default;
$slider-handle-background: $white !default;

$slider-step-size: math.div($slider-handle-size, 2) !default;
$slider-step-border-width: math.div($slider-handle-border-width, 1.5) !default;
$slider-inactive-dot-border-color: $slider-rail-background !default;

$slider-mark-font-size: $field-label-font-size !default;
$slider-mark-color: $field-label-color !default;
$slider-mark-font-weight: $field-label-font-weight !default;
$slider-active-mark-color: $slider-track-base-background !default;


/******
    Table Layout
******/
$table-columns-gutter: $columns-gutter * 2 !default;
$table-rows-gutter: $columns-gutter * 2 !default;

$table-compressed-columns-gutter: $table-columns-gutter * .75 !default;
$table-compressed-rows-gutter: $table-rows-gutter * .75 !default;

$table-header-font-weight: $semi-bold !default;
$table-header-color: $text-secondary !default;
$table-header-text-transform: uppercase !default;
$table-header-content-text-transform: none !default;
$table-header-content-font-size: .85em !default;
$table-header-content-opacity: 1 !default;
$table-header-meta-text-transform: $table-header-text-transform !default;
$table-header-meta-opacity: .75 !default;
$table-header-meta-font-size: .85em !default;

$table-header-border-style: solid !default;
$table-header-border-color: $cloud-light !default;
$table-header-border-width: 2px !default;

$table-clickable-row-hover-color: transparentize($white-shade, .5) !default;

$table-sortable-header-hover-color: $text !default;
$table-sortable-header-active-color: $primary !default;
$table-sortable-icon-spacer: $icon-spacer !default;
$table-sortable-icon-opacity: .5 !default;
$table-sortable-icon-sorted-opacity: 1 !default;

$table-body-border-style: solid !default;
$table-body-border-color: $cloud-light !default;
$table-body-border-width: 1px !default;
$table-body-border-after-last-row: false !default;

$table-footer-border-style: solid !default;
$table-footer-border-color: $cloud-light !default;
$table-footer-border-width: 2px !default;

$table-cell-header-font-weight: $semi-bold !default;
$table-cell-content-font-size: .85em !default;
$table-cell-content-opacity: .75 !default;
$table-cell-content-spacer: .25em !default;

$table-color-variation-transparency: .9 !default;


/******
    Toast Element
******/
$toast-border-radius: $border-radius !default;
$toast-content-padding: get-em-spacer(3) !default;
$toast-background-color: rgba(0, 0, 0, .8) !default;
$toast-font-color: $white !default;
$toast-font-weight: $semi-bold !default;
$toast-shadow-elevation: 4 !default;
$toast-icon-size: 1.25em !default;
$toast-content-opacity: .75 !default;
$toast-width-on-tablet-up: 480px !default;
$toast-dismiss-icon-opacity: .75 !default;
$toast-clickable-hover-opacity: .85 !default;