$colors: (
  "blue": #004699,
  "green": #00964e,
  "yellow": #ffed00,
  "cyan": #009ee3,
  "pink": #e5007d,
  "indigo": #6366f1,
  "teal": #14b8a6,
  "orange": #f97316,
  "bluegray": #64748b,
  "purple": #a855f7,
  "red": #e53009,
  "primary": $primaryColor,
  "htwk-yellow": #ffed00,
  "htwk-yellow-24": rgba(255, 237, 0, 0.24),
  "htwk-yellow-16": rgba(255, 237, 0, 0.16),
  "htwk-yellow-01": rgba(255, 237, 0, 0.1),
  "htwk-magenta": #e5007d,
  "htwk-rot": #e53009,
  "htwk-gruen": #00964e,
  "htwk-cyan": #009ee3,
  "htwk-blau": #004699,
  "htwk-silbergrau": #bec3c6,
  "htwk-silbergrau-80": #cbd3d1,
  "htwk-silbergrau-60": #d8dedc,
  "htwk-silbergrau-40": #e5e9e8,
  "htwk-grau-140": #1b2022,
  "htwk-grau-120": #242b2d,
  "htwk-grau": #2e3639,
  "htwk-grau-80": #575e60,
  "htwk-grau-60": #818688,
  "htwk-grau-40": #abaeaf,
  "htwk-dunkelblau": #022541,
  "htwk-dunkelblau-80": #345067,
  "htwk-dunkelblau-60": #677c8d,
  "htwk-dunkelblau-40": #99a7b3,
  "htwk-schwarz": #000000,
);

//shades
$shade000: rgba(255, 255, 255, 0.87) !default; //text color
$shade100: rgba(255, 255, 255, 0.6) !default; //text secondary color
$shade500: #6b7280 !default;
$shade600: map-get(
  $colors,
  "htwk-grau-140"
) !default; //input bg, border, divider
$shade700: map-get($colors, "htwk-grau") !default; //menu bg
$shade800: map-get($colors, "htwk-grau") !default; //elevated surface
$shade900: rgba(map-get($colors, "htwk-schwarz"), 1) !default; //ground surface

$hoverBg: rgba(255, 255, 255, 0.03) !default;

//global
$fontFamily:
  "Source Sans Pro",
  -apple-system,
  BlinkMacSystemFont,
  Segoe UI,
  Twemoji Country Flags,
  Roboto,
  Arial,
  sans-serif,
  Apple Color Emoji,
  Segoe UI Emoji,
  Segoe UI Symbol !default;
$fontSize: 1rem !default;
$fontWeight: normal !default;
$textColor: $shade000 !default;
$textSecondaryColor: $shade100 !default;
$borderRadius: 6px !default;
$transitionDuration: 0.2s !default;
$formElementTransition:
  background-color $transitionDuration,
  color $transitionDuration,
  border-color $transitionDuration,
  box-shadow $transitionDuration !default;
$actionIconTransition:
  background-color $transitionDuration,
  color $transitionDuration,
  box-shadow $transitionDuration !default;
$listItemTransition: box-shadow $transitionDuration !default;
$primeIconFontSize: 1rem !default;
$divider: 1px solid $shade600 !default;
$inlineSpacing: 0.5rem !default; //spacing between inline elements
$disabledOpacity: 0.4 !default; //opacity of a disabled item
$maskBg: rgba(0, 0, 0, 0.4) !default; //modal mask bg color
$loadingIconFontSize: 2rem !default;
$errorColor: map-get($colors, "htwk-rot") !default;

//scale
$scaleSM: 0.875 !default;
$scaleLG: 1.25 !default;

//focus
$focusOutlineColor: $primaryLightestColor !default;
$focusOutline: 0 none !default;
$focusOutlineOffset: 0 !default;
$inputFocusOutlineOffset: $focusOutlineOffset !default;
$focusShadow: 0 0 0 0.2rem rgba(map-get($colors, "htwk-yellow"), 0.5) !default;

//action icons
$actionIconWidth: 2rem !default;
$actionIconHeight: 2rem !default;
$actionIconBg: transparent !default;
$actionIconBorder: 0 none !default;
$actionIconColor: $shade100 !default;
$actionIconHoverBg: $hoverBg !default;
$actionIconHoverBorderColor: transparent !default;
$actionIconHoverColor: $shade000 !default;
$actionIconBorderRadius: 50% !default;

//input field (e.g. inputtext, spinner, inputmask)
$inputPadding: 0.75rem 0.75rem !default;
$inputTextFontSize: 1rem !default;
$inputBg: $shade900 !default;
$inputTextColor: $shade000 !default;
$inputIconColor: $shade100 !default;
$inputBorder: 1px solid $shade600 !default;
$inputHoverBorderColor: $primaryColor !default;
$inputFocusBorderColor: $primaryColor !default;
$inputErrorBorderColor: $errorColor !default;
$inputPlaceholderTextColor: $shade100 !default;
$inputFilledBg: $shade600 !default;
$inputFilledHoverBg: $inputFilledBg !default;
$inputFilledFocusBg: $inputFilledBg !default;

//input groups
$inputGroupBg: $shade800 !default;
$inputGroupTextColor: $shade100 !default;
$inputGroupAddOnMinWidth: 3rem !default;

//input lists (e.g. dropdown, autocomplete, multiselect, orderlist)
$inputListBg: $shade800 !default;
$inputListTextColor: $shade000 !default;
$inputListBorder: $inputBorder !default;
$inputListPadding: 0.75rem 0 !default;
$inputListItemPadding: 0.75rem 1.25rem !default;
$inputListItemBg: transparent !default;
$inputListItemTextColor: $shade000 !default;
$inputListItemHoverBg: $hoverBg !default;
$inputListItemTextHoverColor: $shade000 !default;
$inputListItemFocusBg: $shade600 !default;
$inputListItemTextFocusColor: $shade000 !default;
$inputListItemBorder: 0 none !default;
$inputListItemBorderRadius: 0 !default;
$inputListItemMargin: 0 !default;
$inputListItemFocusShadow: inset 0 0 0 0.15rem $focusOutlineColor !default;
$inputListHeaderPadding: 0.75rem 1.25rem !default;
$inputListHeaderMargin: 0 !default;
$inputListHeaderBg: $shade800 !default;
$inputListHeaderTextColor: $shade000 !default;
$inputListHeaderBorder: 1px solid $shade600 !default;

