diff --git a/ui/src/components/calendar/SVGRect.vue b/ui/src/components/calendar/SVGRect.vue
index 3f28865..ccadc0a 100644
--- a/ui/src/components/calendar/SVGRect.vue
+++ b/ui/src/components/calendar/SVGRect.vue
@@ -60,33 +60,22 @@ export default class extends Vue {
 <style lang="scss" scoped>
 @import "@/bulma-scheme";
 
-@mixin visible_rect($name, $color) {
-  &.#{$name} {
-    background-color: rgba($color, 0.3);
-    border-color: rgba($color, 0.9);
-  }
-}
-
 foreignObject > div {
-  :deep() > * {
+  &:not(.visible, :hover):deep() > * {
     display: none;
   }
 
   &.visible,
   &:hover {
-    :deep() > * {
-      display: initial;
-    }
-
     border-width: 3px;
     border-style: solid;
 
-    @include visible_rect("primary", $primary);
-    @include visible_rect("link", $link);
-    @include visible_rect("info", $info);
-    @include visible_rect("success", $success);
-    @include visible_rect("warning", $warning);
-    @include visible_rect("danger", $danger);
+    @each $name, $color in $advent22-colors {
+      &.#{$name} {
+        background-color: rgba($color, 0.3);
+        border-color: rgba($color, 0.9);
+      }
+    }
   }
 }
 </style>