diff --git a/src/components/calendar/themes/days.ts b/src/components/calendar/themes/days.ts
index d6a76671b..8fb0b974d 100644
--- a/src/components/calendar/themes/days.ts
+++ b/src/components/calendar/themes/days.ts
@@ -1,56 +1,38 @@
 import { css } from 'lit';
 
 import type { Themes } from '../../../theming/types.js';
-// Dark Overrides
-import { styles as bootstrapDark } from './dark/calendar.bootstrap.css.js';
-import { styles as fluentDark } from './dark/calendar.fluent.css.js';
-import { styles as indigoDark } from './dark/calendar.indigo.css.js';
-import { styles as materialDark } from './dark/calendar.material.css.js';
-// Light Overrides
-import { styles as bootstrapLight } from './light/calendar.bootstrap.css.js';
-import { styles as fluentLight } from './light/calendar.fluent.css.js';
-import { styles as indigoLight } from './light/calendar.indigo.css.js';
-import { styles as materialLight } from './light/calendar.material.css.js';
-import { styles as shared } from './light/calendar.shared.css.js';
-// Shared Styles
 import { styles as bootstrap } from './shared/bootstrap/days-view.bootstrap.css.js';
 import { styles as fluent } from './shared/fluent/days-view.fluent.css.js';
 import { styles as indigo } from './shared/indigo/days-view.indigo.css.js';
 import { styles as material } from './shared/material/days-view.material.css.js';
 
 const light = {
-  shared: css`
-    ${shared}
-  `,
   bootstrap: css`
-    ${bootstrap} ${bootstrapLight}
+    ${bootstrap}
   `,
   material: css`
-    ${material} ${materialLight}
+    ${material}
   `,
   fluent: css`
-    ${fluent} ${fluentLight}
+    ${fluent}
   `,
   indigo: css`
-    ${indigo} ${indigoLight}
+    ${indigo}
   `,
 };
 
 const dark = {
-  shared: css`
-    ${shared}
-  `,
   bootstrap: css`
-    ${bootstrap} ${bootstrapDark}
+    ${bootstrap}
   `,
   material: css`
-    ${material} ${materialDark}
+    ${material}
   `,
   fluent: css`
-    ${fluent} ${fluentDark}
+    ${fluent}
   `,
   indigo: css`
-    ${indigo} ${indigoDark}
+    ${indigo}
   `,
 };
 
diff --git a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss
index 3d32ab207..dc3f7b25b 100644
--- a/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss
+++ b/src/components/calendar/themes/shared/bootstrap/days-view.bootstrap.scss
@@ -12,72 +12,63 @@ $border-size: rem(1px);
 
 [part~='days-row'] {
     padding: 0 pad-inline(rem(12px));
-}
 
-:host([part='days-view']) + :host([part='days-view']) {
-    margin-inline-start: pad-inline(rem(8px));
+    &:nth-child(2) {
+        [part='week-number-inner'] {
+            border-top-left-radius: var-get($theme, 'week-number-border-radius');
+            border-top-right-radius: var-get($theme, 'week-number-border-radius');
+        }
+    }
 }
 
 [part~='days-row'][part~='first'] {
-    background: var-get($theme, 'header-background');
     position: relative;
+    background: var-get($theme, 'header-background');
+    border-block-end: rem(1px) solid var-get($theme, 'border-color');
+}
 
-    &::after {
-        content: '';
-        position: absolute;
-        width: 100%;
-        inset-block-start: 100%;
-        inset-inline-start: 0;
-        height: rem(1px);
-        background: var-get($theme, 'border-color');
-    }
+:host([part='days-view']) + :host([part='days-view']) {
+    margin-inline-start: pad-inline(rem(8px));
 }
 