//inputs with overlays (e.g. autocomplete, dropdown, multiselect)
$inputOverlayBg: $inputListBg !default;
$inputOverlayHeaderBg: $inputListHeaderBg !default;
$inputOverlayBorder: 1px solid $shade600 !default;
$inputOverlayShadow:
  0 2px 4px -1px rgba(0, 0, 0, 0.2),
  0 4px 5px 0 rgba(0, 0, 0, 0.14),
  0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;

//password
$passwordMeterBg: $shade600 !default;
$passwordWeakBg: #eb9a9c !default;
$passwordMediumBg: #ffcf91 !default;
$passwordStrongBg: #93deac !default;

//button
$buttonPadding: 0.75rem 1.25rem !default;
$buttonIconOnlyWidth: 3rem !default;
$buttonIconOnlyPadding: 0.75rem 0 !default;
$buttonBg: $primaryColor !default;
$buttonTextColor: $primaryTextColor !default;
$buttonBorder: 1px solid $primaryColor !default;
$buttonHoverBg: $primaryLightColor !default;
$buttonTextHoverColor: $primaryTextColor !default;
$buttonHoverBorderColor: $primaryLightColor !default;
$buttonActiveBg: $primaryLighterColor !default;
$buttonTextActiveColor: $primaryTextColor !default;
$buttonActiveBorderColor: $primaryLighterColor !default;
$raisedButtonShadow:
  0px 3px 1px -2px rgba(0, 0, 0, 0.2),
  0px 2px 2px 0px rgba(0, 0, 0, 0.14),
  0px 1px 5px 0px rgba(0, 0, 0, 0.12) !default;
$roundedButtonBorderRadius: 2rem !default;

$textButtonHoverBgOpacity: 0.04 !default;
$textButtonActiveBgOpacity: 0.16 !default;
$outlinedButtonBorder: 1px solid !default;
$plainButtonTextColor: $textSecondaryColor !default;
$plainButtonHoverBgColor: $hoverBg !default;
$plainButtonActiveBgColor: rgba(255, 255, 255, 0.16) !default;

$secondaryButtonBg: #94a3b8 !default;
$secondaryButtonTextColor: #020617 !default;
$secondaryButtonBorder: 1px solid #94a3b8 !default;
$secondaryButtonHoverBg: #cbd5e1 !default;
$secondaryButtonTextHoverColor: $secondaryButtonTextColor !default;
$secondaryButtonHoverBorderColor: #cbd5e1 !default;
$secondaryButtonActiveBg: #e2e8f0 !default;
$secondaryButtonTextActiveColor: $secondaryButtonTextColor !default;
$secondaryButtonActiveBorderColor: #e2e8f0 !default;
$secondaryButtonFocusShadow: 0 0 0 1px
  scale-color($secondaryButtonBg, $lightness: 30%) !default;

$infoButtonBg: map-get($colors, "htwk-blau") !default;
$infoButtonTextColor: #b1dafa !default;
$infoButtonBorder: 1px solid map-get($colors, "htwk-blau") !default;
$infoButtonHoverBg: scale-color($infoButtonBg, $lightness: 30%) !default;
$infoButtonTextHoverColor: $infoButtonTextColor !default;
$infoButtonHoverBorderColor: map-get($colors, "htwk-cyan") !default;
$infoButtonActiveBg: map-get($colors, "htwk-cyan") !default;
$infoButtonTextActiveColor: $infoButtonTextColor !default;
$infoButtonActiveBorderColor: map-get($colors, "htwk-cyan") !default;
$infoButtonFocusShadow: 0 0 0 1px
  scale-color($infoButtonHoverBg, $lightness: 30%) !default;

$successButtonBg: map-get($colors, "htwk-gruen") !default;
$successButtonTextColor: #052e16 !default;
$successButtonBorder: 1px solid map-get($colors, "htwk-gruen") !default;
$successButtonHoverBg: scale-color($successButtonBg, $lightness: 30%) !default;
$successButtonTextHoverColor: $successButtonTextColor !default;
$successButtonHoverBorderColor: #86efac !default;
$successButtonActiveBg: #bbf7d0 !default;
$successButtonTextActiveColor: $successButtonTextColor !default;
$successButtonActiveBorderColor: #bbf7d0 !default;
$successButtonFocusShadow: 0 0 0 1px
  scale-color($successButtonBg, $lightness: 30%) !default;

$warningButtonBg: map-get($colors, "htwk-yellow") !default;
$warningButtonTextColor: #493c08 !default;
$warningButtonBorder: 1px solid map-get($colors, "htwk-yellow") !default;
$warningButtonHoverBg: scale-color($warningButtonBg, $lightness: 30%) !default;
$warningButtonTextHoverColor: $warningButtonTextColor !default;
$warningButtonHoverBorderColor: scale-color(
  $warningButtonBg,
  $lightness: 10%
) !default;
$warningButtonActiveBg: scale-color($warningButtonBg, $lightness: 30%) !default;
$warningButtonTextActiveColor: $warningButtonTextColor !default;
$warningButtonActiveBorderColor: scale-color(
  $warningButtonBg,
  $lightness: 30%
) !default;
$warningButtonFocusShadow: 0 0 0 1px
  scale-color($warningButtonBg, $lightness: 30%) !default;

