@layer component.theme {
  .showcase--light {
    color-scheme: light;
  }

  .showcase--dark {
    color-scheme: dark;
  }
  .showcase::before {
    background-color: light-dark(var(--bright), var(--dark));
  }

  .showcase--light,
  .showcase--dark {
    .showcase__background {
      filter: opacity(0.5);
    }
  }

  .showcase__foreground {
    color: light-dark(var(--dark), var(--bright));
  }
}