@iamproperty/components 7.7.1--beta5 → 7.7.1--beta6

package/assets/sass/components/calendar.config.scss

@@ -1,423 +1,423 @@
-@use '../_func' as *;
-
-
-
-
-
-@layer components {
-  iam-calendar,
-  .event-colours {
-    --event-colour-1: var(--wider-colour-1);
-    --event-colour-2: var(--wider-colour-2);
-    --event-colour-3: var(--wider-colour-3);
-    --event-colour-4: var(--wider-colour-4);
-    --event-colour-5: var(--wider-colour-17);
-    --event-colour-6: var(--wider-colour-6);
-    --event-colour-7: var(--wider-colour-7);
-    --event-colour-8: var(--wider-colour-14);
-    --event-colour-9: var(--wider-colour-10);
-    --event-colour-10: var(--wider-colour-23);
-  }
-
-  @for $i from 1 to 10 {
-    iam-calendar:not(.calendar--multi) [data-event-type-enum='#{$i}'] {
-      --event-colour: var(--event-colour-#{$i});
-    }
-
-    iam-calendar.calendar--multi [data-calendar-enum='#{$i}'] {
-      --event-colour: var(--event-colour-#{$i});
-    }
-  }
-
-  iam-calendar {
-    margin-bottom: 1rem;
-  }
-
-  iam-calendar button {
-    --background-opacity: 100%;
-
-    display: block;
-    width: 100%;
-    //height:  1.5rem;
-    border: none;
-    border-left: 4px solid color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 28%);
-    border-radius: 4px;
-    padding: 0.25rem;
-
-    font-size: 0.875rem; /* 14/16 */
-    line-height: 1.125rem; /* 18/16 */
-    margin-bottom: 0.5rem;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    max-width: 100%;
-    text-align: left;
-    position: relative;
-    z-index: 1;
-
-    background: rgb(from var(--event-colour, var(--wider-colour-1)) r g b / var(--background-opacity));
-
-    &:hover {
-      background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 10%);
-    }
-    &:active {
-      background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 20%);
-    }
-
-    .tooltip__content {
-      display: none;
-    }
-
-    &:hover .tooltip__content {
-      display: block;
-      z-index: var(--index-floating);
-      position: absolute;
-
-      width: 15.625rem; /* 250 */
-      background: var(--colour-primary);
-      color: var(--colour-white);
-      padding: 0.75rem;
-      border-radius: 0.5rem;
-      box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
-      //top: auto;
-      //bottom: calc(100% + 0.25rem);
-      left: 50%;
-
-      //transform: translate(-50%,0);
-      font-size: 0.875rem; /* 14/16 */
-      line-height: 1.2;
-
-      white-space: normal;
-      z-index: 9999;
-      position: fixed;
-      bottom: anchor(top);
-      justify-self: anchor-center;
-      margin: 0.5rem;
-
-      > strong:first-child {
-        color: white;
-        display: block;
-        padding-bottom: 1rem;
-        color: inherit;
-      }
-
-      &:after {
-        content: '';
-        position: absolute;
-        top: 100%;
-        bottom: auto;
-        left: 50%;
-        margin-left: -0.25rem;
-        border-width: 0.5rem;
-        border-style: solid;
-        border-color: var(--colour-primary) transparent transparent transparent;
-        margin-top: -1px;
-      }
-    }
-  }
-
-  iam-calendar.calendar--multi {
-    background: rgb(from var(--event-colour, var(--wider-colour-8)) r g b / var(--background-opacity));
-
-    &:hover {
-      background: rgb(from var(--event-colour-hover, var(--wider-colour-8-hover)) r g b / var(--background-opacity));
-    }
-    &:active {
-      background: rgb(from var(--event-colour-active, var(--wider-colour-8-active)) r g b / var(--background-opacity));
-    }
-  }
-
-  iam-calendar[data-hide-confirmed] button:not(.tentative, .cancelled) {
-    display: none !important;
-  }
-  iam-calendar[data-hide-unconfirmed] button.tentative {
-    display: none !important;
-  }
-  iam-calendar[data-hide-cancelled] button.cancelled {
-    display: none !important;
-  }
-
-  iam-calendar button.tentative {
-    --background-opacity: 40%;
-    border-top: 1px dashed var(--event-colour);
-    border-right: 1px dashed var(--event-colour);
-    border-bottom: 1px dashed var(--event-colour);
-    border-left: none;
-    padding-left: 0.5rem;
-
-    &:before {
-      content: '';
-      height: 100%;
-      width: 4px;
-      background-color: var(--event-colour);
-      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 20 20'%3E%3Cg %3E%3Cpolygon fill='%23FFFFFF' points='20 10 10 0 0 0 20 20'/%3E%3Cpolygon fill='%23FFFFFF' points='0 10 0 20 10 20'/%3E%3C/g%3E%3C/svg%3E");
-      position: absolute;
-      top: 0;
-      left: 0;
-    }
-  }
-
-  iam-calendar button.cancelled {
-    border-top: 2px solid var(--colour-danger);
-    border-right: 2px solid var(--colour-danger);
-    border-bottom: 2px solid var(--colour-danger);
-  }
-
-  iam-calendar button.repeat {
-    padding-right: 2rem;
-
-    &:after {
-      position: absolute;
-      top: 0;
-      right: 0.25rem;
-      content: '\f363';
-      font-family: 'Font Awesome 7 Pro';
-      font-weight: 300;
-      line-height: 1.625rem; /* 26 */
-    }
-  }
-
-  iam-calendar[data-view='month'] button {
-    margin-bottom: 1px;
-
-    > span {
-      display: block;
-      height: 1.125rem; /* 18/16 */
-      white-space: nowrap;
-
-      overflow: hidden;
-
-      text-overflow: ellipsis;
-    }
-
-    &[data-start] > span:before {
-      content: attr(data-start);
-      display: inline-block;
-      margin-right: 0.25rem;
-    }
-
-    /*
-    span:not(.tooltip__content) {
-      display: -webkit-box;
-      -webkit-line-clamp: 3;
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: inherit;
-    }
-      */
-  }
-
-  iam-calendar:is([data-view='week'], [data-view='day']) button:not(.allday-event) {
-    height: var(--event-height, 1.09375rem); /* 17.5 */
-    line-height: 1.125rem !important;
-    padding-top: 0.25rem !important;
-    white-space: normal !important;
-
-    display: inline-flex !important; /* keep the inline nature of buttons */
-    align-items: flex-start !important;
-
-    width: var(--event-width, 100%) !important;
-    max-width: var(--event-max-width, 100%) !important;
-    margin-bottom: 0px !important;
-
-    > span:not(.tooltip__content) {
-      display: -webkit-box;
-      -webkit-line-clamp: var(--line-clamp, 2);
-      -webkit-box-orient: vertical;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      white-space: inherit;
-      max-height: 100%;
-    }
-  }
-
-  // resize
-  iam-calendar[data-resize]:is([data-view='week'], [data-view='day']) button:not(.allday-event) {
-    resize: vertical !important;
-  }
-
-  iam-calendar:is([data-view='week']) button.allday-event {
-    width: var(--event-width, 100%) !important;
-    max-width: var(--event-max-width, 100%) !important;
-  }
-
-  iam-calendar:is([data-view='week'], [data-view='day']) button.allday-event {
-    > span {
-      display: block;
-      height: 1.125rem; /* 18/16 */
-      //white-space: nowrap;
-
-      overflow: hidden;
-
-      text-overflow: ellipsis;
-    }
-
-    &[data-start] > span:before {
-      content: attr(data-start);
-      display: inline-block;
-      margin-right: 0.25rem;
-    }
-  }
-
-  iam-calendar:is([data-view='week'], [data-view='day']) button.resizing {
-    background: black !important;
-
-    .tooltip__content {
-      opacity: 0;
-    }
-  }
-  iam-calendar:is([data-view='week'], [data-view='day']) button:-webkit-drag {
-    .tooltip__content {
-      opacity: 0;
-    }
-  }
-
-  iam-calendar:is([data-view='week'], [data-view='day']) button.continued {
-    display: none !important;
-  }
-
-  // #endregion
-}
-
-.event-colours option {
-  //display: none;
-}
-
-.event-colours option[value='month'] {
-  display: flex;
-}
-
-.event-colours,
-.event-colours::picker(select) {
-  appearance: base-select;
-}
-
-.event-colours {
-  text-indent: -300%;
-  overflow: hidden;
-  position: relative;
-  width: 1.8rem;
-  border: none;
-  background-color: transparent;
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: 0.4rem;
-    left: 0.4rem;
-    width: 1rem;
-    height: 1rem;
-    background: pink;
-    border-radius: 0.5rem;
-  }
-}
-
-.event-colours::picker-icon {
-  display: none;
-}
-
-.event-colours::picker(select) {
-  border-radius: 0.5rem;
-  border-color: var(--colour-border);
-  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
-  padding: 0.5rem;
-  text-indent: 0;
-}
-
-.event-colours option {
-  padding-block: 0.25rem;
-  position: relative;
-  padding-left: 2rem;
-  font-weight: light;
-  border-left: 4px solid transparent;
-  margin-bottom: 0.25rem;
-  border-radius: 0.25rem;
-
-  &:checked {
-    background: rgb(from var(--event-colour) r g b / 40%);
-    border-left: 4px solid color-mix(in srgb, var(--event-colour), black 28%);
-  }
-
-  &:hover {
-    background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 10%);
-    border-left: 4px solid color-mix(in srgb, var(--event-colour), black 28%);
-  }
-  &:active {
-    background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 20%);
-    border-left: 4px solid color-mix(in srgb, var(--event-colour), black 28%);
-  }
-
-  &:before {
-    content: '';
-    position: absolute;
-    top: 0.4rem;
-    left: 0.4rem;
-    width: 1rem;
-    height: 1rem;
-    background: pink;
-    border-radius: 0.5rem;
-  }
-}
-
-.event-colours option:before,
-.event-colours:has(option:checked):before {
-  background: color-mix(in srgb, var(--event-colour), black 28%);
-}
-
-.event-colours option[value='--wider-colour-1'],
-.event-colours:has(option[value='--wider-colour-1']:checked) {
-  --event-colour: var(--wider-colour-1);
-}
-
-.event-colours option[value='--wider-colour-2'],
-.event-colours:has(option[value='--wider-colour-2']:checked) {
-  --event-colour: var(--wider-colour-2);
-}
-
-.event-colours option[value='--wider-colour-3'],
-.event-colours:has(option[value='--wider-colour-3']:checked) {
-  --event-colour: var(--wider-colour-3);
-}
-
-.event-colours option[value='--wider-colour-4'],
-.event-colours:has(option[value='--wider-colour-4']:checked) {
-  --event-colour: var(--wider-colour-4);
-}
-
-.event-colours option[value='--wider-colour-17'],
-.event-colours:has(option[value='--wider-colour-17']:checked) {
-  --event-colour: var(--wider-colour-17);
-}
-
-.event-colours option[value='--wider-colour-6'],
-.event-colours:has(option[value='--wider-colour-6']:checked) {
-  --event-colour: var(--wider-colour-6);
-}
-
-.event-colours option[value='--wider-colour-7'],
-.event-colours:has(option[value='--wider-colour-7']:checked) {
-  --event-colour: var(--wider-colour-7);
-}
-
-.event-colours option[value='--wider-colour-14'],
-.event-colours:has(option[value='--wider-colour-14']:checked) {
-  --event-colour: var(--wider-colour-14);
-}
-
-.event-colours option[value='--wider-colour-10'],
-.event-colours:has(option[value='--wider-colour-10']:checked) {
-  --event-colour: var(--wider-colour-10);
-}
-
-.event-colours option[value='--wider-colour-23'],
-.event-colours:has(option[value='--wider-colour-23']:checked) {
-  --event-colour: var(--wider-colour-23);
-}
-
-.event-colours option:checked {
-  font-weight: bold;
-}
-
-.event-colours option::checkmark {
-  display: none;
-}
+@use '../_func' as *;
+
+
+
+
+
+@layer components {
+  iam-calendar,
+  .event-colours {
+    --event-colour-1: var(--wider-colour-1);
+    --event-colour-2: var(--wider-colour-2);
+    --event-colour-3: var(--wider-colour-3);
+    --event-colour-4: var(--wider-colour-4);
+    --event-colour-5: var(--wider-colour-17);
+    --event-colour-6: var(--wider-colour-6);
+    --event-colour-7: var(--wider-colour-7);
+    --event-colour-8: var(--wider-colour-14);
+    --event-colour-9: var(--wider-colour-10);
+    --event-colour-10: var(--wider-colour-23);
+  }
+
+  @for $i from 1 to 10 {
+    iam-calendar:not(.calendar--multi) [data-event-type-enum='#{$i}'] {
+      --event-colour: var(--event-colour-#{$i});
+    }
+
+    iam-calendar.calendar--multi [data-calendar-enum='#{$i}'] {
+      --event-colour: var(--event-colour-#{$i});
+    }
+  }
+
+  iam-calendar {
+    margin-bottom: 1rem;
+  }
+
+  iam-calendar button {
+    --background-opacity: 100%;
+
+    display: block;
+    width: 100%;
+    /* height:  1.5rem; */
+    border: none;
+    border-left: 4px solid color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 28%);
+    border-radius: 4px;
+    padding: 0.25rem;
+
+    font-size: 0.875rem; /* 14/16 */
+    line-height: 1.125rem; /* 18/16 */
+    margin-bottom: 0.5rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+    text-align: left;
+    position: relative;
+    z-index: 1;
+
+    background: rgb(from var(--event-colour, var(--wider-colour-1)) r g b / var(--background-opacity));
+
+    &:hover {
+      background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 10%);
+    }
+    &:active {
+      background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 20%);
+    }
+
+    .tooltip__content {
+      display: none;
+    }
+
+    &:hover .tooltip__content {
+      display: block;
+      z-index: var(--index-floating);
+      position: absolute;
+
+      width: 15.625rem; /* 250 */
+      background: var(--colour-primary);
+      color: var(--colour-white);
+      padding: 0.75rem;
+      border-radius: 0.5rem;
+      box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.11);
+      /* top: auto; */
+      /* bottom: calc(100% + 0.25rem); */
+      left: 50%;
+
+      /* transform: translate(-50%,0); */
+      font-size: 0.875rem; /* 14/16 */
+      line-height: 1.2;
+
+      white-space: normal;
+      z-index: 9999;
+      position: fixed;
+      bottom: anchor(top);
+      justify-self: anchor-center;
+      margin: 0.5rem;
+
+      > strong:first-child {
+        color: white;
+        display: block;
+        padding-bottom: 1rem;
+        color: inherit;
+      }
+
+      &:after {
+        content: '';
+        position: absolute;
+        top: 100%;
+        bottom: auto;
+        left: 50%;
+        margin-left: -0.25rem;
+        border-width: 0.5rem;
+        border-style: solid;
+        border-color: var(--colour-primary) transparent transparent transparent;
+        margin-top: -1px;
+      }
+    }
+  }
+
+  iam-calendar.calendar--multi {
+    background: rgb(from var(--event-colour, var(--wider-colour-8)) r g b / var(--background-opacity));
+
+    &:hover {
+      background: rgb(from var(--event-colour-hover, var(--wider-colour-8-hover)) r g b / var(--background-opacity));
+    }
+    &:active {
+      background: rgb(from var(--event-colour-active, var(--wider-colour-8-active)) r g b / var(--background-opacity));
+    }
+  }
+
+  iam-calendar[data-hide-confirmed] button:not(.tentative, .cancelled) {
+    display: none !important;
+  }
+  iam-calendar[data-hide-unconfirmed] button.tentative {
+    display: none !important;
+  }
+  iam-calendar[data-hide-cancelled] button.cancelled {
+    display: none !important;
+  }
+
+  iam-calendar button.tentative {
+    --background-opacity: 40%;
+    border-top: 1px dashed var(--event-colour);
+    border-right: 1px dashed var(--event-colour);
+    border-bottom: 1px dashed var(--event-colour);
+    border-left: none;
+    padding-left: 0.5rem;
+
+    &:before {
+      content: '';
+      height: 100%;
+      width: 4px;
+      background-color: var(--event-colour);
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5' viewBox='0 0 20 20'%3E%3Cg %3E%3Cpolygon fill='%23FFFFFF' points='20 10 10 0 0 0 20 20'/%3E%3Cpolygon fill='%23FFFFFF' points='0 10 0 20 10 20'/%3E%3C/g%3E%3C/svg%3E");
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+  }
+
+  iam-calendar button.cancelled {
+    border-top: 2px solid var(--colour-danger);
+    border-right: 2px solid var(--colour-danger);
+    border-bottom: 2px solid var(--colour-danger);
+  }
+
+  iam-calendar button.repeat {
+    padding-right: 2rem;
+
+    &:after {
+      position: absolute;
+      top: 0;
+      right: 0.25rem;
+      content: '\f363';
+      font-family: 'Font Awesome 7 Pro';
+      font-weight: 300;
+      line-height: 1.625rem; /* 26 */
+    }
+  }
+
+  iam-calendar[data-view='month'] button {
+    margin-bottom: 1px;
+
+    > span {
+      display: block;
+      height: 1.125rem; /* 18/16 */
+      white-space: nowrap;
+
+      overflow: hidden;
+
+      text-overflow: ellipsis;
+    }
+
+    &[data-start] > span:before {
+      content: attr(data-start);
+      display: inline-block;
+      margin-right: 0.25rem;
+    }
+
+    /*
+    span:not(.tooltip__content) {
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: inherit;
+    }
+      */
+  }
+
+  iam-calendar:is([data-view='week'], [data-view='day']) button:not(.allday-event) {
+    height: var(--event-height, 1.09375rem); /* 17.5 */
+    line-height: 1.125rem !important;
+    padding-top: 0.25rem !important;
+    white-space: normal !important;
+
+    display: inline-flex !important; /* keep the inline nature of buttons */
+    align-items: flex-start !important;
+
+    width: var(--event-width, 100%) !important;
+    max-width: var(--event-max-width, 100%) !important;
+    margin-bottom: 0px !important;
+
+    > span:not(.tooltip__content) {
+      display: -webkit-box;
+      -webkit-line-clamp: var(--line-clamp, 2);
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: inherit;
+      max-height: 100%;
+    }
+  }
+
+  /*  resize */
+  iam-calendar[data-resize]:is([data-view='week'], [data-view='day']) button:not(.allday-event) {
+    resize: vertical !important;
+  }
+
+  iam-calendar:is([data-view='week']) button.allday-event {
+    width: var(--event-width, 100%) !important;
+    max-width: var(--event-max-width, 100%) !important;
+  }
+
+  iam-calendar:is([data-view='week'], [data-view='day']) button.allday-event {
+    > span {
+      display: block;
+      height: 1.125rem; /* 18/16 */
+      /* white-space: nowrap; */
+
+      overflow: hidden;
+
+      text-overflow: ellipsis;
+    }
+
+    &[data-start] > span:before {
+      content: attr(data-start);
+      display: inline-block;
+      margin-right: 0.25rem;
+    }
+  }
+
+  iam-calendar:is([data-view='week'], [data-view='day']) button.resizing {
+    background: black !important;
+
+    .tooltip__content {
+      opacity: 0;
+    }
+  }
+  iam-calendar:is([data-view='week'], [data-view='day']) button:-webkit-drag {
+    .tooltip__content {
+      opacity: 0;
+    }
+  }
+
+  iam-calendar:is([data-view='week'], [data-view='day']) button.continued {
+    display: none !important;
+  }
+
+  /* #endregion */
+}
+
+.event-colours option {
+  /* display: none; */
+}
+
+.event-colours option[value='month'] {
+  display: flex;
+}
+
+.event-colours,
+.event-colours::picker(select) {
+  appearance: base-select;
+}
+
+.event-colours {
+  text-indent: -300%;
+  overflow: hidden;
+  position: relative;
+  width: 1.8rem;
+  border: none;
+  background-color: transparent;
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0.4rem;
+    left: 0.4rem;
+    width: 1rem;
+    height: 1rem;
+    background: pink;
+    border-radius: 0.5rem;
+  }
+}
+
+.event-colours::picker-icon {
+  display: none;
+}
+
+.event-colours::picker(select) {
+  border-radius: 0.5rem;
+  border-color: var(--colour-border);
+  box-shadow: 0px 2px 9px rgba(0, 0, 0, 0.1);
+  padding: 0.5rem;
+  text-indent: 0;
+}
+
+.event-colours option {
+  padding-block: 0.25rem;
+  position: relative;
+  padding-left: 2rem;
+  font-weight: light;
+  border-left: 4px solid transparent;
+  margin-bottom: 0.25rem;
+  border-radius: 0.25rem;
+
+  &:checked {
+    background: rgb(from var(--event-colour) r g b / 40%);
+    border-left: 4px solid color-mix(in srgb, var(--event-colour), black 28%);
+  }
+
+  &:hover {
+    background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 10%);
+    border-left: 4px solid color-mix(in srgb, var(--event-colour), black 28%);
+  }
+  &:active {
+    background: color-mix(in srgb, var(--event-colour, var(--wider-colour-1)), black 20%);
+    border-left: 4px solid color-mix(in srgb, var(--event-colour), black 28%);
+  }
+
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0.4rem;
+    left: 0.4rem;
+    width: 1rem;
+    height: 1rem;
+    background: pink;
+    border-radius: 0.5rem;
+  }
+}
+
+.event-colours option:before,
+.event-colours:has(option:checked):before {
+  background: color-mix(in srgb, var(--event-colour), black 28%);
+}
+
+.event-colours option[value='--wider-colour-1'],
+.event-colours:has(option[value='--wider-colour-1']:checked) {
+  --event-colour: var(--wider-colour-1);
+}
+
+.event-colours option[value='--wider-colour-2'],
+.event-colours:has(option[value='--wider-colour-2']:checked) {
+  --event-colour: var(--wider-colour-2);
+}
+
+.event-colours option[value='--wider-colour-3'],
+.event-colours:has(option[value='--wider-colour-3']:checked) {
+  --event-colour: var(--wider-colour-3);
+}
+
+.event-colours option[value='--wider-colour-4'],
+.event-colours:has(option[value='--wider-colour-4']:checked) {
+  --event-colour: var(--wider-colour-4);
+}
+
+.event-colours option[value='--wider-colour-17'],
+.event-colours:has(option[value='--wider-colour-17']:checked) {
+  --event-colour: var(--wider-colour-17);
+}
+
+.event-colours option[value='--wider-colour-6'],
+.event-colours:has(option[value='--wider-colour-6']:checked) {
+  --event-colour: var(--wider-colour-6);
+}
+
+.event-colours option[value='--wider-colour-7'],
+.event-colours:has(option[value='--wider-colour-7']:checked) {
+  --event-colour: var(--wider-colour-7);
+}
+
+.event-colours option[value='--wider-colour-14'],
+.event-colours:has(option[value='--wider-colour-14']:checked) {
+  --event-colour: var(--wider-colour-14);
+}
+
+.event-colours option[value='--wider-colour-10'],
+.event-colours:has(option[value='--wider-colour-10']:checked) {
+  --event-colour: var(--wider-colour-10);
+}
+
+.event-colours option[value='--wider-colour-23'],
+.event-colours:has(option[value='--wider-colour-23']:checked) {
+  --event-colour: var(--wider-colour-23);
+}
+
+.event-colours option:checked {
+  font-weight: bold;
+}
+
+.event-colours option::checkmark {
+  display: none;
+}