$helpButtonBg: #c084fc !default;
$helpButtonTextColor: #3b0764 !default;
$helpButtonBorder: 1px solid #c084fc !default;
$helpButtonHoverBg: #d8b4fe !default;
$helpButtonTextHoverColor: $helpButtonTextColor !default;
$helpButtonHoverBorderColor: #d8b4fe !default;
$helpButtonActiveBg: #e9d5ff !default;
$helpButtonTextActiveColor: $helpButtonTextColor !default;
$helpButtonActiveBorderColor: #e9d5ff !default;
$helpButtonFocusShadow: 0 0 0 1px scale-color($helpButtonBg, $lightness: 30%) !default;

$dangerButtonBg: #f87171 !default;
$dangerButtonTextColor: #450a0a !default;
$dangerButtonBorder: 1px solid #f87171 !default;
$dangerButtonHoverBg: #fca5a5 !default;
$dangerButtonTextHoverColor: $dangerButtonTextColor !default;
$dangerButtonHoverBorderColor: #fca5a5 !default;
$dangerButtonActiveBg: #fecaca !default;
$dangerButtonTextActiveColor: $dangerButtonTextColor !default;
$dangerButtonActiveBorderColor: #fecaca !default;
$dangerButtonFocusShadow: 0 0 0 1px
  scale-color($dangerButtonBg, $lightness: 30%) !default;

$contrastButtonBg: #ffffff !default;
$contrastButtonTextColor: $shade900 !default;
$contrastButtonBorder: 1px solid $contrastButtonBg !default;
$contrastButtonHoverBg: #f3f4f6 !default;
$contrastButtonTextHoverColor: $contrastButtonTextColor !default;
$contrastButtonHoverBorderColor: #f3f4f6 !default;
$contrastButtonActiveBg: #e5e7eb !default;
$contrastButtonTextActiveColor: $contrastButtonTextColor !default;
$contrastButtonActiveBorderColor: #e5e7eb !default;
$contrastButtonFocusShadow: none !default;

$linkButtonColor: $primaryColor !default;
$linkButtonHoverColor: $primaryColor !default;
$linkButtonTextHoverDecoration: underline !default;
$linkButtonFocusShadow: 0 0 0 1px $focusOutlineColor !default;

//checkbox
$checkboxWidth: 22px !default;
$checkboxHeight: 22px !default;
$checkboxBorder: 2px solid $shade600 !default;
$checkboxIconFontSize: 14px !default;
$checkboxActiveBorderColor: $primaryColor !default;
$checkboxActiveBg: $primaryColor !default;
$checkboxIconActiveColor: $primaryTextColor !default;
$checkboxActiveHoverBg: $primaryLighterColor !default;
$checkboxIconActiveHoverColor: $primaryTextColor !default;
$checkboxActiveHoverBorderColor: $primaryLighterColor !default;

//radiobutton
$radiobuttonWidth: 22px !default;
$radiobuttonHeight: 22px !default;
$radiobuttonBorder: 2px solid $shade600 !default;
$radiobuttonIconSize: 12px !default;
$radiobuttonActiveBorderColor: $primaryColor !default;
$radiobuttonActiveBg: $primaryColor !default;
$radiobuttonIconActiveColor: $primaryTextColor !default;
$radiobuttonActiveHoverBg: $primaryLighterColor !default;
$radiobuttonIconActiveHoverColor: $primaryTextColor !default;
$radiobuttonActiveHoverBorderColor: $primaryLighterColor !default;

//colorpicker
$colorPickerPreviewWidth: 2rem !default;
$colorPickerPreviewHeight: 2rem !default;
$colorPickerBg: $shade800 !default;
$colorPickerBorder: 1px solid $shade600 !default;
$colorPickerHandleColor: $shade000 !default;

//togglebutton
$toggleButtonBg: $shade800 !default;
$toggleButtonBorder: 1px solid $shade600 !default;
$toggleButtonTextColor: $shade000 !default;
$toggleButtonIconColor: $shade100 !default;
$toggleButtonHoverBg: $hoverBg !default;
$toggleButtonHoverBorderColor: $shade600 !default;
$toggleButtonTextHoverColor: $shade000 !default;
$toggleButtonIconHoverColor: $shade100 !default;
$toggleButtonActiveBg: $primaryColor !default;
$toggleButtonActiveBorderColor: $primaryColor !default;
$toggleButtonTextActiveColor: $primaryTextColor !default;
$toggleButtonIconActiveColor: $primaryTextColor !default;
$toggleButtonActiveHoverBg: $primaryLightColor !default;
$toggleButtonActiveHoverBorderColor: $primaryLightColor !default;
$toggleButtonTextActiveHoverColor: $primaryTextColor !default;
$toggleButtonIconActiveHoverColor: $primaryTextColor !default;

//inplace
$inplacePadding: $inputPadding !default;
$inplaceHoverBg: $hoverBg !default;
$inplaceTextHoverColor: $shade000 !default;

//rating
$ratingIconFontSize: 1.143rem !default;
$ratingCancelIconColor: #f48fb1 !default;
$ratingCancelIconHoverColor: #f48fb1 !default;
$ratingStarIconOffColor: $shade000 !default;
$ratingStarIconOnColor: $primaryColor !default;
$ratingStarIconHoverColor: $primaryColor !default;

//slider
$sliderBg: $shade700 !default;
$sliderBorder: 0 none !default;
$sliderHorizontalHeight: 0.286rem !default;
$sliderVerticalWidth: 0.286rem !default;
$sliderHandleWidth: 1.143rem !default;
$sliderHandleHeight: 1.143rem !default;
$sliderHandleBg: $shade700 !default;
$sliderHandleBorder: 2px solid $primaryColor !default;
$sliderHandleBorderRadius: 50% !default;
$sliderHandleHoverBorderColor: $primaryColor !default;
$sliderHandleHoverBg: $primaryColor !default;
$sliderRangeBg: $primaryColor !default;

//calendar
$calendarTableMargin: 0.5rem 0 !default;
$calendarPadding: 0.5rem !default;
$calendarBg: $shade800 !default;
$calendarInlineBg: $calendarBg !default;
$calendarTextColor: $shade000 !default;
$calendarBorder: $inputListBorder !default;
$calendarOverlayBorder: $inputOverlayBorder !default;

