@import "figma-tokens";
@import "brightness";

/* Colors */
$color-primary-text: $color-colorfont!default;
$color-primary--hover: darken($color-primary, 4%)!default;
$color-primary--active: darken($color-primary, 12%)!default;
$color-primary--lighten: lighten($color-primary, 4%)!default;

$color-alert--hover: darken($color-alert, 4%)!default;
$color-alert--active: darken($color-alert, 12%)!default;
$color-alert--lighten: lighten($color-alert, 4%)!default;

$color-controlbase--hover: darken($color-controlbase, 4%)!default;
$color-controlbase--active: darken($color-controlbase, 8%)!default;
$color-controlbase--lighten: lighten($color-controlbase, 4%)!default;
$color-control-font: $color-control!default;

$color-controlelement--hover: darken($color-controlelement, 4%)!default;
$color-controlelement--active: darken($color-controlelement, 12%)!default;
$color-controlelement--lighten: lighten($color-controlelement, 4%)!default;

$color-controlborder--hover: darken($color-controlborder, 4%)!default;
$color-controlborder--active: darken($color-controlborder, 12%)!default;
$color-controlborder--lighten: lighten($color-controlborder, 4%)!default;

$color-cardbase--hover: darken($color-cardbase, 4%)!default;
$color-cardbase--active: darken($color-cardbase, 12%)!default;
$color-cardbase--lighten: lighten($color-cardbase, 4%)!default;
$color-card-font: $color-colorfont!default;

$color-panel--hover: darken($color-panel, 4%)!default;
$color-panel--active: darken($color-panel, 12%)!default;
$color-panel--lighten: lighten($color-panel, 4%)!default;
$color-panel-font: $color-colorfont!default;

$color-chipsprimary--hover: darken($color-chipsprimary, 4%)!default;
$color-chipsprimary--active: darken($color-chipsprimary, 12%)!default;
$color-chipsprimary--lighten: lighten($color-chipsprimary, 4%)!default;

$color-chipssecondary--hover: darken($color-chipssecondary, 4%)!default;
$color-chipssecondary--active: darken($color-chipssecondary, 12%)!default;
$color-chipssecondary--lighten: lighten($color-chipssecondary, 4%)!default;


/** Custom styles **/
$color-panel-header: #353646!default;
$color-panel-header-text: #ffffff!default;
$color-textfield: #ffffff!default;
$color-overlay-font: $color-colorfont!default;

$style-card-shadow: initial!default;;
$style-panel-shadow: initial!default;

$data-slider-shadow-visibility: visible!default;


/* Device break points */
$tabletBreakpoint: 1050px!default;
$phoneBreakpoint: 700px!default;
$smallPhoneBreakpoint: 400px!default;