$eps-box-background-color: theme-colors(light);
$eps-box-dark-background-color: dark-tints(600);
$eps-box-color: tints(800);
$eps-box-dark-color: dark-tints(100);
$eps-box-input-color: tints(800);
$eps-box-input-dark-color: dark-tints(100);
$root: eps-box;
.#{$root} {
--eps-box-background-color: #{$eps-box-background-color};
--eps-box-color: #{$eps-box-color};
--eps-box-input-color: #{$eps-box-input-color};
padding: 0;
border-radius: $eps-radius;
background-color: var(--eps-box-background-color);
color: var(--eps-box-color);
&--padding {
padding: var(--eps-box-padding);
}
> input {
width: 100%;
outline: 0;
border: 0;
background-color: var(--eps-box-background-color);
color: var(--eps-box-input-color);
}
}
.eps-theme-dark {
.#{$root} {
--eps-box-background-color: #{$eps-box-dark-background-color};
--eps-box-color: #{$eps-box-dark-color};
--eps-box-input-color: #{$eps-box-input-dark-color};
}
}