$calendarHeaderPadding: 0.5rem !default;
$calendarHeaderBg: $shade800 !default;
$calendarInlineHeaderBg: $calendarBg !default;
$calendarHeaderBorder: 1px solid $shade600 !default;
$calendarHeaderTextColor: $shade000 !default;
$calendarHeaderFontWeight: 100 !default;
$calendarHeaderCellPadding: 0.5rem !default;
$calendarMonthYearHeaderHoverTextColor: $primaryColor !default;

$calendarCellDatePadding: 0.5rem !default;
$calendarCellDateWidth: 2.5rem !default;
$calendarCellDateHeight: 2.5rem !default;
$calendarCellDateBorderRadius: 50% !default;
$calendarCellDateBorder: 1px solid transparent !default;
$calendarCellDateHoverBg: $hoverBg !default;
$calendarCellDateTodayBg: transparent !default;
$calendarCellDateTodayBorderColor: transparent !default;
$calendarCellDateTodayTextColor: $primaryColor !default;

$calendarButtonBarPadding: 1rem 0 !default;
$calendarTimePickerPadding: 0.5rem !default;
$calendarTimePickerElementPadding: 0 0.5rem !default;
$calendarTimePickerTimeFontSize: 1.25rem !default;

$calendarBreakpoint: 769px !default;
$calendarCellDatePaddingSM: 0 !default;

//input switch
$inputSwitchWidth: 3rem !default;
$inputSwitchHeight: 1.75rem !default;
$inputSwitchBorderRadius: 30px !default;
$inputSwitchHandleWidth: 1.25rem !default;
$inputSwitchHandleHeight: 1.25rem !default;
$inputSwitchHandleBorderRadius: 50% !default;
$inputSwitchSliderPadding: 0.25rem !default;
$inputSwitchSliderOffBg: $shade500 !default;
$inputSwitchHandleOffBg: $shade100 !default;
$inputSwitchSliderOffHoverBg: $shade600 !default;
$inputSwitchSliderOnBg: $primaryColor !default;
$inputSwitchSliderOnHoverBg: $primaryLightColor !default;
$inputSwitchHandleOnBg: $primaryTextColor !default;

//panel
$panelHeaderBorderColor: $shade600 !default;
$panelHeaderBorder: 1px solid $shade600 !default;
$panelHeaderBg: $shade800 !default;
$panelHeaderTextColor: $shade000 !default;
$panelHeaderFontWeight: 100 !default;
$panelHeaderPadding: 1.25rem !default;
$panelToggleableHeaderPadding: 0.75rem 1.25rem !default;

$panelHeaderHoverBg: $hoverBg !default;
$panelHeaderHoverBorderColor: $shade600 !default;
$panelHeaderTextHoverColor: $shade000 !default;

$panelContentBorderColor: $shade600 !default;
$panelContentBorder: 1px solid $shade600 !default;
$panelContentBg: $shade800 !default;
$panelContentEvenRowBg: map-get($colors, "htwk-grau-120") !default;
$panelContentTextColor: $shade000 !default;
$panelContentPadding: 1.25rem !default;

$panelFooterBorder: 1px solid $shade600 !default;
$panelFooterBg: $shade800 !default;
$panelFooterTextColor: $shade000 !default;
$panelFooterPadding: 0.75rem 1.25rem !default;

//accordion
$accordionSpacing: 4px !default;
$accordionHeaderBorder: $panelHeaderBorder !default;
$accordionHeaderBg: $panelHeaderBg !default;
$accordionHeaderTextColor: $panelHeaderTextColor !default;
$accordionHeaderFontWeight: $panelHeaderFontWeight !default;
$accordionHeaderPadding: $panelHeaderPadding !default;

$accordionHeaderHoverBg: $hoverBg !default;
$accordionHeaderHoverBorderColor: $shade600 !default;
$accordionHeaderTextHoverColor: $shade000 !default;

$accordionHeaderActiveBg: $panelHeaderBg !default;
$accordionHeaderActiveBorderColor: $shade600 !default;
$accordionHeaderTextActiveColor: $shade000 !default;

$accordionHeaderActiveHoverBg: $hoverBg !default;
$accordionHeaderActiveHoverBorderColor: $shade600 !default;
$accordionHeaderTextActiveHoverColor: $shade000 !default;

$accordionContentBorder: $panelContentBorder !default;
$accordionContentBg: $panelContentBg !default;
$accordionContentTextColor: $panelContentTextColor !default;
$accordionContentPadding: $panelContentPadding !default;

//tabview
$tabviewNavBorder: 1px solid $shade600 !default;
$tabviewNavBorderWidth: 0 0 2px 0 !default;
$tabviewNavBg: transparent !default;

$tabviewHeaderSpacing: 0 !default;
$tabviewHeaderBorder: solid $shade600 !default;
$tabviewHeaderBorderWidth: 0 0 2px 0 !default;
$tabviewHeaderBorderColor: transparent transparent $shade600 transparent !default;
$tabviewHeaderBg: $shade800 !default;
$tabviewHeaderTextColor: $shade100 !default;
$tabviewHeaderFontWeight: $panelHeaderFontWeight !default;
$tabviewHeaderPadding: $panelHeaderPadding !default;
$tabviewHeaderMargin: 0 0 -2px 0 !default;

$tabviewHeaderHoverBg: $shade800 !default;
$tabviewHeaderHoverBorderColor: $primaryColor !default;
$tabviewHeaderTextHoverColor: $shade000 !default;

$tabviewHeaderActiveBg: $shade800 !default;
$tabviewHeaderActiveBorderColor: $primaryColor !default;
$tabviewHeaderTextActiveColor: $primaryColor !default;

$tabviewContentBorder: 0 none !default;
$tabviewContentBg: $shade800 !default;
$tabviewContentTextColor: $shade000 !default;
$tabviewContentPadding: $panelContentPadding !default;