-[part~='week-number'] {
+[part~='week-number'],
+[part~='week-number-inner'] {
     width: var-get($theme, 'size');
 }
 
 [part~='week-number-inner'] {
-    width: var-get($theme, 'size');
     height: var-get($theme, 'size');
-    color: var-get($theme, 'week-number-foreground');
-    background: var-get($theme, 'week-number-background');
     border: none;
     font-style: italic;
 
-    &::after {
-        width: var-get($theme, 'size');
-        inset-block-end: 100%;
-        background: var-get($theme, 'week-number-background');
+    &[part~='first'] {
+        border-top-left-radius: var-get($theme, 'week-number-border-radius');
+        border-top-right-radius: var-get($theme, 'week-number-border-radius');
     }
-}
 
-[part='week-number-inner first'] {
-    border-top-left-radius: var-get($theme, 'week-number-border-radius');
-    border-top-right-radius: var-get($theme, 'week-number-border-radius');
-}
+    &[part~='last'] {
+        border-bottom-left-radius: var-get($theme, 'week-number-border-radius');
+        border-bottom-right-radius: var-get($theme, 'week-number-border-radius');
+    }
 
-[part='week-number-inner last'] {
-    border-bottom-left-radius: var-get($theme, 'week-number-border-radius');
-    border-bottom-right-radius: var-get($theme, 'week-number-border-radius');
+    &:not([part~='first']) {
+        color: var-get($theme, 'week-number-foreground');
+        background: var-get($theme, 'week-number-background');
+    }
+
+    &:not([part~='last']) {
+        &::after {
+            width: var-get($theme, 'size');
+            inset-block-start: 100%;
+            background: var-get($theme, 'week-number-background');
+        }
+    }
 }
 
 [part~='label'] {
     height: var-get($theme, 'size');
     font-style: italic;
     color: var-get($theme, 'weekday-color');
-
-    [part~='week-number-inner'] {
-        color: var-get($theme, 'weekday-color');
-    }
-}
-
-[part~='weekend'] {
-    color: var-get($theme, 'weekend-color');
-}
-
-[part~='inactive'] {
-    color: var-get($theme, 'inactive-color');
 }
 
 [part~='date'] {
@@ -88,10 +79,15 @@ $border-size: rem(1px);
     &[part~='range'],
     &[part~='range'][part~='preview'] {
         background: var-get($theme, 'date-selected-range-background');
-        border-top-style: solid;
-        border-bottom-style: solid;
-        border-top-color: var-get($theme, 'date-range-preview-border-color');
-        border-bottom-color: var-get($theme, 'date-range-preview-border-color');
+        border-block-style: solid;
+    }
+
+    &[part~='range'] {
+        border-block-color: var-get($theme, 'date-range-border-color');
+    }
+
+    &[part~='range'][part~='preview'] {
+        border-block-color: var-get($theme, 'date-range-preview-border-color');
     }
 
     &[part~='range'][part~='selected'][part~='first'],
@@ -100,7 +96,13 @@ $border-size: rem(1px);
     &[part~='range'][part~='preview'][part~='last'] {
         &::after {
             background: var-get($theme, 'date-selected-range-background');
-            border-color: transparent;
+        }
+    }
+
+    &[part~='range'][part~='selected'][part~='first'],
+    &[part~='range'][part~='selected'][part~='last'] {
+        &::after {
+            border-block-color: var-get($theme, 'date-range-border-color');
         }
     }
 
@@ -114,7 +116,7 @@ $border-size: rem(1px);
             height: var-get($theme, 'size');
             width: var-get($theme, 'size');
             background: var-get($theme, 'content-background');
-            border-radius: var-get($theme, 'date-border-radius');
+            border-radius: var-get($theme, 'date-range-border-radius');
         }
 
         &::after {
@@ -124,88 +126,77 @@ $border-size: rem(1px);
         }
     }
 
+    &[part~='range'][part~='first'][part~='special'],
+    &[part~='range'][part~='last'][part~='special'] {
+        border-radius: var-get($theme, 'date-range-border-radius');
+
+        &::before {
+            border-radius: var-get($theme, 'date-special-border-radius');
+        }
+    }
+
+    &[part~='range'][part~='first'][part~='current'],
+    &[part~='range'][part~='last'][part~='current'] {
+        border-radius: var-get($theme, 'date-range-border-radius');
+
+        &::before {
+            border-radius: var-get($theme, 'date-range-border-radius');
+        }
+    }
+
     &[part~='range'][part~='preview'][part~='first'],
     &[part~='range'][part~='preview'][part~='last'] {
         background: transparent;
         border-top-color: transparent;
         border-bottom-color: transparent;
+
+        &::after {
+            border-block-color: var-get($theme, 'date-range-preview-border-color');
+        }
     }
 }
 
 [part~='date-inner'] {
     width: var-get($theme, 'size');
     height: var-get($theme, 'size');
-    border: $border-size solid var-get($theme, 'date-border-color');
+    border: $border-size solid transparent;
     border-radius: var-get($theme, 'date-border-radius');
 
     &:hover {
-        color: var-get($theme, 'date-hover-foreground');
         background: var-get($theme, 'date-hover-background');
-        border-color: var-get($theme, 'date-hover-border-color');
     }
 
     &:focus {
-        color: var-get($theme, 'date-hover-foreground');
-        background: var-get($theme, 'date-hover-background');
-        border-color: var-get($theme, 'date-hover-border-color');
+        background: var-get($theme, 'date-focus-background');
     }
 
-    &::after {
-        content: "";
-        position: absolute;
-        z-index: 0;
-        border: 0.0625rem solid transparent;
-        border-radius: calc(var-get($theme, 'size') / 2);
-        width: var-get($theme, 'size');
-        height: var-get($theme, 'size');
-        box-sizing: border-box;
-    }
 
-    &[part~='special'][part~='selected']:not([part~='range']),
-    &[part~='special'][part~='selected'][part~='first'],
-    &[part~='special'][part~='selected'][part~='last'],
-    &[part~='special'][part~='current'],
-    &[part~='range'][part~='preview'][part~='first'],
-    &[part~='range'][part~='preview'][part~='last'] {
-        &::after {
-            width: var-get($theme, 'inner-size');
-            height: var-get($theme, 'inner-size');
-        }
-    }
+    &:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='first'], [part~='last'], [part~='range'], [part~='preview'][part~='disabled']) {
+        border-color: var-get($theme, 'date-border-color');
 
-    &[part~='range'][part~='preview'],
-    &[part~='range'] {
-        color: var-get($theme, 'date-selected-range-foreground');
-    }
+        &:hover {
+            border-color: var-get($theme, 'date-hover-border-color');
+        }
 
-    &[part~='disabled'] {
-        color: var-get($theme, 'date-disabled-foreground');
+        &:focus {
+            border-color: var-get($theme, 'date-focus-border-color');
+        }
     }
 
-    &[part~='current'] {
-        position: relative;
-        color: var-get($theme, 'date-current-foreground');
-        background: var-get($theme, 'date-current-background');
-        border-color: var-get($theme, 'date-current-border-color');
+    &[part~='inactive']:not([part~='selected'][part~='range'], [part~='range'], [part~='disabled'], [part~='first'], [part~='last'])  {
+        color: var-get($theme, 'inactive-color');
 
         &:hover {
-            color: var-get($theme, 'date-current-hover-foreground');
-            background: var-get($theme, 'date-current-hover-background');
-            border-color: var-get($theme, 'date-current-hover-border-color');
+            color: var-get($theme, 'date-hover-foreground');
         }
 
         &:focus {
-            color: var-get($theme, 'date-current-focus-foreground');
-            background: var-get($theme, 'date-current-focus-background');
-            border-color: var-get($theme, 'date-current-focus-border-color');
+            color:  var-get($theme, 'date-focus-foreground');
         }
     }
 
-    &[part~='disabled'][part~='range'] {
-        color: var-get($theme, 'date-disabled-range-foreground');
-    }
-
-    &[part~='selected'] {
+    &[part~='preview'][part~='first'],
+    &[part~='preview'][part~='last'] {
         color: var-get($theme, 'date-selected-foreground');
         background: var-get($theme, 'date-selected-background');
         border-color: var-get($theme, 'date-selected-border-color');
@@ -223,25 +214,81 @@ $border-size: rem(1px);
         }
     }
 
-    &[part~='selected'][part~='current'],
-    &[part~='selected'][part~='current'][part~='range'],
-    &[part~='current'][part~='preview'] {
-        border-color: var-get($theme, 'date-selected-current-border-color');
+    &[part~='disabled']:not([part~='selected'],[part~='special'],[part~='current']) {
+        color: var-get($theme, 'date-disabled-foreground');
+    }
+
+    &[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current']) {
+        color: var-get($theme, 'date-disabled-range-foreground');
+    }
+
+    &[part~='first'],
+    &[part~='last'] {
+        border-radius: var-get($theme, 'date-range-border-radius');
+
+        &::after {
+            border-radius: var-get($theme, 'date-range-border-radius');
+        }
+    }
+
+    &[part~='special'] {
+        border-radius: var-get($theme, 'date-border-radius');
+
+        &::after {
+            border-radius: var-get($theme, 'date-special-border-radius');
+        }
+    }
+
+    &[part~='special'][part~='selected'] {
+        border-radius: var-get($theme, 'date-border-radius');
+    }
+
+    &[part~='current'] {
+        border-radius: var-get($theme, 'date-current-border-radius');
+    }
+
+    &[part~='special'][part~='current'] {
+        border-radius: var-get($theme, 'date-current-border-radius');
+
+        &::after {
+            border-radius: var-get($theme, 'date-special-border-radius');
+        }
+    }
+
+    &[part~='current'][part~='first'],
+    &[part~='current'][part~='last'],
+    &[part~='current'][part~='special'][part~='first'],
+    &[part~='current'][part~='special'][part~='last'],
+    &[part~='special'][part~='first'],
+    &[part~='special'][part~='last'] {
+        border-radius: var-get($theme, 'date-range-border-radius');
+    }
+}
+
+[part~='date-inner']:not([part~='inactive']) {
+    &:hover {
+        color: var-get($theme, 'date-hover-foreground');
+    }
+
+    &:focus {
+        color: var-get($theme, 'date-focus-foreground');
+    }
+
+    &[part~='weekend']:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='selected'], [part~='preview'], [part~='disabled']) {
+        color: var-get($theme, 'weekend-color');
 
         &:hover {
-            border-color: var-get($theme, 'date-selected-current-hover-border-color');
+            color: var-get($theme, 'date-hover-foreground');
         }
 
         &:focus {
-            border-color: var-get($theme, 'date-selected-current-focus-border-color');
+            color:  var-get($theme, 'date-focus-foreground');
         }
     }
 
-    &[part~='range'][part~='selected'],
-    &[part~='range'][part~='selected'][part~='preview'],
-    &[part~='range'][part~='selected'][part~='current'] {
+    &[part~='range'][part~='selected']:not([part~='current'], [part~='special'], [part~='first'], [part~='last'], [part~='first'][part~='last']),
+    &[part~='range'][part~='preview']:not([part~='current'], [part~='special'], [part~='first'], [part~='last'], [part~='disabled'], [part~='first'][part~='last']) {
         color: var-get($theme, 'date-selected-range-foreground');
-        background: transparent;
 
         &:hover {
             color: var-get($theme, 'date-selected-range-hover-foreground');
@@ -252,15 +299,103 @@ $border-size: rem(1px);
             color: var-get($theme, 'date-selected-range-focus-foreground');
             background: var-get($theme, 'date-selected-range-focus-background');
         }
+    }
 
+    &[part~='special'][part~='selected']:not([part~='range']),
+    &[part~='special'][part~='selected'][part~='first'],
+    &[part~='special'][part~='selected'][part~='last'],
+    &[part~='special'][part~='current'] {
+        &::after {
+            width: var-get($theme, 'inner-size');
+            height: var-get($theme, 'inner-size');
+        }
     }
 
-    &[part~='range'][part~='selected'][part~='first'],
-    &[part~='range'][part~='preview'][part~='first'],
-    &[part~='range'][part~='current'][part~='preview'][part~='first'],
-    &[part~='range'][part~='selected'][part~='last'],
-    &[part~='range'][part~='preview'][part~='last'],
-    &[part~='range'][part~='current'][part~='preview'][part~='last'] {
+    &[part~='current'] {
+        position: relative;
+        color: var-get($theme, 'date-current-foreground');
+        background: var-get($theme, 'date-current-background');
+        border-color: var-get($theme, 'date-current-border-color');
+
+        &:hover {
+            color: var-get($theme, 'date-current-hover-foreground');
+            background: var-get($theme, 'date-current-hover-background');
+            border-color: var-get($theme, 'date-current-hover-border-color');
+        }
+
+        &:focus {
+            color: var-get($theme, 'date-current-focus-foreground');
+            background: var-get($theme, 'date-current-focus-background');
+            border-color: var-get($theme, 'date-current-focus-border-color');
+        }
+
+        &[part~='range']:not([part~='first'], [part~='last'], [part~='preview']) {
+            color: var-get($theme, 'date-selected-current-range-foreground');
+            background: var-get($theme, 'date-selected-current-range-background');
+            border-color: var-get($theme, 'date-current-border-color');
+
+            &:hover {
+                color: var-get($theme, 'date-selected-current-range-hover-foreground');
+                background: var-get($theme, 'date-selected-current-range-hover-background');
+                border-color: var-get($theme, 'date-current-hover-border-color');
+            }
+
+            &:focus {
+                color: var-get($theme, 'date-selected-current-range-focus-foreground');
+                background: var-get($theme, 'date-selected-current-range-focus-background');
+                border-color: var-get($theme, 'date-current-focus-border-color');
+            }
+        }
+    }
+
+    &[part~='special'] {
+        &::after {
+            content: "";
+            position: absolute;
+            z-index: 0;
+            border: rem(1px) solid var-get($theme, 'date-special-border-color');
+            width: var-get($theme, 'size');
+            height: var-get($theme, 'size');
+            box-sizing: border-box;
+        }
+
+        &:hover {
+            &::after {
+                border-color: var-get($theme, 'date-special-hover-border-color');
+            }
+        }
+
+        &:focus {
+            &::after {
+                border-color: var-get($theme, 'date-special-focus-border-color');
+            }
+        }
+    }
+
+    &[part~='special']:not([part~='current']) {
+        color: var-get($theme, 'date-special-foreground');
+        background: var-get($theme, 'date-special-background');
+
+        &:hover {
+            color: var-get($theme, 'date-special-hover-foreground');
+            background: var-get($theme, 'date-special-hover-background');
+        }
+
+        &:focus {
+            color: var-get($theme, 'date-special-focus-foreground');
+            background: var-get($theme, 'date-special-focus-background');
+        }
+    }
+
+    // FIRST AND LAST DATES IN RANGE SELECTION SHOULDN'T LOOK THE SAME AS SELECTED DATES
+    &[part~='selected'][part~='first'],
+    &[part~='selected'][part~='last'],
+    &[part~='selected'][part~='first'][part~='last'],
+    &[part~='selected'][part~='first'][part~='range'],
+    &[part~='selected'][part~='last'][part~='range'],
+    &[part~='selected'][part~='first'][part~='last'][part~='range'],
+    &[part~='preview'][part~='first'],
+    &[part~='preview'][part~='last'] {
         color: var-get($theme, 'date-selected-foreground');
         background: var-get($theme, 'date-selected-background');
         border-color: var-get($theme, 'date-selected-border-color');
@@ -278,173 +413,205 @@ $border-size: rem(1px);
         }
     }
 
-    &[part~='special'][part~='range'][part~='selected'][part~='first'][part~='last'],
-    &[part~='special'][part~='range'][part~='preview'][part~='first'][part~='last'],
-    &[part~='special'][part~='range'][part~='current'][part~='preview'][part~='first'][part~='last'],
-    &[part~='special'][part~='range'][part~='selected'][part~='last'],
-    &[part~='special'][part~='range'][part~='preview'][part~='last'],
-    &[part~='special'][part~='range'][part~='current'][part~='preview'][part~='last'],
-    &[part~='special'][part~='range'][part~='selected'][part~='first'],
-    &[part~='special'][part~='range'][part~='preview'][part~='first'],
-    &[part~='special'][part~='range'][part~='current'][part~='preview'][part~='first'] {
-        &::after {
-            border-color: var-get($theme, 'date-selected-foreground');
-        }
-    }
-
-    &[part~='selected'][part~='current'][part~='first'][part~='last'],
-    &[part~='range'][part~='current'][part~='preview'][part~='last'],
-    &[part~='range'][part~='current'][part~='preview'][part~='first'] {
+    &[part~='current'][part~='selected'][part~='first'],
+    &[part~='current'][part~='selected'][part~='last'] {
         border-color: var-get($theme, 'date-selected-current-border-color');
 
         &:hover {
-            color: var-get($theme, 'date-selected-current-hover-foreground');
             border-color: var-get($theme, 'date-selected-current-hover-border-color');
         }
 
         &:focus {
-            color: var-get($theme, 'date-selected-current-focus-foreground');
             border-color: var-get($theme, 'date-selected-current-focus-border-color');
         }
     }
 
-    &[part~='range'][part~='selected'][part~='current'][part~='first'],
-    &[part~='range'][part~='selected'][part~='current'][part~='last'] {
-        color: var-get($theme, 'date-selected-current-foreground');
-        background: var-get($theme, 'date-selected-current-background');
+    &[part~='preview'][part~='first'][part~='current'],
+    &[part~='preview'][part~='last'][part~='current'] {
         border-color: var-get($theme, 'date-selected-current-border-color');
 
         &:hover {
-            color: var-get($theme, 'date-selected-current-hover-foreground');
-            background: var-get($theme, 'date-selected-current-hover-background');
             border-color: var-get($theme, 'date-selected-current-hover-border-color');
         }
 
         &:focus {
-            color: var-get($theme, 'date-selected-current-focus-foreground');
-            background: var-get($theme, 'date-selected-current-focus-background');
             border-color: var-get($theme, 'date-selected-current-focus-border-color');
         }
     }
 
-    &[part~='range'][part~='selected'][part~='current'][part~='special'][part~='first'],
-    &[part~='range'][part~='selected'][part~='current'][part~='special'][part~='last'] {
-        border-color: var-get($theme, 'date-current-border-color');
+    &:not([part~='range']) {
+        &[part~='selected'] {
+            color: var-get($theme, 'date-selected-foreground');
+            background: var-get($theme, 'date-selected-background');
+            border-color: var-get($theme, 'date-selected-border-color');
 
-        &:hover {
-            color: var-get($theme, 'date-selected-current-hover-foreground');
-            border-color: var-get($theme, 'date-current-hover-border-color');
+            &:hover {
+                color: var-get($theme, 'date-selected-hover-foreground');
+                background: var-get($theme, 'date-selected-hover-background');
+                border-color: var-get($theme, 'date-selected-hover-border-color');
+            }
+
+            &:focus {
+                color: var-get($theme, 'date-selected-focus-foreground');
+                background: var-get($theme, 'date-selected-focus-background');
+                border-color: var-get($theme, 'date-selected-focus-border-color');
+            }
         }
 
-        &:focus {
-            color: var-get($theme, 'date-selected-current-focus-foreground');
-            border-color: var-get($theme, 'date-current-focus-border-color');
+        &[part~='selected'][part~='current'] {
+            border-color: var-get($theme, 'date-selected-current-border-color');
+
+            &:hover {
+                border-color: var-get($theme, 'date-selected-current-hover-border-color');
+            }
+
+            &:focus {
+                border-color: var-get($theme, 'date-selected-current-focus-border-color');
+            }
+        }
+
+        &[part~='selected'][part~='special'] {
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-border-color');
+            }
+
+            &:hover {
+                /* stylelint-disable-next-line max-nesting-depth */
+                &::after {
+                    border-color: var-get($theme, 'date-selected-special-hover-border-color');
+                }
+            }
+
+            &:focus {
+                /* stylelint-disable-next-line max-nesting-depth */
+                &::after {
+                    border-color: var-get($theme, 'date-selected-special-focus-border-color');
+                }
+            }
         }
     }
 
-    &[part~='range'][part~='selected'][part~='current'] {
-        color: var-get($theme, 'date-selected-current-range-foreground');
+    &:not([part~='range'], [part~='first'][part~='last']) {
+        &[part~='selected'][part~='special'] {
+            color: var-get($theme, 'date-selected-special-foreground');
+            background: var-get($theme, 'date-selected-special-background');
 
-        &:hover {
-            color: var-get($theme, 'date-selected-current-range-hover-foreground');
-            background: var-get($theme, 'date-selected-current-range-hover-background');
+            &:hover {
+                color: var-get($theme, 'date-selected-special-hover-foreground');
+                background: var-get($theme, 'date-selected-special-hover-background');
+            }
+
+            &:focus {
+                color: var-get($theme, 'date-selected-special-focus-foreground');
+                background: var-get($theme, 'date-selected-special-focus-background');
+            }
         }
 
-        &:focus {
-            color: var-get($theme, 'date-selected-current-range-focus-foreground');
-            background: var-get($theme, 'date-selected-current-range-focus-background');
+        &[part~='selected'][part~='current'] {
+            color: var-get($theme, 'date-selected-current-foreground');
+            background: var-get($theme, 'date-selected-current-background');
+
+            &:hover {
+                color: var-get($theme, 'date-selected-current-hover-foreground');
+                background: var-get($theme, 'date-selected-current-hover-background');
+            }
+
+            &:focus {
+                color: var-get($theme, 'date-selected-current-focus-foreground');
+                background: var-get($theme, 'date-selected-current-focus-background');
+            }
         }
     }
 
-    &[part~='special'] {
-        color: var-get($theme, 'date-special-foreground');
-        background: var-get($theme, 'date-special-background');
-
+    &[part~='range'][part~='selected'][part~='special']:not([part~='first'], [part~='last']) {
         &::after {
-            border-color: var-get($theme, 'date-special-border-color');
+            border-color: var-get($theme, 'date-special-range-border-color');
         }
 
         &:hover {
-            color: var-get($theme, 'date-hover-foreground');
-            background: var-get($theme, 'date-hover-background');
-
             &::after {
-                border-color: var-get($theme, 'date-special-hover-border-color');
+                border-color: var-get($theme, 'date-special-range-hover-border-color');
             }
         }
 
         &:focus {
-            color: var-get($theme, 'date-focus-foreground');
-            background: var-get($theme, 'date-focus-background');
-
             &::after {
-                border-color: var-get($theme, 'date-special-hover-border-color');
+                border-color: var-get($theme, 'date-special-range-focus-border-color');
             }
         }
     }
 
-    &[part~='selected'][part~='special']:not([part~='range']) {
-        color: var-get($theme, 'date-selected-foreground');
-        background: var-get($theme, 'date-selected-background');
+    &[part~='range'][part~='selected'][part~='special']:not([part~='first'], [part~='last'], [part~='current']) {
+        color: var-get($theme, 'date-special-range-foreground');
+        background: var-get($theme, 'date-special-range-background');
 
+        &:hover {
+            color: var-get($theme, 'date-special-range-hover-foreground');
+            background: var-get($theme, 'date-special-range-hover-background');
+        }
+
+        &:focus {
+            color: var-get($theme, 'date-special-range-focus-foreground');
+            background: var-get($theme, 'date-special-range-focus-background');
+        }
+    }
+
+    // IN THE PREVIEW STATE, FIRST AND LAST DATES SHOULD LOOK THE SAME AS SELECTED DATES
+    &[part~='preview'][part~='special'][part~='first'],
+    &[part~='preview'][part~='special'][part~='last'],
+    &[part~='selected'][part~='special'][part~='range'][part~='first'],
+    &[part~='selected'][part~='special'][part~='range'][part~='last'] {
         &::after {
+            width: var-get($theme, 'inner-size');
+            height: var-get($theme, 'inner-size');
             border-color: var-get($theme, 'date-selected-special-border-color');
         }
 
         &:hover {
-            color: var-get($theme, 'date-selected-hover-foreground');
-            background: var-get($theme, 'date-selected-hover-background');
-
             &::after {
                 border-color: var-get($theme, 'date-selected-special-hover-border-color');
             }
         }
 
         &:focus {
-            color: var-get($theme, 'date-selected-focus-foreground');
-            background: var-get($theme, 'date-selected-focus-background');
-
             &::after {
                 border-color: var-get($theme, 'date-selected-special-focus-border-color');
             }
         }
     }
+}
 
-    &[part~='inactive'] {
-        &::after {
-            display: none;
-        }
+[part~='date-inner'][part~='inactive'][part~='range']:not([part~='first'], [part~='last']),
+[part~='date-inner'][part~='inactive'][part~='preview']:not([part~='first'], [part~='last']) {
+    color: var-get($theme, 'date-selected-range-foreground');
 
-        &:hover {
-            color: var-get($theme, 'inactive-color');
-        }
+    &:hover {
+        color: var-get($theme, 'date-selected-range-hover-foreground');
+        background: var-get($theme, 'date-selected-range-hover-background');
     }
 
-    &[part~='inactive'][part~='special']:not([part~='range']) {
-        &:hover {
-            color: var-get($theme, 'inactive-color');
-        }
+    &:focus {
+        color: var-get($theme, 'date-selected-range-focus-foreground');
+        background: var-get($theme, 'date-selected-range-focus-background');
     }
+}
 
-    &[part~='inactive'][part~='selected']:not([part~='range']),
-    &[part~='inactive'][part~='current']:not([part~='range']) {
-        color: var-get($theme, 'inactive-color');
-        background: transparent;
+[part~='date-inner'][part~='selected'][part~='inactive'][part~='first'],
+[part~='date-inner'][part~='selected'][part~='inactive'][part~='last'] {
+    color: var-get($theme, 'date-selected-foreground');
+    background: var-get($theme, 'date-selected-background');
+    border-color: var-get($theme, 'date-selected-border-color');
 
-        &:hover {
-            background: var-get($theme, 'date-hover-background');
-            border-color: var-get($theme, 'date-hover-border-color');
-        }
+    &:hover {
+        color: var-get($theme, 'date-selected-hover-foreground');
+        background: var-get($theme, 'date-selected-hover-background');
+        border-color: var-get($theme, 'date-selected-hover-border-color');
     }
 
-    &[part~='inactive'][part~='current'],
-    &[part~='inactive'][part~='current'][part~='selected'][part~='first'],
-    &[part~='inactive'][part~='current'][part~='selected'][part~='last'],
-    &[part~='inactive'][part~='current'][part~='selected'], {
-        border-color: transparent;
-
-        &:hover {
-            border-color: transparent;
-        }
+    &:focus {
+        color: var-get($theme, 'date-selected-focus-foreground');
+        background: var-get($theme, 'date-selected-focus-background');
+        border-color: var-get($theme, 'date-selected-focus-border-color');
     }
 }
+
diff --git a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss
index 9bbf753ec..ac7e81d27 100644
--- a/src/components/calendar/themes/shared/fluent/days-view.fluent.scss
+++ b/src/components/calendar/themes/shared/fluent/days-view.fluent.scss
@@ -4,6 +4,9 @@
 $theme: $fluent;
 $border-size: rem(1px);
 $row-gap: rem(6px);
+$week-number-radius: var-get($theme, 'week-number-border-radius');
+$fake-bg-size: calc(50% + (var-get($theme, 'size') / 2));
+$fake-bg-position: calc(50% - (var-get($theme, 'size') / 2));
 
 :host {
     --date-size: #{sizable(rem(12px), rem(14px), rem(16px))};
@@ -31,21 +34,24 @@ $row-gap: rem(6px);
     height: var-get($theme, 'size');
     color: var-get($theme, 'week-number-foreground');
     background: var-get($theme, 'week-number-background');
-    border-inline-end-color: var-get($theme, 'date-border-color');
-    border-radius: var-get($theme, 'week-number-border-radius');
 
     &::after {
         width: var-get($theme, 'size');
         background: var-get($theme, 'week-number-background');
         border-inline-start: rem(1px) solid var-get($theme, 'week-number-background');
         border-inline-end: rem(1px) solid var-get($theme, 'week-number-background');
-        border-inline-end-color: var-get($theme, 'date-border-color');
+        border-inline-end-color: var-get($theme, 'week-number-background');
     }
+}
 
-    &[part~='first'],
-    &[part~='last'] {
-        border-radius: 0;
-    }
+[part~='week-number-inner'][part~='first'] {
+    border-top-left-radius: $week-number-radius;
+    border-top-right-radius: $week-number-radius;
+}
+
+[part~='week-number-inner'][part~='last'] {
+    border-bottom-left-radius: $week-number-radius;
+    border-bottom-right-radius: $week-number-radius;
 }
 
 [part~='label'] {
@@ -57,107 +63,137 @@ $row-gap: rem(6px);
     color: var-get($theme, 'weekend-color');
 }
 
-[part~='inactive']:not([part~='range']) {
-    color: var-get($theme, 'inactive-color') !important;
-    border-color: transparent !important;
+[part~='date-inner'] {
+    width: var-get($theme, 'size');
+    height: var-get($theme, 'size');
+    border-radius: var-get($theme, 'date-border-radius');
 
-    &:hover {
+    &[part~='inactive']:where(:not([part~='selected'][part~='range'])) {
         color: var-get($theme, 'inactive-color');
     }
-}
 
-[part~='inactive']:not([part~='preview']) {
-    color: var-get($theme, 'inactive-color');
+    &[part~='inactive']:not([part~='preview']) {
+        &:hover {
+            color: var-get($theme, 'date-hover-foreground');
+        }
+    }
 
-    &:hover {
-        color: var-get($theme, 'inactive-color');
+    &[part~='disabled']:not([part~='special'],[part~='current']) {
+        color: var-get($theme, 'date-disabled-foreground');
+    }
+
+    &[part~='disabled'][part~='range']:not([part~='special'],[part~='current'],[part~='preview']) {
+        color: var-get($theme, 'date-disabled-range-foreground');
+    }
+
+    &[part~='disabled'][part~='selected'][part~='first']:not([part~='special'],[part~='current'],[part~='preview']),
+    &[part~='disabled'][part~='selected'][part~='last']:not([part~='special'],[part~='current'],[part~='preview']) {
+        opacity: 1;
+    }
+
+    &[part~='range'] {
+        height: 100%;
+        border-radius: var-get($theme, 'date-range-border-radius');
+    }
+
+    &[part~='selected'][part~='first'][part~='last'] {
+        border-radius: var-get($theme, 'date-range-border-radius');
+    }
+
+    &[part~='special'] {
+        &::after {
+            border-radius: var-get($theme, 'date-special-border-radius');
+        }
+    }
+
+    &[part~='current'] {
+        &::before {
+            border-radius: var-get($theme, 'date-current-border-radius');
+        }
+    }
+
+    &[part~='current'][part~='special'] {
+        &::before,
+        &::after {
+            border-radius: var-get($theme, 'date-current-border-radius');
+        }
     }
 }
 
-[part~='date-inner'] {
-    width: var-get($theme, 'size');
-    height: var-get($theme, 'size');
-    border-radius: var-get($theme, 'date-border-radius');
+[part~='date-inner']:not([part~='preview'], [part~='first'][part~='last']) {
+    &:not([part~='selected'], [part~='preview'], [part~='range'], [part~='first'][part~='last']) {
+        border-color: var-get($theme, 'date-border-color');
 
-    &::after {
-        content: '';
-        position: absolute;
-        z-index: 0;
-        border: $border-size solid transparent;
-        border-radius: 50%;
-        width: var-get($theme, 'inner-size');
-        height: var-get($theme, 'inner-size');
+        &:hover {
+            border-color: var-get($theme, 'date-hover-border-color');
+        }
+
+        &:focus {
+            border-color: var-get($theme, 'date-focus-border-color');
+        }
     }
 
     &:hover {
         color: var-get($theme, 'date-hover-foreground');
         background: var-get($theme, 'date-hover-background');
-        border-color: var-get($theme, 'date-hover-border-color');
     }
 
     &:focus {
         color: var-get($theme, 'date-focus-foreground');
         background: var-get($theme, 'date-focus-background');
-        border-color: var-get($theme, 'date-focus-border-color');
     }
+}
 
+[part~='date-inner']:not([part~='inactive']) {
     // This selector works only in range selection since firs and last are present only in the range selection
     &[part~='selected'][part~='first'][part~='last'] {
         background: transparent;
         border-color: var-get($theme, 'date-range-preview-border-color');
-        border-radius: var-get($theme, 'date-range-border-radius');
-    }
 
-    &[part~='disabled'] {
-        color: var-get($theme, 'date-disabled-foreground');
+        &:hover,
+        &:focus {
+            background: transparent;
+        }
     }
 
-    &[part~='disabled'][part~='range'] {
-        color: var-get($theme, 'date-disabled-range-foreground');
+    &[part~='selected']:where(:not([part~='range'], [part~='first'][part~='last'])) {
+        color: var-get($theme, 'date-selected-foreground');
+        background: var-get($theme, 'date-selected-background');
+        border-color: var-get($theme, 'date-selected-border-color');
+
+        &:hover {
+            color: var-get($theme, 'date-selected-hover-foreground');
+            background: var-get($theme, 'date-selected-hover-background');
+            border-color: var-get($theme, 'date-selected-hover-border-color');
+
+        }
+
+        &:focus {
+            color: var-get($theme, 'date-selected-focus-foreground');
+            background: var-get($theme, 'date-selected-focus-background');
+            border-color: var-get($theme, 'date-selected-focus-border-color');
+        }
     }
 
     &[part~='range'] {
-        height: 100%;
-
         &[part~='selected'][part~='first'][part~='last'] {
-            color: var-get($theme, 'date-selected-foreground') !important;
-            background: var-get($theme, 'date-selected-background') !important;
+            color: var-get($theme, 'date-selected-range-foreground');
+            background: var-get($theme, 'date-selected-range-background');
 
             &:hover {
-                color: var-get($theme, 'date-selected-hover-foreground');
-                background: var-get($theme, 'date-selected-hover-background');
+                color: var-get($theme, 'date-selected-range-hover-foreground');
+                background: var-get($theme, 'date-selected-range-hover-background');
             }
 
             &:focus {
-                color: var-get($theme, 'date-selected-hover-foreground');
-                background: var-get($theme, 'date-selected-hover-background');
+                color: var-get($theme, 'date-selected-range-focus-foreground');
+                background: var-get($theme, 'date-selected-range-focus-background');
             }
         }
 
         &[part~='selected'][part~='first'],
         &[part~='selected'][part~='last'] {
-            border-top-color: var-get($theme, 'date-range-border-color');
-            border-bottom-color: var-get($theme, 'date-range-border-color');
-        }
-
-        &[part~='selected'][part~='first'] {
-            color: var-get($theme, 'date-selected-foreground');
-            background: var-get($theme, 'date-selected-background');
-            border-color: transparent;
-            border-start-start-radius: var-get($theme, 'date-range-border-radius');
-            border-end-start-radius: var-get($theme, 'date-range-border-radius');
-            border-start-end-radius: var-get($theme, 'date-border-radius');
-            border-end-end-radius: var-get($theme, 'date-border-radius');
-
-            &:hover {
-                color: var-get($theme, 'date-selected-hover-foreground');
-                background: var-get($theme, 'date-selected-hover-background');
-            }
-
-            &:focus {
-                color: var-get($theme, 'date-selected-focus-foreground');
-                background: var-get($theme, 'date-selected-focus-background');
-            }
+            border-inline-color: transparent;
 
             &:hover,
             &:focus {
@@ -165,73 +201,105 @@ $row-gap: rem(6px);
             }
         }
 
-        &[part~='selected'][part~='last'] {
-            color: var-get($theme, 'date-selected-foreground');
-            background: var-get($theme, 'date-selected-background');
-            border-color: transparent;
-            border-start-end-radius: var-get($theme, 'date-range-border-radius');
-            border-end-end-radius: var-get($theme, 'date-range-border-radius');
-            border-start-start-radius: var-get($theme, 'date-border-radius');
-            border-end-start-radius: var-get($theme, 'date-border-radius');
-
+        &[part~='selected'] {
             &:hover {
-                color: var-get($theme, 'date-selected-hover-foreground');
-                background: var-get($theme, 'date-selected-hover-background');
-            }
-
-            &:focus {
-                color: var-get($theme, 'date-selected-hover-foreground');
-                background: var-get($theme, 'date-selected-hover-background');
+                background: var-get($theme, 'date-selected-range-hover-background');
             }
 
-            &:hover,
             &:focus {
-                border-inline-start-color: transparent;
+                background: var-get($theme, 'date-selected-range-focus-background');
             }
         }
 
-        &[part~='selected'] {
+        &[part~='selected']:not([part~='disabled'], [part~='preview']) {
             color: var-get($theme, 'date-selected-range-foreground');
 
             &:hover {
                 color: var-get($theme, 'date-selected-range-hover-foreground');
-                background: var-get($theme, 'date-selected-range-hover-background');
             }
 
             &:focus {
                 color: var-get($theme, 'date-selected-range-focus-foreground');
-                background: var-get($theme, 'date-selected-range-focus-background');
             }
         }
 
-        &[part~='selected'][part~='current']:not([part~='inactive']) {
-            color: var-get($theme, 'date-selected-current-foreground');
+        &[part~='preview'] {
+            background: transparent !important;
 
-            &:focus {
-                color: var-get($theme, 'date-selected-current-focus-foreground');
+            &::after {
+                background: transparent;
             }
+        }
+    }
 
-            &:hover {
-                color: var-get($theme, 'date-selected-current-hover-foreground');
+    // SPECIAL
+    &[part~='special'] {
+        &::after {
+            content: '';
+            position: absolute;
+            z-index: -1;
+            border: $border-size solid transparent;
+            width: var-get($theme, 'inner-size');
+            height: var-get($theme, 'inner-size');
+        }
+    }
+
+    &[part~='special']:not([part~='selected'], [part~='current']) {
+        color: var-get($theme, 'date-special-foreground');
+
+        &::after {
+            background: var-get($theme, 'date-special-background');
+            border-color: var-get($theme, 'date-special-border-color')
+        }
+
+        &:hover {
+            color: var-get($theme, 'date-special-hover-foreground');
+
+            &::after {
+                background: var-get($theme, 'date-special-hover-background');
+                border-color: var-get($theme, 'date-special-hover-border-color')
             }
         }
 
-        &[part~='selected'][part~='current'] {
-            color: var-get($theme, 'date-selected-foreground');
+        &:focus {
+            color: var-get($theme, 'date-special-focus-foreground');
+
+            &::after {
+                background: var-get($theme, 'date-special-focus-background');
+                border-color: var-get($theme, 'date-special-focus-border-color')
+            }
         }
+    }
 
-        &[part~='preview'] {
-            background: transparent !important;
+    &[part~='special'][part~='selected']:not([part~='current']) {
+        color: var-get($theme, 'date-selected-special-foreground');
+
+        &::after {
+            background: var-get($theme, 'date-selected-special-background');
+            border-color: var-get($theme, 'date-selected-special-border-color');
+        }
+
+        &:hover {
+            color: var-get($theme, 'date-selected-special-hover-foreground');
 
             &::after {
-                background: transparent;
+                background: var-get($theme, 'date-selected-special-hover-background');
+                border-color: var-get($theme, 'date-selected-special-hover-border-color');
+            }
+        }
+
+        &:focus {
+            color: var-get($theme, 'date-selected-special-focus-foreground');
+
+            &::after {
+                background: var-get($theme, 'date-selected-special-focus-background');
+                border-color: var-get($theme, 'date-selected-special-focus-border-color');
             }
         }
     }
 
+    // CURRENT
     &[part~='current'] {
-        position: relative;
-        overflow: hidden;
         color: var-get($theme, 'date-current-foreground');
 
         &::before {
@@ -240,16 +308,61 @@ $row-gap: rem(6px);
             z-index: -1;
             width: var-get($theme, 'inner-size');
             height: var-get($theme, 'inner-size');
-            border-radius: 50%;
             background: var-get($theme, 'date-current-background');
-            border-color: var-get($theme, 'date-current-border-color');
+            border: 1px solid var-get($theme, 'date-current-border-color');
+            box-sizing: border-box;
+        }
+    }
+
+    &[part~='current']:not([part~='preview'], [part~='first'], [part~='last']) {
+        &:hover {
+            &::before {
+                border-color: var-get($theme, 'date-current-hover-border-color');
+            }
+        }
+
+        &:focus {
+            &::before {
+                border-color: var-get($theme, 'date-current-focus-border-color');
+            }
+        }
+    }
+
+    &[part~='current'][part~='selected']:not([part~='first'][part~='last'], [part~='first'], [part~='last']) {
+        &::before {
+            border-color: var-get($theme, 'date-selected-current-border-color');
+            background: var-get($theme, 'date-selected-current-background');
+        }
+    }
+
+    &[part~='current'][part~='selected']:not([part~='preview'], [part~='first'], [part~='last']) {
+        &:hover {
+            &::before {
+                border-color: var-get($theme, 'date-selected-current-hover-border-color');
+                background: var-get($theme, 'date-selected-current-hover-background');
+            }
+        }
+
+        &:focus {
+            &::before {
+                border-color: var-get($theme, 'date-selected-current-focus-border-color');
+                background: var-get($theme, 'date-selected-current-focus-background');
+            }
         }
+    }
+
+    &[part~='current']:not([part~='selected'], [part~='special']) {
+        position: relative;
+        overflow: hidden;
+        color: var-get($theme, 'date-current-foreground');
+    }
 
+    &[part~='current']:not([part~='selected'], [part~='special'], [part~='preview']) {
         &:hover {
             color: var-get($theme, 'date-current-hover-foreground');
 
             &::before {
-                background: var-get($theme, 'date-current-background');
+                background: var-get($theme, 'date-current-hover-background');
                 border-color: var-get($theme, 'date-current-hover-border-color');
             }
         }
@@ -258,153 +371,196 @@ $row-gap: rem(6px);
             color: var-get($theme, 'date-current-focus-foreground');
 
             &::before {
-                background: var-get($theme, 'date-current-background');
+                background: var-get($theme, 'date-current-focus-background');
                 border-color: var-get($theme, 'date-current-focus-border-color');
             }
         }
     }
 
-    &[part~='special'] {
-        color: var-get($theme, 'date-special-foreground');
-        background: var-get($theme, 'date-special-background');
+    &[part~='current'][part~='selected']:not([part~='special'], [part~='preview'], [part~='first'][part~='last']) {
+        color: var-get($theme, 'date-selected-current-foreground');
+    }
+
+    // CURRENT + SPECIAL
+    &[part~='current'][part~='special'] {
+        &::after {
+            width: calc(var-get($theme, 'inner-size') - #{rem(4px)});
+            height: calc(var-get($theme, 'inner-size') - #{rem(4px)});
+            border-color: var-get($theme, 'date-current-foreground');
+        }
+    }
+
+    &[part~='current'][part~='special']:not([part~='selected']) {
+        color: var-get($theme, 'date-current-foreground');
 
         &::after {
-            border-color: var-get($theme, 'date-special-border-color')
+            background: var-get($theme, 'date-current-background');
         }
+    }
 
+    &[part~='current'][part~='special']:not([part~='selected'], [part~='preview'], [part~='first'][part~='last']) {
         &:hover {
-            color: var-get($theme, 'date-hover-foreground');
-            background: var-get($theme, 'date-hover-background');
+            color: var-get($theme, 'date-current-hover-foreground');
 
             &::after {
-                border-color: var-get($theme, 'date-special-hover-border-color')
+                background: var-get($theme, 'date-current-hover-background');
+                border-color: var-get($theme, 'date-current-hover-foreground');
             }
         }
 
         &:focus {
-            color: var-get($theme, 'date-focus-foreground');
-            background: var-get($theme, 'date-focus-background');
+            color: var-get($theme, 'date-current-focus-foreground');
 
             &::after {
-                border-color: var-get($theme, 'date-special-hover-border-color')
+                background: var-get($theme, 'date-current-focus-background');
+                border-color: var-get($theme, 'date-current-focus-foreground');
             }
         }
     }
 
-    &[part~='selected'][part~='special']:not([part~='current']) {
+    &[part~='current'][part~='special'][part~='selected']:not([part~='first'][part~='last'], [part~='preview']) {
+        color: var-get($theme, 'date-selected-current-foreground');
+
         &::after {
-            border-color: var-get($theme, 'date-selected-special-border-color');
+            background: var-get($theme, 'date-selected-current-background');
+            border-color: var-get($theme, 'date-selected-current-foreground');
         }
 
         &:hover {
+            color: var-get($theme, 'date-selected-current-hover-foreground');
+
             &::after {
-                border-color: var-get($theme, 'date-selected-special-hover-border-color');
+                background: var-get($theme, 'date-selected-current-hover-background');
+                border-color: var-get($theme, 'date-selected-current-hover-foreground');
             }
         }
 
         &:focus {
+            color: var-get($theme, 'date-selected-current-focus-foreground');
+
             &::after {
-                border-color: var-get($theme, 'date-selected-special-focus-border-color');
+                background: var-get($theme, 'date-selected-current-focus-background');
+                border-color: var-get($theme, 'date-selected-current-focus-foreground');
             }
         }
     }
 
-    &[part~='current'][part~='special'] {
-        color: var-get($theme, 'date-current-foreground');
+    &[part~='current'][part~='special'][part~='range']:not([part~='preview'], [part~='first'][part~='last']),
+    &[part~='current'][part~='range']:not([part~='preview'], [part~='first'][part~='last']) {
+        color: var-get($theme, 'date-selected-current-range-foreground');
 
+        &::before,
         &::after {
-            border-color: var-get($theme, 'date-current-foreground');
-            width: sizable(rem(22px), rem(24px), rem(28px));
-            height: sizable(rem(22px), rem(24px), rem(28px));
+            background: var-get($theme, 'date-selected-current-range-background');
         }
-    }
 
-    &[part~='special'][part~='inactive']:not([part~='range']),
-    &[part~='current'][part~='inactive']:not([part~='range']) {
-        color: var-get($theme, 'inactive-color');
-    }
-
-    &[part~='special'][part~='inactive'],
-    &[part~='current'][part~='inactive'] {
         &::before {
-            background: transparent;
+            border-color: var-get($theme, 'date-selected-current-border-color');
         }
 
-        &::after {
-            border-color: transparent;
-        }
-    }
+        &:hover {
+            color: var-get($theme, 'date-selected-current-range-hover-foreground');
 
-    &[part~='inactive'][part~='selected']:not([part~='range']) {
-        background: transparent;
-    }
-}
+            &::before,
+            &::after {
+                background: var-get($theme, 'date-selected-current-range-hover-background');
+            }
 
-[part~='date-inner'][part~='single'] {
-    &[part~='weekend']:not([part~='inactive']) {
-        &:hover {
-            color: var-get($theme, 'date-hover-foreground');
+            &::before {
+                border-color: var-get($theme, 'date-selected-current-hover-border-color');
+            }
         }
 
         &:focus {
-            color: var-get($theme, 'date-focus-foreground');
+            color: var-get($theme, 'date-selected-current-range-focus-foreground');
+
+            &::before,
+            &::after {
+                background: var-get($theme, 'date-selected-current-range-focus-background');
+            }
+
+            &::before {
+                border-color: var-get($theme, 'date-selected-current-focus-border-color');
+            }
         }
     }
 
-    &[part~='selected'] {
-        color: var-get($theme, 'date-selected-foreground');
-        background: var-get($theme, 'date-selected-background');
-        border-color: var-get($theme, 'date-selected-border-color');
-        border-radius: 0;
+    // RANGE
+    // special + range
+    &[part~='special'][part~='range'][part~='selected']:where(:not([part~='current'], [part~='preview'])) {
+        color: var-get($theme, 'date-special-range-foreground');
 
-        &:focus {
-            color: var-get($theme, 'date-selected-focus-foreground');
-            background: var-get($theme, 'date-selected-focus-background');
-            border-color: var-get($theme, 'date-selected-focus-border-color');
+        &::after {
+            background: var-get($theme, 'date-special-range-background');
+            border-color: var-get($theme, 'date-special-range-border-color')
         }
 
         &:hover {
-            color: var-get($theme, 'date-selected-hover-foreground');
-            background: var-get($theme, 'date-selected-hover-background');
-            border-color: var-get($theme, 'date-selected-hover-border-color');
+            color: var-get($theme, 'date-special-range-hover-foreground');
+
+            &::after {
+                background: var-get($theme, 'date-special-range-hover-background');
+                border-color: var-get($theme, 'date-special-range-hover-border-color')
+            }
         }
 
-        &[part~='first'][part~='last'] {
-            border-color: var-get($theme, 'date-selected-border-color');
+        &:focus {
+            color: var-get($theme, 'date-special-range-focus-foreground');
+
+            &::after {
+                background: var-get($theme, 'date-special-range-focus-background');
+                border-color: var-get($theme, 'date-special-range-focus-border-color')
+            }
         }
     }
 
-    &[part~='selected'][part~='current'] {
-        color: var-get($theme, 'date-selected-current-foreground');
+    &[part~='special'][part~='preview']:not([part~='current']),
+    &[part~='special'][part~='first'][part~='last']:not([part~='current']),
+    &[part~='special'][part~='selected'][part~='preview']:not([part~='current']) {
+        color: var-get($theme, 'date-special-foreground');
 
-        &:focus {
-            color: var-get($theme, 'date-selected-current-focus-foreground');
+        &::after {
+            background: var-get($theme, 'date-special-background');
+            border-color: var-get($theme, 'date-special-border-color')
         }
 
         &:hover {
-            color: var-get($theme, 'date-selected-current-hover-foreground');
+            color: var-get($theme, 'date-special-foreground');
+
+            &::after {
+                background: var-get($theme, 'date-special-background');
+                border-color: var-get($theme, 'date-special-border-color')
+            }
+        }
+
+        &:focus {
+            color: var-get($theme, 'date-special-foreground');
+
+            &::after {
+                background: var-get($theme, 'date-special-background');
+                border-color: var-get($theme, 'date-special-border-color')
+            }
         }
     }
 }
 
+[part~='date'][part~='range'] + [part~='date'][part~='range'][part~='last'] {
+    &::after {
+        inset-inline-end: $fake-bg-position;
+    }
+}
+
 [part~='date'][part~='range'] {
     background: var-get($theme, 'date-selected-range-background');
     border-block-color: var-get($theme, 'date-range-border-color');
 
     &[part~='first'],
     &[part~='last'] {
-        background: transparent;
-
         &::before,
         &::after {
             height: var-get($theme, 'size');
         }
 
-        &::after {
-            background: var-get($theme, 'date-selected-range-background');
-            border-block: $border-size solid var-get($theme, 'date-selected-range-background');
-        }
-
         &::before {
             content: '';
             position: absolute;
@@ -413,9 +569,26 @@ $row-gap: rem(6px);
             z-index: 3;
             pointer-events: none;
         }
+
+        &::after {
+            width: $fake-bg-size;
+            background: var-get($theme, 'date-selected-range-background');
+            border-block: $border-size solid var-get($theme, 'date-range-border-color');
+        }
+    }
+
+    &[part~='first']:not([part~='disabled']),
+    &[part~='last']:not([part~='disabled']) {
+        background: transparent;
     }
 
     &[part~='first'] {
+        &::after {
+            inset-inline-start: $fake-bg-position;
+            border-start-start-radius: var-get($theme, 'date-range-border-radius');
+            border-end-start-radius: var-get($theme, 'date-range-border-radius');
+        }
+
         &::before {
             inset-inline-end: initial;
             border-inline: $border-size solid;
@@ -429,6 +602,12 @@ $row-gap: rem(6px);
     }
 
     &[part~='last'] {
+        &::after {
+            inset-inline-end: $fake-bg-position;
+            border-start-end-radius: var-get($theme, 'date-range-border-radius');
+            border-end-end-radius: var-get($theme, 'date-range-border-radius');
+        }
+
         &::before {
             inset-inline-start: initial;
             border-inline: $border-size solid;
@@ -441,13 +620,29 @@ $row-gap: rem(6px);
         }
     }
 
+    &[part~='preview'][part~='first'] {
+        &::before {
+            border-inline-start-color: var-get($theme, 'date-range-preview-border-color');
+        }
+    }
+
+    &[part~='preview'][part~='last'] {
+        &::before {
+            border-inline-end-color: var-get($theme, 'date-range-preview-border-color');
+        }
+    }
+
     &[part~='preview'][part~='first'],
     &[part~='preview'][part~='last'] {
         border-block-color: transparent;
 
+        &::before {
+            border-block-color: var-get($theme, 'date-range-preview-border-color');
+        }
+
         &::after {
             background: transparent !important;
-            border-block-color: var-get($theme, 'date-range-border-color');
+            border-block-color: var-get($theme, 'date-range-preview-border-color');
         }
     }
 
@@ -466,9 +661,17 @@ $row-gap: rem(6px);
         }
     }
 
+    &[part~='selected'][part~='preview'][part~='first'],
+    &[part~='selected'][part~='preview'][part~='last'] {
+        &::after {
+            border-block-color: var-get($theme, 'date-range-preview-border-color');
+        }
+    }
+
+
     &[part~='preview'] {
         background: transparent;
-        border-block-color: var-get($theme, 'date-range-border-color');
+        border-block-color: var-get($theme, 'date-range-preview-border-color');
     }
 
     &[part~='first'][part~='disabled'],
@@ -479,3 +682,17 @@ $row-gap: rem(6px);
         }
     }
 }
+
+[part~='date-inner'][part~='inactive'][part~='range']:not([part~='preview']) {
+    color: var-get($theme, 'date-selected-range-foreground');
+
+    &:hover {
+        color: var-get($theme, 'date-selected-range-hover-foreground');
+        background: var-get($theme, 'date-selected-range-hover-background');
+    }
+
+    &:focus {
+        color: var-get($theme, 'date-selected-range-focus-foreground');
+        background: var-get($theme, 'date-selected-range-focus-background');
+    }
+}
diff --git a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss
index aa8de74e2..62302a6f3 100644
--- a/src/components/calendar/themes/shared/indigo/days-view.indigo.scss
+++ b/src/components/calendar/themes/shared/indigo/days-view.indigo.scss
@@ -1,8 +1,13 @@
 @use 'styles/utilities' as *;
 @use '../../light/themes' as *;
 
+// In indigo theme the current date background has higher specificity then the special date background
+// so when user change the special date background the current date background will be applied when both states are set
+// However the text color and the inner circle border color of the special date will be visible to make the special date recognizable
+
 $theme: $indigo;
 $border-width: rem(1px);
+$inner-border-width: rem(2px);
 $week-number-radius: var-get($theme, 'week-number-border-radius');
 
 [part~='label-inner'] {
@@ -13,14 +18,6 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
     height: var-get($theme, 'size');
 }
 
-[part~='weekend'] {
-    color: var-get($theme, 'weekend-color');
-}
-
-[part~='inactive'] {
-    color: var-get($theme, 'inactive-color');
-}
-
 [part='week-number-inner first'] {
     border-top-left-radius: $week-number-radius;
     border-top-right-radius: $week-number-radius;
@@ -58,22 +55,39 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
 
     &[part~='range'] {
         background: var-get($theme, 'date-selected-range-background');
+        border-block: $border-width solid var-get($theme, 'date-range-border-color');
     }
 
     &[part~='range'][part~='first'],
     &[part~='range'][part~='last'] {
         background: transparent;
+        border-block: transparent;
 
         &::before {
             height: var-get($theme, 'size');
             width: var-get($theme, 'size');
             background: var-get($theme, 'content-background');
-            border-radius: var-get($theme, 'date-border-radius');
+            border-radius: var-get($theme, 'date-range-border-radius');
         }
 
         &::after {
             height: var-get($theme, 'size');
             background: var-get($theme, 'date-selected-range-background');
+            border-block: $border-width solid var-get($theme, 'date-range-border-color');
+        }
+    }
+
+    &[part~='range'][part~='first'][part~='special'],
+    &[part~='range'][part~='last'][part~='special'] {
+        &::before {
+            border-radius: var-get($theme, 'date-special-border-radius');
+        }
+    }
+
+    &[part~='range'][part~='first'][part~='current'],
+    &[part~='range'][part~='last'][part~='current'] {
+        &::before {
+            border-radius: var-get($theme, 'date-current-border-radius');
         }
     }
 
@@ -99,121 +113,193 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
 }
 
 [part~='date-inner'] {
-    border: rem(2px) solid var-get($theme, 'date-border-color');
-    border-radius: var-get($theme, 'date-border-radius');
     width: var-get($theme, 'size');
     height: var-get($theme, 'size');
+    border: $inner-border-width solid var-get($theme, 'date-border-color');
+    border-radius: var-get($theme, 'date-border-radius');
+
+    &:hover {
+        border-color: var-get($theme, 'date-hover-border-color');
+        background: var-get($theme, 'date-hover-background');
+    }
+
+    &:focus {
+        border-color: var-get($theme, 'date-focus-border-color');
+    }
+
+    &[part~='inactive']:not([part~='selected'][part~='range'], [part~='disabled']) {
+        color: var-get($theme, 'inactive-color');
+
+        &:hover {
+            color: var-get($theme, 'date-hover-foreground');
+        }
+
+        &:focus {
+            color:  var-get($theme, 'date-focus-foreground');
+        }
+    }
 
-    &[part~='disabled'] {
+    &[part~='disabled']:not([part~='selected'],[part~='special'],[part~='current']) {
         color: var-get($theme, 'date-disabled-foreground');
     }
 
+    &[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current'], [part~='preview'], [part~='first'], [part~='last']) {
+        color: var-get($theme, 'date-disabled-range-foreground');
+    }
+
+    &[part~='first'],
+    &[part~='last'] {
+        border-radius: var-get($theme, 'date-range-border-radius');
+
+        &::after {
+            border-radius: var-get($theme, 'date-range-border-radius');
+        }
+    }
+
+    &[part~='special'] {
+        border-radius: var-get($theme, 'date-special-border-radius');
+
+        &::after {
+            border-radius: calc(var-get($theme, 'date-special-border-radius') - $border-width);
+        }
+    }
+
+    &[part~='current'] {
+        border-radius: var-get($theme, 'date-current-border-radius');
+    }
+
+    &[part~='special'][part~='current'] {
+        border-radius: var-get($theme, 'date-current-border-radius');
+
+        &::after {
+            border-radius: var-get($theme, 'date-current-border-radius');
+        }
+    }
+}
+
+[part~='date-inner']:not([part~='inactive']) {
     &:hover {
         color: var-get($theme, 'date-hover-foreground');
-        background: var-get($theme, 'date-hover-background');
-        border-color: var-get($theme, 'date-hover-border-color');
     }
 
     &:focus {
         color: var-get($theme, 'date-focus-foreground');
         background: var-get($theme, 'date-focus-background');
-        border-color: var-get($theme, 'date-focus-border-color');
     }
 
-    &[part~='current'] {
-        color: var-get($theme, 'date-current-foreground');
-        background: var-get($theme, 'date-current-background');
-        border-color: var-get($theme, 'date-current-border-color');
+    &[part~='weekend']:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='selected'], [part~='disabled']) {
+        color: var-get($theme, 'weekend-color');
 
         &:hover {
-            color: var-get($theme, 'date-current-hover-foreground');
-            background: var-get($theme, 'date-current-hover-background');
-            border-color: var-get($theme, 'date-current-hover-border-color');
+            color: var-get($theme, 'date-hover-foreground');
         }
 
         &:focus {
-            color: var-get($theme, 'date-current-focus-foreground');
-            background: var-get($theme, 'date-current-focus-background');
-            border-color: var-get($theme, 'date-current-focus-border-color');
+            color:  var-get($theme, 'date-focus-foreground');
         }
     }
 
-    &[part~='special'] {
-        color: var-get($theme, 'date-special-foreground');
-        background: var-get($theme, 'date-special-background');
-        border-color:  var-get($theme, 'date-special-border-color');
-        font-weight: 700;
+    &[part~='selected'] {
+        color: var-get($theme, 'date-selected-foreground');
+        background: var-get($theme, 'date-selected-background');
+        border-color: var-get($theme, 'date-selected-border-color');
 
         &:hover {
-            color: var-get($theme, 'date-special-hover-foreground');
-            background: var-get($theme, 'date-special-hover-background');
-            border-color: var-get($theme, 'date-special-hover-border-color');
+            color: var-get($theme, 'date-selected-hover-foreground');
+            background: var-get($theme, 'date-selected-hover-background');
+            border-color: var-get($theme, 'date-selected-hover-border-color');
         }
 
         &:focus {
-            color: var-get($theme, 'date-special-focus-foreground');
-            background: var-get($theme, 'date-special-focus-background');
-            border-color: var-get($theme, 'date-special-hover-border-color');
+            color: var-get($theme, 'date-selected-focus-foreground');
+            background: var-get($theme, 'date-selected-focus-background');
+            border-color: var-get($theme, 'date-selected-focus-border-color');
         }
+    }
 
-        &::after {
-            content: '';
-            position: absolute;
-            z-index: 0;
-            border: rem(2px) solid transparent;
-            border-radius: inherit;
-            width: var-get($theme, 'inner-size');
-            height: var-get($theme, 'inner-size');
-            box-sizing: border-box;
+    &[part~='selected'][part~='range'] {
+        color: var-get($theme, 'date-selected-range-foreground');
+
+        &:hover {
+            color: var-get($theme, 'date-selected-range-hover-foreground');
+            background: var-get($theme, 'date-selected-range-hover-background');
         }
 
-        &[part~='range']:not([part~='preview']) {
-            color: var-get($theme, 'date-special-foreground');
-            background: var-get($theme, 'date-special-background');
+        &:focus {
+            color: var-get($theme, 'date-selected-range-focus-foreground');
+            background: var-get($theme, 'date-selected-range-focus-background');
+        }
+    }
 
-            &:hover {
-                color: var-get($theme, 'date-special-hover-foreground');
-                background: var-get($theme, 'date-special-hover-background');
-            }
+    &[part~='selected'][part~='current'] {
+        color: var-get($theme, 'date-selected-current-foreground');
+        background: var-get($theme, 'date-selected-current-background');
+        border-color: var-get($theme, 'date-selected-current-border-color');
 
-            &:focus {
-                color: var-get($theme, 'date-special-focus-foreground');
-                background: var-get($theme, 'date-special-focus-background');
-            }
+        &:hover {
+            color: var-get($theme, 'date-selected-current-hover-foreground');
+            background: var-get($theme, 'date-selected-current-hover-background');
+            border-color: var-get($theme, 'date-selected-current-hover-border-color');
         }
 
-        &[part~='range'][part~='first']:not([part~='preview']),
-        &[part~='range'][part~='last']:not([part~='preview']),
-        {
-            color: var-get($theme, 'date-selected-foreground');
-            background: var-get($theme, 'date-selected-background');
+        &:focus {
+            color: var-get($theme, 'date-selected-current-focus-foreground');
+            background: var-get($theme, 'date-selected-current-focus-background');
+            border-color: var-get($theme, 'date-selected-current-focus-border-color');
+        }
 
-            &:hover {
-                background: var-get($theme, 'date-selected-hover-background');
-            }
+        &::after {
+            border-color: transparent;
+        }
+    }
 
-            &:focus {
-                background: var-get($theme, 'date-selected-focus-background');
-            }
+    &[part~='selected'][part~='special'] {
+        color: var-get($theme, 'date-selected-special-foreground');
+        background: var-get($theme, 'date-selected-special-background');
 
+        &:hover {
+            color: var-get($theme, 'date-selected-special-hover-foreground');
+            background: var-get($theme, 'date-selected-special-hover-background');
         }
 
-        &[part~='range'][part~='first']:not([part~='current']),
-        &[part~='range'][part~='last']:not([part~='current']), {
-            border-color: transparent;
+        &:focus {
+            color: var-get($theme, 'date-selected-special-focus-foreground');
+            background: var-get($theme, 'date-selected-special-focus-background');
         }
+    }
 
-        &[part~='first'][part~='selected'],
-        &[part~='last'][part~='selected'],
-        &[part~='selected']:not([part~='range']) {
-            &::after {
-                width: calc(var-get($theme, 'inner-size') - #{rem(4px)});
-                height: calc(var-get($theme, 'inner-size') - #{rem(4px)});
-            }
+    &[part~='selected'][part~='special']:not([part~='current']) {
+        border-color: var-get($theme, 'date-selected-border-color');
+
+        &:hover {
+            border-color: var-get($theme, 'date-selected-hover-border-color');
+        }
+
+        &:focus {
+            border-color: var-get($theme, 'date-selected-focus-border-color');
         }
     }
 
-    &[part~='selected'] {
+    &[part~='selected'][part~='current'][part~='range'] {
+        color: var-get($theme, 'date-selected-current-range-foreground');
+        background: var-get($theme, 'date-selected-current-range-background');
+        border-color: var-get($theme, 'date-selected-current-border-color');
+
+        &:hover {
+            color: var-get($theme, 'date-selected-current-range-hover-foreground');
+            background: var-get($theme, 'date-selected-current-range-hover-background');
+            border-color: var-get($theme, 'date-selected-current-hover-border-color');
+        }
+
+        &:focus {
+            color: var-get($theme, 'date-selected-current-range-focus-foreground');
+            background: var-get($theme, 'date-selected-current-range-focus-background');
+            border-color: var-get($theme, 'date-selected-current-focus-border-color');
+        }
+    }
+
+    &[part~='selected'][part~='first']:not([part~='special'], [part~='current']),
+    &[part~='selected'][part~='last']:not([part~='special'], [part~='current']) {
         color: var-get($theme, 'date-selected-foreground');
         background: var-get($theme, 'date-selected-background');
 
@@ -226,266 +312,259 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
             color: var-get($theme, 'date-selected-focus-foreground');
             background: var-get($theme, 'date-selected-focus-background');
         }
+    }
 
-        &[part~='current'] {
-            color: var-get($theme, 'date-selected-current-foreground');
-            background: var-get($theme, 'date-selected-current-background');
-            border-color: var-get($theme, 'date-current-border-color');
-
-            &:hover {
-                color: var-get($theme, 'date-selected-current-hover-foreground');
-                background: var-get($theme, 'date-selected-current-hover-background');
-                border-color: var-get($theme, 'date-current-hover-border-color');
-            }
+    &[part~='selected'][part~='current'][part~='range'][part~='first'],
+    &[part~='selected'][part~='current'][part~='range'][part~='last'] {
+        color: var-get($theme, 'date-selected-current-foreground');
+        background: var-get($theme, 'date-selected-current-background');
+        border-color: var-get($theme, 'date-selected-current-border-color');
 
-            &:focus {
-                color: var-get($theme, 'date-selected-current-focus-foreground');
-                background: var-get($theme, 'date-selected-current-focus-background');
-                border-color: var-get($theme, 'date-current-focus-border-color');
-            }
+        &::after {
+            border-color: transparent;
+        }
 
-            &::after {
-                border-color: transparent;
-            }
+        &:hover {
+            color: var-get($theme, 'date-selected-current-hover-foreground');
+            background: var-get($theme, 'date-selected-current-hover-background');
+            border-color: var-get($theme, 'date-selected-current-hover-border-color');
         }
 
-        &[part~='current'][part~='range'] {
-            color: var-get($theme, 'date-selected-current-range-foreground');
-            background: var-get($theme, 'date-selected-current-range-background');
-            border-color: var-get($theme, 'date-current-border-color');
+        &:focus {
+            color: var-get($theme, 'date-selected-current-focus-foreground');
+            background: var-get($theme, 'date-selected-current-focus-background');
+            border-color: var-get($theme, 'date-selected-current-focus-border-color');
+        }
+    }
 
-            &:hover {
-                background: var-get($theme, 'date-selected-current-range-hover-background');
-                color: var-get($theme, 'date-current-hover-foreground');
-                border-color: var-get($theme, 'date-current-hover-border-color');
-            }
+    &[part~='selected'][part~='special'][part~='range'][part~='first'],
+    &[part~='selected'][part~='special'][part~='range'][part~='last'] {
+        &::after {
+            border-color: var-get($theme, 'date-selected-special-border-color');
+        }
 
-            &:focus {
-                background: var-get($theme, 'date-selected-current-range-focus-background');
-                color: var-get($theme, 'date-current-focus-foreground');
-                border-color: var-get($theme, 'date-current-focus-border-color');
+        &:hover {
+            /* stylelint-disable max-nesting-depth */
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-hover-border-color');
             }
+            /* stylelint-enable max-nesting-depth */
+        }
 
+        &:focus {
+            /* stylelint-disable max-nesting-depth */
             &::after {
-                border-color: transparent;
+                border-color: var-get($theme, 'date-selected-special-focus-border-color');
             }
+            /* stylelint-enable max-nesting-depth */
         }
+    }
 
-        &[part~='current'][part~='range'][part~='special'] {
-            color: var-get($theme, 'date-special-foreground');
-            background: var-get($theme, 'date-current-background');
+    &[part~='selected'][part~='current'][part~='special'] {
+        color: var-get($theme, 'date-selected-special-foreground');
+        background: var-get($theme, 'date-selected-current-background');
+        border-color: var-get($theme, 'date-selected-current-border-color');
 
-            &:hover {
-                color: var-get($theme, 'date-special-hover-foreground');
-                background: var-get($theme, 'date-selected-current-range-hover-background');
-
-                /* stylelint-disable max-nesting-depth */
-                &::after {
-                    border-color: var-get($theme, 'date-special-hover-border-color');
-                }
-                /* stylelint-enable */
-            }
+        &:hover {
+            color: var-get($theme, 'date-selected-special-hover-foreground');
+            background: var-get($theme, 'date-selected-current-hover-background');
+            border-color: var-get($theme, 'date-selected-current-hover-border-color');
+        }
 
-            &:focus {
-                color: var-get($theme, 'date-special-focus-foreground');
-                background: var-get($theme, 'date-selected-current-range-focus-background');
-
-                /* stylelint-disable max-nesting-depth */
-                &::after {
-                    border-color: var-get($theme, 'date-special-hover-border-color');
-                }
-                /* stylelint-enable */
-            }
+        &:focus {
+            color: var-get($theme, 'date-selected-special-focus-foreground');
+            background: var-get($theme, 'date-selected-current-focus-background');
+            border-color: var-get($theme, 'date-selected-current-focus-border-color');
+        }
+    }
+
+    &[part~='selected'][part~='current'][part~='special'][part~='range'] {
+        color: var-get($theme, 'date-special-range-foreground');
+        background: var-get($theme, 'date-selected-current-range-background');
+        border-color: var-get($theme, 'date-selected-current-border-color');
 
+        &:hover {
+            color: var-get($theme, 'date-special-range-hover-foreground');
+            background: var-get($theme, 'date-selected-current-range-hover-background');
+            border-color: var-get($theme, 'date-selected-current-hover-border-color');
+
+            /* stylelint-disable max-nesting-depth */
             &::after {
-                border-color: var-get($theme, 'date-special-border-color');
+                border-color: var-get($theme, 'date-special-range-hover-border-color');
             }
+            /* stylelint-enable */
         }
 
-        &[part~='current'][part~='range'][part~='first'],
-        &[part~='current'][part~='range'][part~='last'] {
-            color: var-get($theme, 'date-selected-foreground');
-            background: var-get($theme, 'date-selected-background');
+        &:focus {
+            color: var-get($theme, 'date-special-range-focus-foreground');
+            background: var-get($theme, 'date-selected-current-range-focus-background');
+            border-color: var-get($theme, 'date-selected-current-focus-border-color');
 
+            /* stylelint-disable max-nesting-depth */
             &::after {
-                border-color: transparent;
+                border-color: var-get($theme, 'date-special-range-hover-border-color');
             }
+            /* stylelint-enable */
+        }
 
-            &:hover {
-                color: var-get($theme, 'date-selected-hover-foreground');
-                background: var-get($theme, 'date-selected-hover-background');
-                border-color: var-get($theme, 'date-current-hover-border-color');
-            }
+        &::after {
+            border-color: var-get($theme, 'date-special-range-border-color');
+        }
+    }
 
-            &:focus {
-                color: var-get($theme, 'date-selected-focus-foreground');
-                background: var-get($theme, 'date-selected-focus-background');
-                border-color: var-get($theme, 'date-current-focus-border-color');
-            }
+    &[part~='selected'][part~='current'][part~='special'][part~='range'][part~='first'],
+    &[part~='selected'][part~='current'][part~='special'][part~='range'][part~='last'] {
+        color: var-get($theme, 'date-selected-special-foreground');
+        background: var-get($theme, 'date-selected-current-background');
+        border-color: var-get($theme, 'date-selected-current-border-color');
+
+        &:hover {
+            color: var-get($theme, 'date-selected-special-hover-foreground');
+            background: var-get($theme, 'date-selected-current-hover-background');
+            border-color: var-get($theme, 'date-selected-current-hover-border-color');
         }
 
-        &[part~='current'][part~='range'][part~='special'][part~='first'],
-        &[part~='current'][part~='range'][part~='special'][part~='last'] {
-            color: var-get($theme, 'date-selected-foreground');
-            background: var-get($theme, 'date-selected-background');
+        &:focus {
+            color: var-get($theme, 'date-selected-special-focus-foreground');
+            background: var-get($theme, 'date-selected-current-focus-background');
+            border-color: var-get($theme, 'date-selected-current-focus-border-color');
+        }
+    }
 
-            &:hover {
-                color: var-get($theme, 'date-selected-hover-foreground');
-                background: var-get($theme, 'date-selected-hover-background');
-            }
+    &[part~='selected'][part~='current'][part~='special'][part~='first'],
+    &[part~='selected'][part~='current'][part~='special'][part~='last'],
+    &[part~='selected'][part~='current'][part~='special']:not([part~='range']) {
+        &::after {
+            border-color: var-get($theme, 'date-selected-special-border-color');
+        }
 
-            &:focus {
-                color: var-get($theme, 'date-selected-focus-foreground');
-                background: var-get($theme, 'date-selected-focus-background');
+        &:hover {
+            /* stylelint-disable max-nesting-depth */
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-hover-border-color');
             }
+            /* stylelint-enable max-nesting-depth */
         }
 
-        &[part~='current'][part~='special'][part~='first'],
-        &[part~='current'][part~='special'][part~='last'],
-        &[part~='current'][part~='special']:not([part~='range']) {
+        &:focus {
+            /* stylelint-disable max-nesting-depth */
             &::after {
-                border-color: var-get($theme, 'date-selected-special-border-color');
+                border-color: var-get($theme, 'date-selected-special-focus-border-color');
             }
+            /* stylelint-enable max-nesting-depth */
+        }
+    }
 
-            &:hover {
-                /* stylelint-disable max-nesting-depth */
-                &::after {
-                    border-color: var-get($theme, 'date-selected-special-hover-border-color');
-                }
-                /* stylelint-enable max-nesting-depth */
-            }
 
-            &:focus {
-                /* stylelint-disable max-nesting-depth */
-                &::after {
-                    border-color: var-get($theme, 'date-selected-special-focus-border-color');
-                }
-                /* stylelint-enable max-nesting-depth */
-            }
+    &[part~='selected'][part~='special']:not([part~='range']) {
+        &::after {
+            border-color: var-get($theme, 'date-selected-special-border-color');
         }
 
-        &[part~='range'][part~='special'][part~='first'],
-        &[part~='range'][part~='special'][part~='last'] {
+        &:hover {
+            /* stylelint-disable max-nesting-depth */
             &::after {
-                border-color: var-get($theme, 'date-selected-special-border-color');
-            }
-
-            &:hover {
-                /* stylelint-disable max-nesting-depth */
-                &::after {
-                    border-color: var-get($theme, 'date-selected-special-hover-border-color');
-                }
-                /* stylelint-enable max-nesting-depth */
+                border-color: var-get($theme, 'date-selected-special-hover-border-color');
             }
+            /* stylelint-enable max-nesting-depth */
+        }
 
-            &:focus {
-                /* stylelint-disable max-nesting-depth */
-                &::after {
-                    border-color: var-get($theme, 'date-selected-special-focus-border-color');
-                }
-                /* stylelint-enable max-nesting-depth */
+        &:focus {
+            /* stylelint-disable max-nesting-depth */
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-focus-border-color');
             }
+            /* stylelint-enable max-nesting-depth */
         }
+    }
 
-        &[part~='range'] {
-            color: var-get($theme, 'date-selected-range-foreground');
-            background: transparent;
-
-            &:hover {
-                color: var-get($theme, 'date-selected-range-hover-foreground');
-                background: var-get($theme, 'date-selected-range-hover-background');
-            }
+    &[part~='selected'][part~='special']:not([part~='range'], [part~='current']) {
+        border-color: var-get($theme, 'date-selected-border-color');
 
-            &:focus {
-                color: var-get($theme, 'date-selected-range-focus-foreground');
-                background: var-get($theme, 'date-selected-range-focus-background');
-            }
+        &:hover {
+            border-color: var-get($theme, 'date-selected-hover-border-color');
         }
 
-        &[part~='first'],
-        &[part~='last'] {
-            color: var-get($theme, 'date-selected-foreground');
-            background: var-get($theme, 'date-selected-background');
+        &:focus {
+            border-color: var-get($theme, 'date-selected-focus-border-color');
+        }
+    }
 
-            &:hover {
-                color: var-get($theme, 'date-selected-hover-foreground');
-                background: var-get($theme, 'date-selected-hover-background');
-            }
+    &[part~='special'] {
+        color: var-get($theme, 'date-special-foreground');
+        background: var-get($theme, 'date-special-background');
+        border-color:  var-get($theme, 'date-special-border-color');
+        font-weight: 700;
 
-            &:focus {
-                color: var-get($theme, 'date-selected-focus-foreground');
-                background: var-get($theme, 'date-selected-focus-background');
-            }
+        &:hover {
+            color: var-get($theme, 'date-special-hover-foreground');
+            background: var-get($theme, 'date-special-hover-background');
+            border-color: var-get($theme, 'date-special-hover-border-color');
         }
 
-        &[part~='special'] {
-            color: var-get($theme, 'date-selected-foreground');
-            background: var-get($theme, 'date-selected-background');
-
-            &:hover {
-                color: var-get($theme, 'date-selected-hover-foreground');
-                background: var-get($theme, 'date-selected-hover-background');
-            }
+        &:focus {
+            color: var-get($theme, 'date-special-focus-foreground');
+            background: var-get($theme, 'date-special-focus-background');
+            border-color: var-get($theme, 'date-special-focus-border-color');
+        }
 
-            &:focus {
-                color: var-get($theme, 'date-selected-focus-foreground');
-                background: var-get($theme, 'date-selected-focus-background');
-            }
+        &::after {
+            content: '';
+            position: absolute;
+            z-index: -1;
+            border: rem(2px) solid transparent;
+            width: var-get($theme, 'inner-size');
+            height: var-get($theme, 'inner-size');
+            box-sizing: border-box;
         }
 
-        &[part~='special']:not([part~='range']) {
-            &::after {
-                border-color: var-get($theme, 'date-selected-special-border-color');
-            }
+        &[part~='range']:not([part~='preview'], [part~='current'], [part~='first'], [part~='last'], [part~='first'][part~='last']) {
+            color: var-get($theme, 'date-special-range-foreground');
+            background: var-get($theme, 'date-special-range-background');
+            border-color: var-get($theme, 'date-special-range-border-color');
 
             &:hover {
-                /* stylelint-disable max-nesting-depth */
-                &::after {
-                    border-color: var-get($theme, 'date-selected-special-hover-border-color');
-                }
-                /* stylelint-enable max-nesting-depth */
+                color: var-get($theme, 'date-special-range-hover-foreground');
+                background: var-get($theme, 'date-special-range-hover-background');
+                border-color: var-get($theme, 'date-special-range-hover-border-color');
             }
 
             &:focus {
-                /* stylelint-disable max-nesting-depth */
-                &::after {
-                    border-color: var-get($theme, 'date-selected-special-focus-border-color');
-                }
-                /* stylelint-enable max-nesting-depth */
+                color: var-get($theme, 'date-special-range-focus-foreground');
+                background: var-get($theme, 'date-special-range-focus-background');
+                border-color: var-get($theme, 'date-special-range-focus-border-color');
             }
         }
-    }
-
-    &[part~='disabled'][part~='range']:not([part~='preview']) {
-        color: var-get($theme, 'date-disabled-range-foreground');
-    }
-
-    &[part~='disabled'][part~='first'],
-    &[part~='disabled'][part~='last'] {
-        color: var-get($theme, 'date-selected-foreground');
 
-        &:hover {
-            color: var-get($theme, 'date-selected-hover-foreground');
+        &[part~='first'][part~='selected'],
+        &[part~='last'][part~='selected'],
+        &[part~='selected']:not([part~='range']) {
+            &::after {
+                width: calc(var-get($theme, 'inner-size') - #{rem(4px)});
+                height: calc(var-get($theme, 'inner-size') - #{rem(4px)});
+            }
         }
-
-        &:focus {
-            color: var-get($theme, 'date-selected-focus-foreground');
-       }
     }
 
-    &[part~='selected'][part~='special']:not([part~='current'], [part~='range']) {
-        border-color: var-get($theme, 'date-selected-border-color');
+    &[part~='current'] {
+        color: var-get($theme, 'date-current-foreground');
+        background: var-get($theme, 'date-current-background');
+        border-color: var-get($theme, 'date-current-border-color');
 
         &:hover {
-            border-color: var-get($theme, 'date-selected-hover-border-color');
+            color: var-get($theme, 'date-current-hover-foreground');
+            background: var-get($theme, 'date-current-hover-background');
+            border-color: var-get($theme, 'date-current-hover-border-color');
         }
 
         &:focus {
-            border-color: var-get($theme, 'date-selected-focus-border-color');
+            color: var-get($theme, 'date-current-focus-foreground');
+            background: var-get($theme, 'date-current-focus-background');
+            border-color: var-get($theme, 'date-current-focus-border-color');
         }
     }
 
-    &[part~='current'][part~='special'][part~='first'][part~='last'],
+
     &[part~='current'][part~='special'] {
         border-color: var-get($theme, 'date-current-border-color');
 
@@ -503,11 +582,21 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
         }
     }
 
+    &[part~='current'][part~='special'][part~='first'][part~='last'],
+    &[part~='current'][part~='special'] {
+        &::after {
+            width: calc(var-get($theme, 'inner-size') - #{rem(4px)});
+            height: calc(var-get($theme, 'inner-size') - #{rem(4px)});
+        }
+    }
+
     &[part~='special'][part~='current']:not([part~='selected']) {
+        color: var-get($theme, 'date-special-foreground');
         background: var-get($theme, 'date-current-background');
         border-color: var-get($theme, 'date-current-border-color');
 
         &:hover {
+            color: var-get($theme, 'date-special-hover-foreground');
             background: var-get($theme, 'date-current-hover-background');
             border-color: var-get($theme, 'date-current-hover-border-color');
 
@@ -517,11 +606,12 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
         }
 
         &:focus {
+            color: var-get($theme, 'date-special-focus-foreground');
             background: var-get($theme, 'date-current-focus-background');
             border-color: var-get($theme, 'date-current-focus-border-color');
 
             &::after {
-                border-color: var-get($theme, 'date-special-hover-border-color');
+                border-color: var-get($theme, 'date-special-focus-border-color');
             }
         }
 
@@ -530,14 +620,16 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
         }
     }
 
-    &[part~='special'][part~='range'][part~='preview'][part~='first'],
-    &[part~='special'][part~='range'][part~='preview'][part~='last'] {
+    &[part~='special'][part~='selected'][part~='range'][part~='preview'][part~='first']:not([part~='current']),
+    &[part~='special'][part~='selected'][part~='range'][part~='preview'][part~='last']:not([part~='current']) {
+        border-color: var-get($theme, 'date-selected-border-color');
+
         &:hover {
-            border-color: var-get($theme, 'date-special-hover-border-color')
+            border-color: var-get($theme, 'date-selected-hover-border-color')
         }
 
         &:focus {
-            border-color: var-get($theme, 'date-special-hover-border-color')
+            border-color: var-get($theme, 'date-selected-focus-border-color')
         }
     }
 
@@ -550,63 +642,43 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
         }
     }
 
-    &[part~='inactive'] {
-        &::after {
-            display: none;
-        }
-
-        &:hover {
-            color: var-get($theme, 'inactive-color');
-        }
-    }
 
-    &[part~='inactive'][part~='selected']:not([part~='range']) {
-        color: var-get($theme, 'inactive-color');
+    &[part~='range']:not([part~='first'], [part~='last'], [part~='preview'], [part~='special'], [part~='current']) {
         background: transparent;
-
-        &:hover {
-            background: var-get($theme, 'date-hover-background');
-            border-color: var-get($theme, 'date-hover-border-color');
-        }
+        border-color: transparent;
     }
+}
 
-    &[part~='inactive'][part~='special'] {
-        color: var-get($theme, 'inactive-color');
+[part~='date-inner'][part~='selected'][part~='inactive'][part~='first'],
+[part~='date-inner'][part~='selected'][part~='inactive'][part~='last'] {
+    color: var-get($theme, 'date-selected-foreground');
+    background: var-get($theme, 'date-selected-background');
+    border-color: var-get($theme, 'date-selected-border-color');
 
-        &:hover {
-            color: var-get($theme, 'inactive-color');
-        }
+    &:hover {
+        color: var-get($theme, 'date-selected-hover-foreground');
+        background: var-get($theme, 'date-selected-hover-background');
+        border-color: var-get($theme, 'date-selected-hover-border-color');
     }
 
-    &[part~='inactive'][part~='special'][part~='range'] {
-        color: var-get($theme, 'date-selected-range-foreground');
-
-        &:hover {
-            color: var-get($theme, 'date-selected-range-foreground');
-        }
+    &:focus {
+        color: var-get($theme, 'date-selected-focus-foreground');
+        background: var-get($theme, 'date-selected-focus-background');
+        border-color: var-get($theme, 'date-selected-focus-border-color');
     }
+}
 
-    &[part~='inactive'][part~='current']:not([part~='range']) {
-        color: var-get($theme, 'inactive-color');
-        border-color: transparent;
+[part~='date-inner'][part~='inactive'][part~='range']:not([part~='first'], [part~='last'], [part~='preview']) {
+    color: var-get($theme, 'date-selected-range-foreground');
+    border-color: transparent;
 
-        &:hover {
-            background: var-get($theme, 'date-hover-background');
-            border-color: var-get($theme, 'date-hover-border-color');
-        }
-    }
-
-    &[part~='inactive'][part~='selected'][part~='current'] {
-        border-color: transparent;
+    &:hover {
+        color: var-get($theme, 'date-selected-range-hover-foreground');
+        background: var-get($theme, 'date-selected-range-hover-background');
     }
 
-    &[part~='inactive'][part~='selected'][part~='current']:not([part~='range']) {
-        background: transparent;
-
-        &:hover,
-        &:focus {
-            background: var-get($theme, 'date-hover-background');
-            border-color: var-get($theme, 'date-hover-border-color');
-        }
+    &:focus {
+        color: var-get($theme, 'date-selected-range-focus-foreground');
+        background: var-get($theme, 'date-selected-range-focus-background');
     }
 }
diff --git a/src/components/calendar/themes/shared/material/days-view.material.scss b/src/components/calendar/themes/shared/material/days-view.material.scss
index 1ae853079..9e20be652 100644
--- a/src/components/calendar/themes/shared/material/days-view.material.scss
+++ b/src/components/calendar/themes/shared/material/days-view.material.scss
@@ -3,36 +3,24 @@
 
 $theme: $material;
 $border-width: rem(1px);
+$inner-border-width: rem(1px);
 $week-number-radius: var-get($theme, 'week-number-border-radius');
 
-
 [part~='label'] {
     height: var-get($theme, 'size');
     color: var-get($theme, 'weekday-color');
 
     [part~='week-number-inner'] {
-        color: var-get($theme, 'weekday-color');
+        color: var-get($theme, 'week-number-foreground');
     }
 }
 
-[part~='weekend'] {
-    color: var-get($theme, 'weekend-color');
-}
-
-[part~='inactive'] {
-    color: var-get($theme, 'inactive-color');
-
-    &:hover {
-        color: var-get($theme, 'inactive-color');
-    }
-}
-
-[part='week-number-inner first'] {
+[part~='week-number-inner'][part~='first'] {
     border-top-left-radius: $week-number-radius;
     border-top-right-radius: $week-number-radius;
 }
 
-[part='week-number-inner last'] {
+[part~='week-number-inner'][part~='last'] {
     border-bottom-left-radius: $week-number-radius;
     border-bottom-right-radius: $week-number-radius;
 }
@@ -65,22 +53,39 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
 
     &[part~='range'] {
         background: var-get($theme, 'date-selected-range-background');
+        border-block: rem(1px) solid var-get($theme, 'date-range-border-color');
     }
 
     &[part~='range'][part~='first'],
     &[part~='range'][part~='last'] {
         background: transparent;
+        border-block-color: transparent;
 
         &::before {
             height: var-get($theme, 'size');
             width: var-get($theme, 'size');
             background: var-get($theme, 'content-background');
-            border-radius: var-get($theme, 'date-border-radius');
+            border-radius: var-get($theme, 'date-range-border-radius');
         }
 
         &::after {
             height: var-get($theme, 'size');
             background: var-get($theme, 'date-selected-range-background');
+            border-block: rem(1px) solid var-get($theme, 'date-range-border-color');
+        }
+    }
+
+    &[part~='range'][part~='first'][part~='special'],
+    &[part~='range'][part~='last'][part~='special'] {
+        &::before {
+            border-radius: var-get($theme, 'date-special-border-radius');
+        }
+    }
+
+    &[part~='range'][part~='first'][part~='current'],
+    &[part~='range'][part~='last'][part~='current'] {
+        &::before {
+            border-radius: var-get($theme, 'date-current-border-radius');
         }
     }
 
@@ -106,127 +111,115 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
 }
 
 [part~='date-inner'] {
-    border: rem(1px) solid var-get($theme, 'date-border-color');
-    border-radius: var-get($theme, 'date-border-radius');
     width: var-get($theme, 'size');
     height: var-get($theme, 'size');
+    border: $inner-border-width solid transparent;
+    border-radius: var-get($theme, 'date-border-radius');
 
-    &[part~='selected'] {
-        color: var-get($theme, 'date-selected-foreground');
-        background: var-get($theme, 'date-selected-background');
-        border-color: var-get($theme, 'date-selected-border-color');
+    &:hover {
+        background: var-get($theme, 'date-hover-background');
+    }
+
+    &:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='first'], [part~='last'], [part~='range'], [part~='preview'][part~='disabled']) {
+        border-color: var-get($theme, 'date-border-color');
 
         &:hover {
-            color: var-get($theme, 'date-selected-hover-foreground');
-            background: var-get($theme, 'date-selected-hover-background');
-            border-color: var-get($theme, 'date-selected-hover-border-color');
+            border-color: var-get($theme, 'date-hover-border-color');
         }
 
         &:focus {
-            color: var-get($theme, 'date-selected-focus-foreground');
-            background: var-get($theme, 'date-selected-focus-background');
-            border-color: var-get($theme, 'date-selected-focus-border-color');
+            border-color: var-get($theme, 'date-focus-border-color');
         }
+    }
 
-        &[part~='current'] {
-            color: var-get($theme, 'date-selected-current-foreground');
-            background: var-get($theme, 'date-selected-current-background');
-            border-color: var-get($theme, 'date-selected-current-border-color');
-
-            &:hover {
-                color: var-get($theme, 'date-selected-current-hover-foreground');
-                background: var-get($theme, 'date-selected-current-hover-background');
-            }
+    &[part~='inactive']:not([part~='selected'][part~='range'], [part~='disabled']) {
+        color: var-get($theme, 'inactive-color');
 
-            &:focus {
-                color: var-get($theme, 'date-selected-current-focus-foreground');
-                background: var-get($theme, 'date-selected-current-focus-background');
-            }
+        &:hover {
+            color: var-get($theme, 'date-hover-foreground');
         }
 
-        &[part~='current'][part~='range']:not([part~='last'], [part~='first']) {
-            color: var-get($theme, 'date-current-foreground');
-
-            &:focus {
-                border-color: var-get($theme, 'date-current-focus-border-color');
-            }
+        &:focus {
+            color:  var-get($theme, 'date-focus-foreground');
         }
+    }
 
-        &[part~='range'] {
-            color: var-get($theme, 'date-selected-range-foreground');
-            background: transparent;
+    &[part~='disabled']:not([part~='selected'],[part~='special'],[part~='current']) {
+        color: var-get($theme, 'date-disabled-foreground');
+    }
 
-            &:hover {
-                color: var-get($theme, 'date-selected-range-hover-foreground');
-                background: var-get($theme, 'date-selected-range-hover-background');
-            }
+    &[part~='disabled'][part~='range']:not([part~='selected'],[part~='special'],[part~='current'], [part~='preview'], [part~='first'], [part~='last']) {
+        color: var-get($theme, 'date-disabled-range-foreground');
+    }
 
-            &:focus {
-                color: var-get($theme, 'date-selected-range-focus-foreground');
-                background: var-get($theme, 'date-selected-range-focus-background');
-            }
-        }
+    &[part~='first'],
+    &[part~='last'] {
+        border-radius: var-get($theme, 'date-range-border-radius');
 
-        &[part~='first'],
-        &[part~='last'] {
-            color: var-get($theme, 'date-selected-foreground');
-            background: var-get($theme, 'date-selected-background');
+        &::after {
+            border-radius: var-get($theme, 'date-range-border-radius');
+        }
+    }
 
-            &:hover {
-                color: var-get($theme, 'date-selected-hover-foreground');
-                background: var-get($theme, 'date-selected-hover-background');
-            }
+    &[part~='special'] {
+        border-radius: var-get($theme, 'date-special-border-radius');
 
-            &:focus {
-                color: var-get($theme, 'date-selected-focus-foreground');
-                background: var-get($theme, 'date-selected-focus-background');
-            }
+        &::after {
+            border-radius: var-get($theme, 'date-special-border-radius');
         }
+    }
 
-        &[part~='special'] {
-            color: var-get($theme, 'date-selected-foreground');
-            background: var-get($theme, 'date-selected-background');
+    &[part~='current'] {
+        border-radius: var-get($theme, 'date-current-border-radius');
+    }
 
-            &:hover {
-                color: var-get($theme, 'date-selected-hover-foreground');
-                background: var-get($theme, 'date-selected-hover-background');
+    &[part~='special'][part~='current'] {
+        border-radius: var-get($theme, 'date-current-border-radius');
 
+        &::after {
+            border-radius: var-get($theme, 'date-current-border-radius');
+        }
+    }
+}
 
-                /* stylelint-disable max-nesting-depth */
-                &::after {
-                    border-color: var-get($theme, 'date-selected-special-hover-border-color');
-                }
-                /* stylelint-enable max-nesting-depth */
-            }
+[part~='date-inner']:not([part~='inactive']) {
+    &:hover {
+        color: var-get($theme, 'date-hover-foreground');
+    }
 
-            &:focus {
-                color: var-get($theme, 'date-selected-focus-foreground');
-                background: var-get($theme, 'date-selected-focus-background');
+    &:focus {
+        color: var-get($theme, 'date-focus-foreground');
+        background: var-get($theme, 'date-focus-background');
+    }
 
-                /* stylelint-disable max-nesting-depth */
-                &::after {
-                    border-color: var-get($theme, 'date-selected-special-focus-border-color');
-                }
-                /* stylelint-enable max-nesting-depth */
-            }
+    &[part~='weekend']:not([part~='selected'][part~='range'], [part~='current'], [part~='special'], [part~='selected'], [part~='disabled']) {
+        color: var-get($theme, 'weekend-color');
 
-            &::after {
-                border-color: var-get($theme, 'date-selected-special-border-color');
-            }
+        &:hover {
+            color: var-get($theme, 'date-hover-foreground');
+        }
+
+        &:focus {
+            color:  var-get($theme, 'date-focus-foreground');
         }
     }
 
-    &[part~='disabled'] {
-        color: var-get($theme, 'date-disabled-foreground');
+    &[part~='selected'] {
+        color: var-get($theme, 'date-selected-foreground');
+        background: var-get($theme, 'date-selected-background');
+        border-color: var-get($theme, 'date-selected-border-color');
 
-        &[part~='first'],
-        &[part~='last'] {
-            color: var-get($theme, 'date-selected-foreground');
+        &:hover {
+            color: var-get($theme, 'date-selected-hover-foreground');
+            background: var-get($theme, 'date-selected-hover-background');
+            border-color: var-get($theme, 'date-selected-hover-border-color');
         }
-    }
 
-    &[part~='disabled'][part~='range']:not([part~='preview']) {
-        color: var-get($theme, 'date-disabled-range-foreground');
+        &:focus {
+            color: var-get($theme, 'date-selected-focus-foreground');
+            background: var-get($theme, 'date-selected-focus-background');
+            border-color: var-get($theme, 'date-selected-focus-border-color');
+        }
     }
 
     &[part~='current'] {
@@ -247,6 +240,39 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
         }
     }
 
+    &[part~='selected'][part~='current'] {
+        color: var-get($theme, 'date-selected-current-foreground');
+        background: var-get($theme, 'date-selected-current-background');
+        border-color: var-get($theme, 'date-selected-current-border-color');
+
+        &:hover {
+            color: var-get($theme, 'date-selected-current-hover-foreground');
+            background: var-get($theme, 'date-selected-current-hover-background');
+            border-color: var-get($theme, 'date-selected-current-hover-border-color');
+        }
+
+        &:focus {
+            color: var-get($theme, 'date-selected-current-focus-foreground');
+            background: var-get($theme, 'date-selected-current-focus-background');
+            border-color: var-get($theme, 'date-selected-current-focus-border-color');
+        }
+    }
+
+    &[part~='current'][part~='range']:not([part~='special'], [part~='last'], [part~='first'], [part~='preview']) {
+        color: var-get($theme, 'date-selected-current-range-foreground');
+        background: var-get($theme, 'date-selected-current-range-background');
+
+        &:hover {
+            color: var-get($theme, 'date-selected-current-range-hover-foreground');
+            background: var-get($theme, 'date-selected-current-range-hover-background');
+        }
+
+        &:focus {
+            color: var-get($theme, 'date-selected-current-range-foreground');
+            background: var-get($theme, 'date-selected-current-range-focus-background');
+        }
+    }
+
     &[part~='special'] {
         color: var-get($theme, 'date-special-foreground');
         background: var-get($theme, 'date-special-background');
@@ -255,8 +281,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
             content: "";
             position: absolute;
             z-index: 0;
-            border: rem(1px) solid var-get($theme, 'date-special-border-color');
-            border-radius: inherit;
+            border: $inner-border-width solid var-get($theme, 'date-special-border-color');
             width: var-get($theme, 'size');
             height: var-get($theme, 'size');
             box-sizing: border-box;
@@ -264,6 +289,7 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
 
         &:hover {
             color: var-get($theme, 'date-special-hover-foreground');
+            background: var-get($theme, 'date-special-hover-background');
 
             &::after {
                 border-color: var-get($theme, 'date-special-hover-border-color')
@@ -272,13 +298,43 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
 
         &:focus {
             color: var-get($theme, 'date-special-focus-foreground');
+            background: var-get($theme, 'date-special-focus-background');
 
             &::after {
-                border-color: var-get($theme, 'date-special-hover-border-color')
+                border-color: var-get($theme, 'date-special-focus-border-color')
+            }
+        }
+    }
+
+    &[part~='selected'][part~='special'] {
+        color: var-get($theme, 'date-selected-special-foreground');
+        background: var-get($theme, 'date-selected-special-background');
+
+        &::after {
+            border-color: var-get($theme, 'date-selected-special-border-color');
+        }
+
+        &:hover {
+            color: var-get($theme, 'date-selected-special-hover-foreground');
+            background: var-get($theme, 'date-selected-special-hover-background');
+
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-hover-border-color');
+            }
+        }
+
+        &:focus {
+            color: var-get($theme, 'date-selected-special-focus-foreground');
+            background: var-get($theme, 'date-selected-special-focus-background');
+
+            &::after {
+                border-color: var-get($theme, 'date-selected-special-focus-border-color');
             }
         }
+    }
 
-        &[part~='range']:not([part~='preview']) {
+    &[part~='special'][part~='range'] {
+        &:not([part~='preview']) {
             color: var-get($theme, 'date-special-range-foreground');
             background: var-get($theme, 'date-special-range-background');
 
@@ -287,125 +343,138 @@ $week-number-radius: var-get($theme, 'week-number-border-radius');
             }
 
             &:hover {
-                color: var-get($theme, 'date-special-hover-foreground');
-                background: var-get($theme, 'date-hover-background');
+                color: var-get($theme, 'date-special-range-hover-foreground');
+                background: var-get($theme, 'date-special-range-hover-background');
 
                 // stylelint-disable-next-line
                 &::after {
-                    border-color: var-get($theme, 'date-special-hover-border-color');
+                    border-color: var-get($theme, 'date-special-range-hover-border-color');
                 }
             }
 
             &:focus {
-                color: var-get($theme, 'date-special-focus-foreground');
-                background: var-get($theme, 'date-focus-background');
+                color: var-get($theme, 'date-special-range-focus-foreground');
+                background: var-get($theme, 'date-special-range-focus-background');
 
                 // stylelint-disable-next-line
                 &::after {
-                    border-color: var-get($theme, 'date-special-hover-border-color');
+                    border-color: var-get($theme, 'date-special-range-focus-border-color');
                 }
             }
         }
+    }
 
-        &[part~='range'][part~='first']:not([part~='preview']),
-        &[part~='range'][part~='last']:not([part~='preview']),
-        {
-            color: var-get($theme, 'date-selected-foreground');
-            background: var-get($theme, 'date-selected-background');
-
-            &:hover {
-                background: var-get($theme, 'date-selected-hover-background');
-            }
-
-            &:focus {
-                background: var-get($theme, 'date-selected-focus-background');
-            }
-
+    &[part~='selected'][part~='special'][part~='first'],
+    &[part~='selected'][part~='special'][part~='last'],
+    &[part~='special'][part~='range'][part~='first']:not([part~='preview']),
+    &[part~='special'][part~='range'][part~='last']:not([part~='preview']) {
+        &:hover {
             &::after {
-                border-color: var-get($theme, 'date-selected-foreground');
+                border-color: var-get($theme, 'date-selected-special-hover-border-color');
             }
         }
 
-        &[part~='first'][part~='selected'],
-        &[part~='last'][part~='selected'],
-        &[part~='selected']:not([part~='range']),
-        &[part~='current'] {
+        &:focus {
             &::after {
-                width: var-get($theme, 'inner-size');
-                height: var-get($theme, 'inner-size');
+                border-color: var-get($theme, 'date-selected-special-focus-border-color');
             }
         }
-    }
 
-    &:hover {
-        color: var-get($theme, 'date-hover-foreground');
-        background: var-get($theme, 'date-hover-background');
-        border-color: var-get($theme, 'date-hover-border-color');
-    }
-
-    &:focus {
-        color: var-get($theme, 'date-focus-foreground');
-        background: var-get($theme, 'date-focus-background');
-        border-color: var-get($theme, 'date-focus-border-color');
-    }
-
-    &[part~='inactive'] {
         &::after {
-            display: none;
+            border-color: var-get($theme, 'date-selected-special-border-color');
         }
+    }
 
-        &:hover {
-            color: var-get($theme, 'inactive-color');
+    // The ::after element is used for the special dates to create a border around them.
+    // For the selected + special, current + special dates and non-range special dates,
+    // we want the ::after element to be smaller than the date size, so we set it to inner-size.
+    // for the dates in a range, the ::after element should be the same size as the date,
+    // so we leave it as is (size).
+    &[part~='selected'][part~='special']:not([part~='range']),
+    &[part~='selected'][part~='special'][part~='first'],
+    &[part~='selected'][part~='special'][part~='last'],
+    &[part~='special'][part~='current']{
+        &::after {
+            width: var-get($theme, 'inner-size');
+            height: var-get($theme, 'inner-size');
         }
     }
 
-    &[part~='inactive'][part~='selected']:not([part~='range']) {
-        color: var-get($theme, 'inactive-color');
-        background: transparent;
+
+    // This part is making sure that the first and last dates
+    // that are also inactive, current or special have the same styles as the normal selected date.
+    &[part~='selected'][part~='inactive'][part~='first'],
+    &[part~='selected'][part~='inactive'][part~='last'],
+    &[part~='selected'][part~='current'][part~='first'],
+    &[part~='selected'][part~='current'][part~='last'],
+    &[part~='selected'][part~='special'][part~='first'],
+    &[part~='selected'][part~='special'][part~='last'],
+    &[part~='selected'][part~='current'][part~='special'][part~='first'],
+    &[part~='selected'][part~='current'][part~='special'][part~='last'] {
+        color: var-get($theme, 'date-selected-foreground');
+        background: var-get($theme, 'date-selected-background');
 
         &:hover {
-            background: var-get($theme, 'date-hover-background');
-            border-color: var-get($theme, 'date-hover-border-color');
+            color: var-get($theme, 'date-selected-hover-foreground');
+            background: var-get($theme, 'date-selected-hover-background');
         }
-    }
-
-    &[part~='inactive'][part~='special'] {
-        color: var-get($theme, 'inactive-color');
 
-        &:hover {
-            color: var-get($theme, 'inactive-color');
+        &:focus {
+            color: var-get($theme, 'date-selected-focus-foreground');
+            background: var-get($theme, 'date-selected-focus-background');
         }
     }
 
-    &[part~='inactive'][part~='special'][part~='range'] {
+    // Dates inside the range, but not the first or last date of the range
+    &[part~='range']:not([part~='first'], [part~='last'], [part~='preview'], [part~='disabled'], [part~='special'], [part~='current']) {
         color: var-get($theme, 'date-selected-range-foreground');
 
         &:hover {
-            color: var-get($theme, 'date-selected-range-foreground');
+            color: var-get($theme, 'date-selected-range-hover-foreground');
+            background: var-get($theme, 'date-selected-range-hover-background');
+        }
+
+        &:focus {
+            color: var-get($theme, 'date-selected-range-focus-foreground');
+            background: var-get($theme, 'date-selected-range-focus-background');
         }
     }
 
-    &[part~='inactive'][part~='current']:not([part~='range']) {
-        color: var-get($theme, 'inactive-color');
+    &[part~='range']:not([part~='first'], [part~='last'], [part~='preview'], [part~='special'], [part~='current']) {
+        background: transparent;
         border-color: transparent;
+    }
+}
 
-        &:hover {
-            background: var-get($theme, 'date-hover-background');
-            border-color: var-get($theme, 'date-hover-border-color');
-        }
+[part~='date-inner'][part~='selected'][part~='inactive'][part~='first'],
+[part~='date-inner'][part~='selected'][part~='inactive'][part~='last'] {
+    color: var-get($theme, 'date-selected-foreground');
+    background: var-get($theme, 'date-selected-background');
+    border-color: var-get($theme, 'date-selected-border-color');
+
+    &:hover {
+        color: var-get($theme, 'date-selected-hover-foreground');
+        background: var-get($theme, 'date-selected-hover-background');
+        border-color: var-get($theme, 'date-selected-hover-border-color');
     }
 
-    &[part~='inactive'][part~='selected'][part~='current'] {
-        border-color: transparent;
+    &:focus {
+        color: var-get($theme, 'date-selected-focus-foreground');
+        background: var-get($theme, 'date-selected-focus-background');
+        border-color: var-get($theme, 'date-selected-focus-border-color');
     }
+}
 
-    &[part~='inactive'][part~='selected'][part~='current']:not([part~='range']) {
-        background: transparent;
+[part~='date-inner'][part~='inactive'][part~='range']:not([part~='first'], [part~='last'], [part~='preview']) {
+    color: var-get($theme, 'date-selected-range-foreground');
 
-        &:hover,
-        &:focus {
-            background: var-get($theme, 'date-hover-background');
-            border-color: var-get($theme, 'date-hover-border-color');
-        }
+    &:hover {
+        color: var-get($theme, 'date-selected-range-hover-foreground');
+        background: var-get($theme, 'date-selected-range-hover-background');
+    }
+
+    &:focus {
+        color: var-get($theme, 'date-selected-range-focus-foreground');
+        background: var-get($theme, 'date-selected-range-focus-background');
     }
 }
diff --git a/src/components/calendar/themes/year-month.ts b/src/components/calendar/themes/year-month.ts
index 26ff42874..5fa6ec2bc 100644
--- a/src/components/calendar/themes/year-month.ts
+++ b/src/components/calendar/themes/year-month.ts
@@ -1,56 +1,38 @@
 import { css } from 'lit';
 
 import type { Themes } from '../../../theming/types.js';
-// Dark Overrides
-import { styles as bootstrapDark } from './dark/calendar.bootstrap.css.js';
-import { styles as fluentDark } from './dark/calendar.fluent.css.js';
-import { styles as indigoDark } from './dark/calendar.indigo.css.js';
-import { styles as materialDark } from './dark/calendar.material.css.js';
-// Light Overrides
-import { styles as bootstrapLight } from './light/calendar.bootstrap.css.js';
-import { styles as fluentLight } from './light/calendar.fluent.css.js';
-import { styles as indigoLight } from './light/calendar.indigo.css.js';
-import { styles as materialLight } from './light/calendar.material.css.js';
-import { styles as shared } from './light/calendar.shared.css.js';
-// Shared Styles
 import { styles as bootstrap } from './shared/bootstrap/year-month-view.bootstrap.css.js';
 import { styles as fluent } from './shared/fluent/year-month-view.fluent.css.js';
 import { styles as indigo } from './shared/indigo/year-month-view.indigo.css.js';
 import { styles as material } from './shared/material/year-month-view.material.css.js';
 
 const light = {
-  shared: css`
-    ${shared}
-  `,
   bootstrap: css`
-    ${bootstrap} ${bootstrapLight}
+    ${bootstrap}
   `,
   material: css`
-    ${material} ${materialLight}
+    ${material}
   `,
   fluent: css`
-    ${fluent} ${fluentLight}
+    ${fluent}
   `,
   indigo: css`
-    ${indigo} ${indigoLight}
+    ${indigo}
   `,
 };
 
 const dark = {
-  shared: css`
-    ${shared}
-  `,
   bootstrap: css`
-    ${bootstrap} ${bootstrapDark}
+    ${bootstrap}
   `,
   material: css`
-    ${material} ${materialDark}
+    ${material}
   `,
   fluent: css`
-    ${fluent} ${fluentDark}
+    ${fluent}
   `,
   indigo: css`
-    ${indigo} ${indigoDark}
+    ${indigo}
   `,
 };