/*
 * Region demo page styles
 * Background colors to differentiate layout regions
 */
#layout-before {
  background-color: color-mix(in srgb, var(--color-yellow) 15%, transparent); }

#layout-after {
  background-color: color-mix(in srgb, var(--color-purple) 15%, transparent); }

#layout-left {
  background-color: color-mix(in srgb, var(--color-orange) 15%, transparent); }

#layout-right {
  background-color: color-mix(in srgb, var(--color-green) 15%, transparent); }

#layout-main {
  background-color: color-mix(in srgb, var(--color-blue) 15%, transparent); }

#theme-before {
  border: 2px solid color-mix(in srgb, var(--color-yellow) 40%, transparent); }

#theme-after {
  border: 2px solid color-mix(in srgb, var(--color-purple) 40%, transparent); }

#theme-left {
  border: 2px solid color-mix(in srgb, var(--color-orange) 40%, transparent); }

#theme-right {
  border: 2px solid color-mix(in srgb, var(--color-green) 40%, transparent); }

#theme-main {
  border: 2px solid color-mix(in srgb, var(--color-blue) 40%, transparent); }

/*
 * Widget styles inside regions
 */
#theme-before > .widget {
  background-color: color-mix(in srgb, var(--color-yellow) 25%, transparent);
  border: 2px dashed color-mix(in srgb, var(--color-yellow) 60%, transparent); }

#theme-after > .widget {
  background-color: color-mix(in srgb, var(--color-purple) 25%, transparent);
  border: 2px dashed color-mix(in srgb, var(--color-purple) 60%, transparent); }

#theme-left .widget {
  background-color: color-mix(in srgb, var(--color-orange) 25%, transparent);
  border: 2px dashed color-mix(in srgb, var(--color-orange) 60%, transparent); }

#theme-right .widget {
  background-color: color-mix(in srgb, var(--color-green) 25%, transparent);
  border: 2px dashed color-mix(in srgb, var(--color-green) 60%, transparent); }