//upload
$fileUploadProgressBarHeight: 0.25rem !default;
$fileUploadContentPadding: 2rem 1rem !default;
$fileUploadContentHoverBorder: 1px dashed $primaryColor !default;
$fileUploadFileBorder: 1px solid $shade600 !default;
$fileUploadFilePadding: 1rem !default;

//scrollpanel
$scrollPanelTrackBorder: 0 none !default;
$scrollPanelTrackBg: $shade600 !default;

//card
$cardBodyPadding: 1.25rem !default;
$cardTitleFontSize: 1.5rem !default;
$cardTitleFontWeight: 0 !default;
$cardSubTitleFontWeight: 100 !default;
$cardSubTitleColor: $shade100 !default;
$cardContentPadding: 1.25rem 0 !default;
$cardFooterPadding: 1.25rem 0 0 0 !default;
$cardShadow:
  0 2px 1px -1px rgba(0, 0, 0, 0.2),
  0 1px 1px 0 rgba(0, 0, 0, 0.14),
  0 1px 3px 0 rgba(0, 0, 0, 0.12) !default;

//editor
$editorToolbarBg: $panelHeaderBg !default;
$editorToolbarBorder: $panelHeaderBorder !default;
$editorToolbarPadding: $panelHeaderPadding !default;
$editorToolbarIconColor: $textSecondaryColor !default;
$editorToolbarIconHoverColor: $textColor !default;
$editorIconActiveColor: $primaryColor !default;
$editorContentBorder: $panelContentBorder !default;
$editorContentBg: $panelContentBg !default;

//paginator
$paginatorBg: $shade800 !default;
$paginatorTextColor: $shade100 !default;
$paginatorBorder: solid $shade600 !default;
$paginatorBorderWidth: 1px !default;
$paginatorPadding: 0.5rem 1rem !default;
$paginatorElementWidth: $buttonIconOnlyWidth !default;
$paginatorElementHeight: $buttonIconOnlyWidth !default;
$paginatorElementBg: transparent !default;
$paginatorElementBorder: 0 none !default;
$paginatorElementIconColor: $shade100 !default;
$paginatorElementHoverBg: $hoverBg !default;
$paginatorElementHoverBorderColor: transparent !default;
$paginatorElementIconHoverColor: $shade000 !default;
$paginatorElementBorderRadius: $borderRadius !default;
$paginatorElementMargin: 0.143rem !default;
$paginatorElementPadding: 0 !default;

//table
$tableHeaderBorder: 1px solid $shade600 !default;
$tableHeaderBorderWidth: 0 0 1px 0 !default;
$tableHeaderBg: $shade800 !default;
$tableHeaderTextColor: $shade100 !default;
$tableHeaderFontWeight: 0 !default;
$tableHeaderPadding: 1rem 1rem !default;

$tableHeaderCellPadding: 1rem 1rem !default;
$tableHeaderCellBg: $shade800 !default;
$tableHeaderCellTextColor: $shade000 !default;
$tableHeaderCellFontWeight: 0 !default;
$tableHeaderCellBorder: 1px solid $shade600 !default;
$tableHeaderCellBorderWidth: 0 0 1px 0 !default;
$tableHeaderCellHoverBg: $hoverBg !default;
$tableHeaderCellTextHoverColor: $shade000 !default;
$tableHeaderCellIconColor: $shade100 !default;
$tableHeaderCellIconHoverColor: $shade000 !default;
$tableHeaderCellHighlightBg: $highlightBg !default;
$tableHeaderCellHighlightTextColor: $highlightTextColor !default;
$tableHeaderCellHighlightHoverBg: $highlightBg !default;
$tableHeaderCellHighlightTextHoverColor: $highlightTextColor !default;
$tableSortableColumnBadgeSize: 1.143rem !default;

$tableBodyRowBg: $shade800 !default;
$tableBodyRowTextColor: $shade000 !default;
$tableBodyRowEvenBg: map-get($colors, "htwk-grau-120") !default;
$tableBodyRowHoverBg: $hoverBg !default;
$tableBodyRowTextHoverColor: $shade000 !default;
$tableBodyCellBorder: 1px solid $shade600 !default;
$tableBodyCellBorderWidth: 0 0 1px 0 !default;
$tableBodyCellPadding: 1rem 1rem !default;

$tableFooterCellPadding: 1rem 1rem !default;
$tableFooterCellBg: $shade800 !default;
$tableFooterCellTextColor: $shade000 !default;
$tableFooterCellFontWeight: 0 !default;
$tableFooterCellBorder: 1px solid $shade600 !default;
$tableFooterCellBorderWidth: 0 0 1px 0 !default;
$tableResizerHelperBg: $primaryColor !default;

$tableFooterBorder: 1px solid $shade600 !default;
$tableFooterBorderWidth: 0 0 1px 0 !default;
$tableFooterBg: $shade800 !default;
$tableFooterTextColor: $shade000 !default;
$tableFooterFontWeight: 0 !default;
$tableFooterPadding: 1rem 1rem !default;

$tableCellContentAlignment: left !default;
$tableTopPaginatorBorderWidth: 1px 0 1px 0 !default;
$tableBottomPaginatorBorderWidth: 0 0 1px 0 !default;

$tableScaleSM: 0.5 !default;
$tableScaleLG: 1.25 !default;

//dataview
$dataViewContentPadding: 0 !default;
$dataViewContentBorder: 0 none !default;

//tree
$treeContainerPadding: 0.286rem !default;
$treeNodePadding: 0.143rem !default;
$treeNodeContentPadding: 0.5rem !default;
$treeNodeChildrenPadding: 0 0 0 1rem !default;
$treeNodeIconColor: $shade100 !default;

//timeline
$timelineVerticalEventContentPadding: 0 1rem !default;
$timelineHorizontalEventContentPadding: 1rem 0 !default;
$timelineEventMarkerWidth: 1rem !default;
$timelineEventMarkerHeight: 1rem !default;
$timelineEventMarkerBorderRadius: 50% !default;
$timelineEventMarkerBorder: 2px solid $primaryColor !default;
$timelineEventMarkerBackground: $primaryTextColor !default;
$timelineEventConnectorSize: 2px !default;
$timelineEventColor: $shade600 !default;

