$eps-panel-header-background-color: theme-colors(light);
$eps-panel-header-dark-background-color: dark-tints(600);
$eps-panel-body-background-color: rgba(theme-colors(light), $opacity-05);
$eps-panel-body-dark-background-color: rgba(dark-tints(600), $opacity-05);
$root: eps-panel;
.#{$root} {
--eps-panel-header-background-color: #{$eps-panel-header-background-color};
--eps-panel-body-background-color: #{$eps-panel-body-background-color};
&,
&:hover {
background-color: initial;
}
&__header {
background-color: var(--eps-panel-header-background-color);
border-radius: $eps-radius;
}
&__body {
background-color: var(--eps-panel-body-background-color);
border-radius: 0 0 $eps-radius $eps-radius;
}
}
.eps-theme-dark {
.#{$root} {
--eps-panel-header-background-color: #{$eps-panel-header-dark-background-color};
--eps-panel-body-background-color: #{$eps-panel-body-dark-background-color};
}
}