//org chart
$organizationChartConnectorColor: $shade600 !default;

//message
$messageMargin: 1rem 0 !default;
$messagePadding: 1.25rem 1.75rem !default;
$messageBorderWidth: 0 0 0 6px !default;
$messageIconFontSize: 1.5rem !default;
$messageTextFontSize: 1rem !default;
$messageTextFontWeight: 0 !default;

//inline message
$inlineMessagePadding: $inputPadding !default;
$inlineMessageMargin: 0 !default;
$inlineMessageIconFontSize: 1rem !default;
$inlineMessageTextFontSize: 1rem !default;
$inlineMessageBorderWidth: 1px !default;

//toast
$toastIconFontSize: 2rem !default;
$toastMessageTextMargin: 0 0 0 1rem !default;
$toastMargin: 0 0 1rem 0 !default;
$toastPadding: 1rem !default;
$toastBorderWidth: 0 0 0 6px !default;
$toastShadow: none !default;
$toastOpacity: 1 !default;
$toastTitleFontWeight: 0 !default;
$toastDetailMargin: $inlineSpacing 0 0 0 !default;

//severities
$infoMessageBg: rgba(59, 130, 246, 0.2) !default;
$infoMessageBorder: solid #3b82f6 !default;
$infoMessageTextColor: #93c5fd !default;
$infoMessageIconColor: #93c5fd !default;
$successMessageBg: rgba(16, 185, 129, 0.2) !default;
$successMessageBorder: solid #10b981 !default;
$successMessageTextColor: #6ee7b7 !default;
$successMessageIconColor: #6ee7b7 !default;
$warningMessageBg: rgba(234, 179, 8, 0.2) !default;
$warningMessageBorder: solid #eab308 !default;
$warningMessageTextColor: #fde047 !default;
$warningMessageIconColor: #fde047 !default;
$errorMessageBg: rgba(239, 68, 68, 0.2) !default;
$errorMessageBorder: solid #ef4444 !default;
$errorMessageTextColor: #fca5a5 !default;
$errorMessageIconColor: #fca5a5 !default;
$secondaryMessageBg: $secondaryButtonBg !default;
$secondaryMessageBorder: solid $secondaryButtonBg !default;
$secondaryMessageTextColor: $secondaryButtonTextColor !default;
$secondaryMessageIconColor: $secondaryButtonTextColor !default;
$contrastMessageBg: $contrastButtonBg !default;
$contrastMessageBorder: solid $contrastButtonBg !default;
$contrastMessageTextColor: $contrastButtonTextColor !default;
$contrastMessageIconColor: $contrastButtonTextColor !default;

//overlays
$overlayContentBorder: 1px solid $shade600 !default;
$overlayContentBg: $panelContentBg !default;
$overlayContainerShadow:
  0px 11px 15px -7px rgba(0, 0, 0, 0.2),
  0px 24px 38px 3px rgba(0, 0, 0, 0.14),
  0px 9px 46px 8px rgba(0, 0, 0, 0.12) !default;

//dialog
$dialogHeaderBg: $shade800 !default;
$dialogHeaderBorder: 0 none !default;
$dialogHeaderTextColor: $shade000 !default;
$dialogHeaderFontWeight: 0 !default;
$dialogHeaderFontSize: 1.25rem !default;
$dialogHeaderPadding: 1.5rem !default;
$dialogContentPadding: 0 1.5rem 2rem 1.5rem !default;
$dialogFooterBorder: 0 none !default;
$dialogFooterPadding: 0 1.5rem 1.5rem 1.5rem !default;

//confirmpopup
$confirmPopupContentPadding: $panelContentPadding !default;
$confirmPopupFooterPadding: 0 1.25rem 1.25rem 1.25rem !default;

//tooltip
$tooltipBg: $shade600 !default;
$tooltipTextColor: $shade000 !default;
$tooltipPadding: $inputPadding !default;

//steps
$stepsItemBg: transparent !default;
$stepsItemBorder: 0 none !default;
$stepsItemTextColor: $shade100 !default;
$stepsItemNumberWidth: 2rem !default;
$stepsItemNumberHeight: 2rem !default;
$stepsItemNumberFontSize: 1.143rem !default;
$stepsItemNumberColor: $shade000 !default;
$stepsItemNumberBorderRadius: 50% !default;
$stepsItemActiveFontWeight: 0 !default;

//progressbar, progressspinner
$progressBarHeight: 1.5rem !default;
$progressBarBorder: 0 none !default;
$progressBarBg: $shade600 !default;
$progressBarValueBg: $primaryColor !default;
$progressBarValueTextColor: $primaryTextColor !default;

$progressSpinnerStrokeColor: $errorMessageTextColor !default;
$progressSpinnerColorOne: $errorMessageTextColor !default;
$progressSpinnerColorTwo: $infoMessageTextColor !default;
$progressSpinnerColorThree: $successMessageTextColor !default;
$progressSpinnerColorFour: $warningMessageTextColor !default;

//menu (e.g. menu, menubar, tieredmenu)
$menuWidth: 12.5rem !default;
$menuBg: $shade700 !default;
$menuBorder: 1px solid $shade600 !default;
$menuTextColor: $shade000 !default;
$menuitemPadding: 0.75rem 1.25rem !default;
$menuitemBorderRadius: 0 !default;
$menuitemTextColor: $shade000 !default;
$menuitemIconColor: $shade100 !default;
$menuitemTextHoverColor: $shade000 !default;
$menuitemIconHoverColor: $shade000 !default;
$menuitemHoverBg: $hoverBg !default;
$menuitemTextFocusColor: $shade000 !default;
$menuitemIconFocusColor: $shade000 !default;
$menuitemFocusBg: $shade600 !default;
$menuitemTextActiveColor: $highlightTextColor !default;
$menuitemIconActiveColor: $highlightTextColor !default;
$menuitemActiveBg: $highlightBg !default;
$menuitemActiveFocusBg: $highlightFocusBg !default;
$menuitemSubmenuIconFontSize: 0.875rem !default;
$submenuHeaderMargin: 0 !default;
$submenuHeaderPadding: 0.75rem 1.25rem !default;
$submenuHeaderBg: $shade700 !default;
$submenuHeaderTextColor: $shade000 !default;
$submenuHeaderBorderRadius: 0 !default;
$submenuHeaderFontWeight: 0 !default;
$overlayMenuBg: $menuBg !default;
$overlayMenuBorder: 1px solid $shade600 !default;
$overlayMenuShadow:
  0 2px 4px -1px rgba(0, 0, 0, 0.2),
  0 4px 5px 0 rgba(0, 0, 0, 0.14),
  0 1px 10px 0 rgba(0, 0, 0, 0.12) !default;
$verticalMenuPadding: 0.25rem 0 !default;
$menuSeparatorMargin: 0.25rem 0 !default;

$breadcrumbPadding: 1rem !default;
$breadcrumbBg: $menuBg !default;
$breadcrumbBorder: $menuBorder !default;
$breadcrumbItemTextColor: $menuitemTextColor !default;
$breadcrumbItemIconColor: $menuitemIconColor !default;
$breadcrumbLastItemTextColor: $menuitemTextColor !default;
$breadcrumbLastItemIconColor: $menuitemIconColor !default;
$breadcrumbSeparatorColor: $menuitemTextColor !default;

$horizontalMenuPadding: 0.5rem !default;
$horizontalMenuBg: $shade700 !default;
$horizontalMenuBorder: $menuBorder !default;
$horizontalMenuTextColor: $menuTextColor !default;
$horizontalMenuRootMenuitemPadding: $menuitemPadding !default;
$horizontalMenuRootMenuitemBorderRadius: $borderRadius !default;
$horizontalMenuRootMenuitemTextColor: $menuitemTextColor !default;
$horizontalMenuRootMenuitemIconColor: $menuitemIconColor !default;
$horizontalMenuRootMenuitemTextHoverColor: $menuitemTextHoverColor !default;
$horizontalMenuRootMenuitemIconHoverColor: $menuitemIconHoverColor !default;
$horizontalMenuRootMenuitemHoverBg: $menuitemHoverBg !default;
$horizontalMenuRootMenuitemTextActiveColor: $menuitemTextActiveColor !default;
$horizontalMenuRootMenuitemIconActiveColor: $menuitemIconActiveColor !default;
$horizontalMenuRootMenuitemActiveBg: $menuitemActiveBg !default;

//badge and tag
$badgeBg: $primaryColor !default;
$badgeTextColor: $primaryTextColor !default;
$badgeMinWidth: 1.5rem !default;
$badgeHeight: 1.5rem !default;
$badgeFontWeight: 0 !default;
$badgeFontSize: 0.75rem !default;

$tagPadding: 0.25rem 0.4rem !default;

//carousel
$carouselIndicatorsPadding: 1rem !default;
$carouselIndicatorBg: $shade600 !default;
$carouselIndicatorHoverBg: $hoverBg !default;
$carouselIndicatorBorderRadius: 0 !default;
$carouselIndicatorWidth: 2rem !default;
$carouselIndicatorHeight: 0.5rem !default;

//galleria
$galleriaMaskBg: rgba(0, 0, 0, 0.9) !default;
$galleriaCloseIconMargin: 0.5rem !default;
$galleriaCloseIconFontSize: 2rem !default;
$galleriaCloseIconBg: transparent !default;
$galleriaCloseIconColor: #f8f9fa !default;
$galleriaCloseIconHoverBg: rgba(255, 255, 255, 0.1) !default;
$galleriaCloseIconHoverColor: #f8f9fa !default;
$galleriaCloseIconWidth: 4rem !default;
$galleriaCloseIconHeight: 4rem !default;
$galleriaCloseIconBorderRadius: 50% !default;

$galleriaItemNavigatorBg: transparent !default;
$galleriaItemNavigatorColor: #f8f9fa !default;
$galleriaItemNavigatorMargin: 0 0.5rem !default;
$galleriaItemNavigatorFontSize: 2rem !default;
$galleriaItemNavigatorHoverBg: rgba(255, 255, 255, 0.1) !default;
$galleriaItemNavigatorHoverColor: #f8f9fa !default;
$galleriaItemNavigatorWidth: 4rem !default;
$galleriaItemNavigatorHeight: 4rem !default;
$galleriaItemNavigatorBorderRadius: $borderRadius !default;

$galleriaCaptionBg: rgba(0, 0, 0, 0.5) !default;
$galleriaCaptionTextColor: #f8f9fa !default;
$galleriaCaptionPadding: 1rem !default;

$galleriaIndicatorsPadding: 1rem !default;
$galleriaIndicatorBg: $shade600 !default;
$galleriaIndicatorHoverBg: rgba(255, 255, 255, 0.1) !default;
$galleriaIndicatorBorderRadius: 50% !default;
$galleriaIndicatorWidth: 1rem !default;
$galleriaIndicatorHeight: 1rem !default;
$galleriaIndicatorsBgOnItem: rgba(0, 0, 0, 0.5) !default;
$galleriaIndicatorBgOnItem: rgba(255, 255, 255, 0.4) !default;
$galleriaIndicatorHoverBgOnItem: rgba(255, 255, 255, 0.6) !default;

$galleriaThumbnailContainerBg: rgba(0, 0, 0, 0.9) !default;
$galleriaThumbnailContainerPadding: 1rem 0.25rem !default;
$galleriaThumbnailNavigatorBg: transparent !default;
$galleriaThumbnailNavigatorColor: #f8f9fa !default;
$galleriaThumbnailNavigatorHoverBg: rgba(255, 255, 255, 0.1) !default;
$galleriaThumbnailNavigatorHoverColor: #f8f9fa !default;
$galleriaThumbnailNavigatorBorderRadius: 50% !default;
$galleriaThumbnailNavigatorWidth: 2rem !default;
$galleriaThumbnailNavigatorHeight: 2rem !default;

//divider
$dividerHorizontalMargin: 1.25rem 0 !default;
$dividerHorizontalPadding: 0 1.25rem !default;
$dividerVerticalMargin: 0 1.25rem !default;
$dividerVerticalPadding: 1.25rem 0 !default;
$dividerSize: 1px !default;
$dividerColor: $shade600 !default;

//avatar
$avatarBg: $shade600 !default;
$avatarTextColor: $textColor !default;

//chip
$chipBg: $shade600 !default;
$chipTextColor: $textColor !default;
$chipBorderRadius: 16px !default;
$chipFocusBg: $shade500 !default;
$chipFocusTextColor: $textColor !default;

//scrollTop
$scrollTopBg: $highlightBg !default;
$scrollTopHoverBg: scale-color($highlightBg, $alpha: 24%) !default;
$scrollTopWidth: 3rem !default;
$scrollTopHeight: 3rem !default;
$scrollTopBorderRadius: 50% !default;
$scrollTopFontSize: 1.5rem !default;
$scrollTopTextColor: $highlightTextColor !default;

//skeleton
$skeletonBg: rgba(255, 255, 255, 0.06) !default;
$skeletonAnimationBg: rgba(255, 255, 255, 0.04) !default;

//splitter
$splitterGutterBg: rgba(255, 255, 255, 0.03) !default;
$splitterGutterHandleBg: $shade600 !default;

//speeddial
$speedDialButtonWidth: 4rem !default;
$speedDialButtonHeight: 4rem !default;
$speedDialButtonIconFontSize: 1.3rem !default;
$speedDialActionWidth: 3rem !default;
$speedDialActionHeight: 3rem !default;
$speedDialActionBg: $shade000 !default;
$speedDialActionHoverBg: $shade100 !default;
$speedDialActionTextColor: $shade900 !default;
$speedDialActionTextHoverColor: $shade900 !default;

//dock
$dockActionWidth: 4rem !default;
$dockActionHeight: 4rem !default;
$dockItemPadding: 0.5rem !default;
$dockItemBorderRadius: $borderRadius !default;
$dockCurrentItemMargin: 1.5rem !default;
$dockFirstItemsMargin: 1.3rem !default;
$dockSecondItemsMargin: 0.9rem !default;
$dockBg: rgba(255, 255, 255, 0.1) !default;
$dockBorder: 1px solid rgba(255, 255, 255, 0.2) !default;
$dockPadding: 0.5rem 0.5rem !default;
$dockBorderRadius: 0.5rem !default;

//image
$imageMaskBg: rgba(0, 0, 0, 0.9) !default;
$imagePreviewToolbarPadding: 1rem !default;
$imagePreviewIndicatorColor: #f8f9fa !default;
$imagePreviewIndicatorBg: rgba(0, 0, 0, 0.5) !default;
$imagePreviewActionIconBg: transparent !default;
$imagePreviewActionIconColor: #f8f9fa !default;
$imagePreviewActionIconHoverBg: rgba(255, 255, 255, 0.1) !default;
$imagePreviewActionIconHoverColor: #f8f9fa !default;
$imagePreviewActionIconWidth: 3rem !default;
$imagePreviewActionIconHeight: 3rem !default;
$imagePreviewActionIconFontSize: 1.5rem !default;
$imagePreviewActionIconBorderRadius: 50% !default;

:root {
  font-family:
    "Source Sans Pro",
    -apple-system,
    BlinkMacSystemFont,
    Segoe UI,
    Twemoji Country Flags,
    Roboto,
    Arial,
    sans-serif,
    Apple Color Emoji,
    Segoe UI Emoji,
    Segoe UI Symbol;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-variation-settings: normal;
  --font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, Segoe UI,
    Twemoji Country Flags, Roboto, Arial, sans-serif, Apple Color Emoji,
    Segoe UI Emoji, Segoe UI Symbol;
  --font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  --surface-a: #{$shade800};
  --surface-b: #{$shade900};
  --surface-c: #{$hoverBg};
  --surface-d: #{$shade600};
  --surface-e: #{$shade800};
  --surface-f: #{$shade800};
  --text-color: #{$shade000};
  --text-color-secondary: #{$shade100};
  --primary-color: #{$primaryColor};
  --primary-color-text: #{$primaryTextColor};
  --surface-0: #{map-get($colors, "htwk-schwarz")};
  --surface-50: #1d2530;
  --surface-100: #363d47;
  --surface-200: #4f565e;
  --surface-300: #686e75;
  --surface-400: #82868c;
  --surface-500: #9b9ea3;
  --surface-600: #b4b6ba;
  --surface-700: #cdcfd1;
  --surface-800: #e6e7e8;
  --surface-900: #ffffff;
  --gray-50: #e6e7e8;
  --gray-100: #cdcfd1;
  --gray-200: #b4b6ba;
  --gray-300: #9b9ea3;
  --gray-400: #82868c;
  --gray-500: #686e75;
  --gray-600: #4f565e;
  --gray-700: #363d47;
  --gray-800: #1d2530;
  --gray-900: #{map-get($colors, "htwk-schwarz")};
  --content-padding: #{$panelContentPadding};
  --inline-spacing: #{$inlineSpacing};
  --border-radius: #{$borderRadius};
  --surface-ground: #{map-get($colors, "htwk-grau")};
  --surface-section: #{map-get($colors, "htwk-grau")};
  --surface-card: #{map-get($colors, "htwk-grau")};
  --surface-overlay: #{map-get($colors, "htwk-grau")};
  --surface-border: #{map-get($colors, "htwk-dunkelblau-60")};
  --surface-hover: rgba(255, 255, 255, 0.03);
  --focus-ring: #{$focusShadow};
  --maskbg: #{$maskBg};
  --highlight-bg: #{$highlightBg};
  --highlight-text-color: #{$highlightTextColor};
  color-scheme: dark;
  background-color: #{map-get($colors, "htwk-grau-140")};
}