/* Daykeeper support workspace theme for Chatwoot v4.14.2.
 *
 * GENERATED by scale.mjs from the Daykeeper design tokens plus the hand-written
 * rules in theme.rules.css. Do not edit this file: change an anchor in scale.mjs
 * or a rule in theme.rules.css and re-run `node scale.mjs`.
 *
 * Loaded from DASHBOARD_SCRIPTS, which Rails renders as the last element in
 * <body>, so this stylesheet always arrives after the application bundle. That
 * is why the plain :root and .dark redefinitions below win without !important.
 * The variable blocks are intentionally NOT scoped to [data-daykeeper]: they
 * must apply before workspace.js runs, or the dashboard paints Chatwoot blue for
 * a frame. Everything else is scoped, so a stylesheet without its script leaves
 * no half-applied rules behind.
 */

:root {
  --slate-1: 254 254 253;
  --slate-2: 252 251 249;
  --slate-3: 241 238 233;
  --slate-4: 238 234 228;
  --slate-5: 228 222 214;
  --slate-6: 220 213 204;
  --slate-7: 202 195 185;
  --slate-8: 185 177 166;
  --slate-9: 155 149 140;
  --slate-10: 126 122 116;
  --slate-11: 98 96 92;
  --slate-12: 0 0 0;

  --blue-1: 253 252 251;
  --blue-2: 247 245 242;
  --blue-3: 241 238 233;
  --blue-4: 238 234 228;
  --blue-5: 228 222 214;
  --blue-6: 216 209 199;
  --blue-7: 189 182 171;
  --blue-8: 163 155 144;
  --blue-9: 0 0 0;
  --blue-10: 43 41 38;
  --blue-11: 0 0 0;
  --blue-12: 0 0 0;

  --teal-1: 247 251 247;
  --teal-2: 238 248 238;
  --teal-3: 228 246 230;
  --teal-4: 214 239 217;
  --teal-5: 201 233 204;
  --teal-6: 187 226 191;
  --teal-7: 156 208 162;
  --teal-8: 125 191 134;
  --teal-9: 58 130 72;
  --teal-10: 46 119 62;
  --teal-11: 23 91 40;
  --teal-12: 18 47 24;

  --ruby-1: 253 251 250;
  --ruby-2: 253 244 242;
  --ruby-3: 251 229 225;
  --ruby-4: 248 216 210;
  --ruby-5: 245 204 196;
  --ruby-6: 242 191 181;
  --ruby-7: 233 166 153;
  --ruby-8: 224 141 126;
  --ruby-9: 195 64 47;
  --ruby-10: 178 56 41;
  --ruby-11: 158 51 39;
  --ruby-12: 74 28 21;

  --amber-1: 253 253 248;
  --amber-2: 252 248 230;
  --amber-3: 249 238 198;
  --amber-4: 245 230 179;
  --amber-5: 241 222 159;
  --amber-6: 238 213 138;
  --amber-7: 229 194 105;
  --amber-8: 220 174 68;
  --amber-9: 240 180 41;
  --amber-10: 224 164 23;
  --amber-11: 138 90 6;
  --amber-12: 61 45 16;

  --gray-1: 254 254 254;
  --gray-2: 251 251 250;
  --gray-3: 239 238 237;
  --gray-4: 236 234 232;
  --gray-5: 225 223 220;
  --gray-6: 216 214 211;
  --gray-7: 198 196 192;
  --gray-8: 180 178 174;
  --gray-9: 151 150 147;
  --gray-10: 124 122 120;
  --gray-11: 97 96 95;
  --gray-12: 0 0 0;

  --background-color: 252 251 249;
  --surface-1: 255 255 255;
  --surface-2: 255 255 255;
  --surface-active: 255 255 255;
  --background-input-box: 0, 0, 0, 0.03;
  --card-color: 255 255 255;
  --button-color: 255 255 255;
  --button-hover-color: 255, 255, 255, 0.2;
  --border-weak: 228 222 214;
  --border-strong: 220 213 204;
  --border-container: 238 234 228;
  --border-blue-strong: 0 0 0;
  --border-blue: 163, 155, 144, 0.5;
  --text-blue: 0 0 0;
  --text-purple: 2 4 49;
  --text-amber: 61 45 16;
  --solid-1: 255 255 255;
  --solid-2: 255 255 255;
  --solid-3: 255 255 255;
  --solid-active: 255 255 255;
  --solid-amber: 245 230 179;
  --solid-amber-button: 241 222 159;
  --solid-blue: 238 234 228;
  --solid-blue-2: 253 252 251;
  --solid-red: 245 204 196;
  --solid-iris: 230 231 255;
  --solid-purple: 230 231 255;
  --label-background: 252 251 249;
  --label-border: 0, 0, 0, 0.06;
  --overlay: 0, 0, 0, 0.14;
  --overlay-avatar: 255, 255, 255, 0.67;
  --alpha-1: 238, 234, 228, 0.6;
  --alpha-2: 228, 222, 214, 0.7;
  --alpha-3: 255, 255, 255, 0.96;
  --black-alpha-1: 0, 0, 0, 0.12;
  --black-alpha-2: 0, 0, 0, 0.05;
  --white-alpha: 255, 255, 255, 0.8;

  --dk-accent: #000000;
  --dk-accent-hover: #2b2926;
  --dk-accent-text: #000000;
  --dk-accent-quiet: #f1eee9;
  --dk-on-accent: #ffffff;
  --dk-ring: #000000;
  --dk-selection: #e4ded6;
  --dk-chrome: #fcfbf9;
  --dk-on-warning: #000000;
}

.dark {
  --slate-1: 14 13 12;
  --slate-2: 23 22 20;
  --slate-3: 31 29 27;
  --slate-4: 38 36 33;
  --slate-5: 45 42 39;
  --slate-6: 55 51 47;
  --slate-7: 71 66 61;
  --slate-8: 87 82 75;
  --slate-9: 114 109 101;
  --slate-10: 141 136 129;
  --slate-11: 170 165 158;
  --slate-12: 255 255 255;

  --blue-1: 18 17 16;
  --blue-2: 25 24 22;
  --blue-3: 33 31 28;
  --blue-4: 39 36 33;
  --blue-5: 45 42 38;
  --blue-6: 60 56 51;
  --blue-7: 76 71 65;
  --blue-8: 92 87 79;
  --blue-9: 255 255 255;
  --blue-10: 228 222 214;
  --blue-11: 255 255 255;
  --blue-12: 255 255 255;

  --teal-1: 13 21 14;
  --teal-2: 18 32 19;
  --teal-3: 22 43 25;
  --teal-4: 28 53 32;
  --teal-5: 35 63 39;
  --teal-6: 41 74 46;
  --teal-7: 48 89 55;
  --teal-8: 56 105 64;
  --teal-9: 58 130 72;
  --teal-10: 46 119 62;
  --teal-11: 147 207 155;
  --teal-12: 211 239 214;

  --ruby-1: 27 21 19;
  --ruby-2: 34 24 22;
  --ruby-3: 58 32 26;
  --ruby-4: 74 39 31;
  --ruby-5: 90 45 35;
  --ruby-6: 107 52 40;
  --ruby-7: 133 64 49;
  --ruby-8: 160 77 59;
  --ruby-9: 188 79 59;
  --ruby-10: 177 67 48;
  --ruby-11: 255 168 154;
  --ruby-12: 255 225 218;

  --amber-1: 25 23 16;
  --amber-2: 32 28 19;
  --amber-3: 51 40 15;
  --amber-4: 64 50 18;
  --amber-5: 78 60 21;
  --amber-6: 92 71 24;
  --amber-7: 117 91 33;
  --amber-8: 143 111 42;
  --amber-9: 240 180 41;
  --amber-10: 255 201 74;
  --amber-11: 229 180 85;
  --amber-12: 247 231 196;

  --gray-1: 13 13 13;
  --gray-2: 22 22 21;
  --gray-3: 30 29 29;
  --gray-4: 37 36 35;
  --gray-5: 43 42 41;
  --gray-6: 53 51 50;
  --gray-7: 68 67 65;
  --gray-8: 84 82 80;
  --gray-9: 111 109 107;
  --gray-10: 138 136 134;
  --gray-11: 167 165 163;
  --gray-12: 255 255 255;

  --background-color: 14 13 12;
  --surface-1: 23 22 20;
  --surface-2: 31 29 27;
  --surface-active: 55 51 47;
  --background-input-box: 255, 255, 255, 0.03;
  --card-color: 31 29 27;
  --button-color: 38 36 33;
  --button-hover-color: 0, 0, 0, 0.15;
  --border-weak: 38 36 33;
  --border-strong: 55 51 47;
  --border-container: 255, 255, 255, 0;
  --border-blue-strong: 255 255 255;
  --border-blue: 255, 255, 255, 0.5;
  --text-blue: 255 255 255;
  --text-purple: 232 233 254;
  --text-amber: 247 231 196;
  --solid-1: 23 22 20;
  --solid-2: 31 29 27;
  --solid-3: 45 42 39;
  --solid-active: 55 51 47;
  --solid-amber: 51 40 15;
  --solid-amber-button: 255 201 74;
  --solid-blue: 39 36 33;
  --solid-blue-2: 25 24 22;
  --solid-red: 74 39 31;
  --solid-iris: 38 42 101;
  --solid-purple: 51 51 107;
  --label-background: 38 36 33;
  --label-border: 255, 255, 255, 0.05;
  --overlay: 0, 0, 0, 0.55;
  --overlay-avatar: 0, 0, 0, 0.05;
  --alpha-1: 38, 36, 33, 0.75;
  --alpha-2: 55, 51, 47, 0.55;
  --alpha-3: 31, 29, 27, 0.95;
  --black-alpha-1: 0, 0, 0, 0.32;
  --black-alpha-2: 0, 0, 0, 0.2;
  --white-alpha: 255, 255, 255, 0.1;

  --dk-accent: #ffffff;
  --dk-accent-hover: #e4ded6;
  --dk-accent-text: #ffffff;
  --dk-accent-quiet: #211f1c;
  --dk-on-accent: #000000;
  --dk-ring: #ffffff;
  --dk-selection: #5c574f;
  --dk-chrome: #0e0d0c;
  --dk-on-warning: #000000;
}

/* Hand-written half of theme.css. scale.mjs appends this verbatim after the
 * generated :root and .dark variable blocks; edit here, never in theme.css.
 *
 * Everything below is scoped to html[data-daykeeper], which workspace.js sets.
 * The variables are not, because they must land before the first paint. These
 * rules only matter once the overlay is actually running, and scoping them means
 * a stylesheet whose script failed to load leaves no half-styled UI behind.
 *
 * Specificity: Tailwind emits `.text-n-brand` (0,1,0), `.dark .x` and `.x:hover`
 * (0,2,0), `.dark .x:hover` (0,3,0). Prefixing with `html[data-daykeeper]` adds
 * one attribute and one type selector, so every override below outranks the
 * utility it replaces by exactly one class-column point. No !important is used,
 * which leaves Chatwoot's own `!bg-…` important utilities working. The one
 * exception is font-family: upstream declares Inter with !important on html and
 * body (and its font utilities carry it too), so the only way to replace a
 * typeface is an important declaration with a higher specificity.
 */

/* -- Type: Satoshi, the website's UI face -------------------------------- */
/* Copied verbatim from the website (public/fonts/satoshi; see ASSETS.md) and
 * served from this mount, so the dashboard makes no third-party font request.
 * Chatwoot asks for in-between weights (420, 440, 460, 520, 620) from its
 * variable Inter. Satoshi ships static 400/500/700, so each face claims a
 * range: without it, CSS font matching would round 420 up to Medium and set
 * all body text a weight too heavy. */

@font-face {
  font-family: "Satoshi";
  src:
    local("Satoshi"),
    url("fonts/Satoshi-Regular.otf") format("opentype");
  font-weight: 100 449;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src:
    local("Satoshi Medium"),
    url("fonts/Satoshi-Medium.otf") format("opentype");
  font-weight: 450 599;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Satoshi";
  src:
    local("Satoshi Bold"),
    url("fonts/Satoshi-Bold.otf") format("opentype");
  font-weight: 600 1000;
  font-style: normal;
  font-display: swap;
}

html[data-daykeeper],
html[data-daykeeper] body,
html[data-daykeeper] .font-inter,
html[data-daykeeper] .font-interDisplay {
  font-family:
    "Satoshi",
    -apple-system,
    system-ui,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif !important;
}

/* -- Native form controls, text selection, focus ------------------------- */

html[data-daykeeper] {
  accent-color: var(--dk-accent);
}

html[data-daykeeper] ::selection {
  background-color: var(--dk-selection);
  color: rgb(var(--slate-12));
}

html[data-daykeeper] :focus-visible {
  outline-color: var(--dk-ring);
}

/* Chatwoot ships `text-slate-600` on <body> from the legacy compiled palette.
 * The website's resting text colour is true black, not a grey. */
html[data-daykeeper] body.text-slate-600 {
  color: rgb(var(--slate-12));
}

/* -- Tracking ------------------------------------------------------------ */
/* The website's headings are tightly tracked; headings and the sidebar
 * account name echo it so the two surfaces read as one product. */

html[data-daykeeper] h1,
html[data-daykeeper] h2,
html[data-daykeeper] h3,
html[data-daykeeper] #sidebar-account-switcher [aria-live] {
  letter-spacing: -0.01em;
}

/* -- `n-brand`: Chatwoot's compiled brand blue --------------------------- */
/* Unlike every other next-design colour, `n-brand` is a literal hex compiled
 * into the utility (theme/colors.js), so no variable override can reach it.
 * These are the brand utilities the dashboard actually ships, by usage count. */

html[data-daykeeper] .text-n-brand,
html[data-daykeeper] .hover\:text-n-brand:hover,
html[data-daykeeper] .group:hover .group-hover\:text-n-brand,
html[data-daykeeper] .focus-within\:text-n-brand:focus-within,
html[data-daykeeper] .dark .dark\:text-n-brand,
html[data-daykeeper] .dark .dark\:hover\:text-n-brand:hover {
  color: var(--dk-accent-text);
}

/* The v3 login pack's `.text-link` (app/javascript/v3/App.vue) is a component
 * class built with `@apply text-n-brand`, so the compiled blue lands on a
 * selector the utility overrides above never match. Seen live as the "Forgot
 * your password?" link, whose border and outline follow currentColor. Its
 * hover is `text-n-blue-10`, which the --blue-* scale already carries. */
html[data-daykeeper] .text-link {
  color: var(--dk-accent-text);
}

html[data-daykeeper] .bg-n-brand,
html[data-daykeeper] .group:hover .group-hover\:bg-n-brand {
  background-color: var(--dk-accent);
}

html[data-daykeeper] .bg-n-brand\/5 {
  background-color: color-mix(in srgb, var(--dk-accent) 5%, transparent);
}

html[data-daykeeper] .bg-n-brand\/10,
html[data-daykeeper] .hover\:bg-n-brand\/10:hover,
html[data-daykeeper] .dark .dark\:bg-n-brand\/10 {
  background-color: color-mix(in srgb, var(--dk-accent) 10%, transparent);
}

html[data-daykeeper] .bg-n-brand\/20 {
  background-color: color-mix(in srgb, var(--dk-accent) 20%, transparent);
}

html[data-daykeeper] .hover\:bg-n-brand\/80:hover {
  background-color: color-mix(in srgb, var(--dk-accent) 80%, transparent);
}

html[data-daykeeper] .hover\:bg-n-brand\/90:hover {
  background-color: color-mix(in srgb, var(--dk-accent) 90%, transparent);
}

html[data-daykeeper] .border-n-brand,
html[data-daykeeper] .focus\:border-n-brand:focus,
html[data-daykeeper] .dark .dark\:border-n-brand {
  border-color: var(--dk-accent);
}

html[data-daykeeper] .outline-n-brand,
html[data-daykeeper] .focus\:outline-n-brand:focus,
html[data-daykeeper] .focus-within\:outline-n-brand:focus-within,
html[data-daykeeper] .dark .dark\:focus\:outline-n-brand:focus,
html[data-daykeeper] .dark .dark\:focus-within\:outline-n-brand:focus-within {
  outline-color: var(--dk-ring);
}

html[data-daykeeper] .ring-n-brand,
html[data-daykeeper] .focus\:ring-n-brand:focus,
html[data-daykeeper] .focus-within\:ring-n-brand:focus-within,
html[data-daykeeper] .dark .dark\:ring-n-brand {
  --tw-ring-color: var(--dk-ring);
}

/* Pseudo-element and state variants seen live: the conversation-list tab
 * underline is `after:bg-n-brand`, checkboxes and radios use `checked:` and
 * `indeterminate:`, and a few focus rings use `focus-visible:`. */
html[data-daykeeper] .after\:bg-n-brand::after,
html[data-daykeeper] .before\:bg-n-brand::before,
html[data-daykeeper] .checked\:bg-n-brand:checked,
html[data-daykeeper] .indeterminate\:bg-n-brand:indeterminate,
html[data-daykeeper] .dark .dark\:checked\:bg-n-brand:checked {
  background-color: var(--dk-accent);
}

html[data-daykeeper] .hover\:enabled\:bg-n-brand\/20:hover:enabled,
html[data-daykeeper] .focus-visible\:bg-n-brand\/20:focus-visible {
  background-color: color-mix(in srgb, var(--dk-accent) 20%, transparent);
}

html[data-daykeeper] .border-t-n-brand {
  border-top-color: var(--dk-accent);
}

html[data-daykeeper] .checked\:border-n-brand:checked,
html[data-daykeeper] .indeterminate\:border-n-brand:indeterminate,
html[data-daykeeper] .dark .dark\:checked\:border-n-brand:checked {
  border-color: var(--dk-accent);
}

html[data-daykeeper] .group:focus-within .group-focus-within\:text-n-brand {
  color: var(--dk-accent-text);
}

html[data-daykeeper] .focus-visible\:ring-n-brand:focus-visible {
  --tw-ring-color: var(--dk-ring);
}

/* The primary button is the website's: a black pill (white in dark mode).
 * Button.vue's solid blue variant is the only thing that pairs bg-n-brand with
 * the brightness hover, so the pair names it exactly; icon-only ones become
 * circles. */
html[data-daykeeper] .bg-n-brand.hover\:enabled\:brightness-110 {
  border-radius: 9999px;
}

/* It presses toward the paper on hover instead of Chatwoot's brightness
 * filter, which does nothing to black and washes white out. In dark mode
 * `--dk-accent-hover` is the step toward the ground, the same gesture
 * inverted. Scoped to the brand button so ruby/amber solids keep theirs. */
html[data-daykeeper] .bg-n-brand.hover\:enabled\:brightness-110:hover:enabled,
html[data-daykeeper]
  .bg-n-brand.focus-visible\:brightness-110:focus-visible:enabled {
  background-color: var(--dk-accent-hover);
  filter: none;
}

/* White labels on the accent: right on the black light-mode solid, invisible
 * on the white dark-mode one. Everywhere upstream pairs `text-white` with
 * bg-n-brand (buttons, calendar days, unread counts, the "unread messages"
 * pill, checkbox ticks) takes `--dk-on-accent` instead: white in light mode,
 * black in dark. */
html[data-daykeeper] .bg-n-brand.text-white,
html[data-daykeeper] .bg-n-brand .text-white {
  color: var(--dk-on-accent);
}

html[data-daykeeper] .checked\:bg-n-brand.after\:text-white:checked::after {
  color: var(--dk-on-accent);
}

/* The conversation list's unread count (UnreadBadge.vue) is the one teal solid
 * that marks attention rather than success, so it follows the accent. Matched
 * by its exact class set so success states that use teal keep their colour. */
html[data-daykeeper] .bg-n-teal-9.rounded-full.text-xxs.inline-grid {
  background-color: var(--dk-accent);
  color: var(--dk-on-accent);
}

/* Two component styles compile `@apply bg-n-brand` into a literal colour inside
 * a scoped block, where no utility override reaches: the primary banner
 * (Banner.vue) and the conversation context menu's hover (menuItem.vue, the
 * only `.menu` carrying `min-h-7`). */
html[data-daykeeper] .banner.primary {
  background-color: var(--dk-accent);
}

html[data-daykeeper] .banner.primary.text-white {
  color: var(--dk-on-accent);
}

html[data-daykeeper] .menu.min-h-7:hover {
  background-color: var(--dk-accent);
  color: var(--dk-on-accent);
}

/* Upstream puts white on the amber solid, which is about 1.9:1 and effectively
 * unreadable. Amber cannot be darkened enough to carry white and still be amber,
 * so this one button gets dark ink instead. */
html[data-daykeeper] .bg-n-amber-9.text-white {
  color: var(--dk-on-warning);
}

/* -- `woot-*`: the legacy compiled palette ------------------------------- */
/* Still used by the v3 login page, some settings screens and older widgets.
 * 500/600/700 are the blue ramp; 25/50 are its tint backgrounds. */

html[data-daykeeper] .text-woot-500,
html[data-daykeeper] .text-woot-600,
html[data-daykeeper] .hover\:text-woot-500:hover,
html[data-daykeeper] .dark .dark\:text-woot-500,
html[data-daykeeper] .dark .dark\:text-woot-50 {
  color: var(--dk-accent-text);
}

html[data-daykeeper] .hover\:text-woot-700:hover {
  color: var(--dk-accent-hover);
}

html[data-daykeeper] .bg-woot-500,
html[data-daykeeper] .bg-woot-400 {
  background-color: var(--dk-accent);
}

html[data-daykeeper] .hover\:bg-woot-600:hover {
  background-color: var(--dk-accent-hover);
}

html[data-daykeeper] .bg-woot-25,
html[data-daykeeper] .bg-woot-50 {
  background-color: var(--dk-accent-quiet);
}

html[data-daykeeper] .border-woot-500,
html[data-daykeeper] .focus\:border-woot-500:focus,
html[data-daykeeper] .dark .dark\:focus\:border-woot-500:focus {
  border-color: var(--dk-accent);
}

html[data-daykeeper] .outline-woot-500 {
  outline-color: var(--dk-ring);
}

html[data-daykeeper] .focus\:ring-woot-500:focus,
html[data-daykeeper] .dark .dark\:focus\:ring-woot-500:focus {
  --tw-ring-color: var(--dk-ring);
}

/* -- Quick-reply and form bubbles ---------------------------------------- */
/* Form.vue draws input_select and form messages (the workflow's quick-reply
 * menus) as a bare <span title> filled with the raw content, not through the
 * markdown FormattedContent a text bubble uses. Its newlines collapse, so a
 * multi-paragraph prompt reads as one run-on block. Keeping them restores the
 * line breaks the customer already sees in the widget; a URL alone on its line
 * then wraps instead of widening the thread. CSAT.vue reuses the same
 * data-bubble-name, but its body is a span.prose, which is left alone. The
 * span sits directly in Base.vue's root, which carries the attribute. */
html[data-daykeeper] [data-bubble-name="csat"] > span[title]:not(.prose) {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* -- Marks and illustrations --------------------------------------------- */

/* Both website marks are black: logomark.png is the filled mark and
 * logomark-white.png, despite its name, the black line art the website header
 * uses (workspace.js puts it in the sidebar). Chatwoot shows them on dark
 * grounds too (Logo.vue has no dark variant; LOGO_DARK is the line art), so on
 * a dark ground any Daykeeper mark is inverted rather than lost, as the
 * console does. */
html[data-daykeeper] .dark img[src*="/daykeeper/logomark"] {
  filter: invert(1);
}

/* The empty-state illustration is drawn in Chatwoot's blue-grey. */
html[data-daykeeper] img[src*="no-chat"] {
  filter: grayscale(1);
}

/* -- The injected "Daykeeper settings" sidebar leaf ---------------------- */
/* workspace.js copies SidebarGroupLeaf's own utility classes onto the link, so
 * it inherits the real leaf's metrics and hover. These :where() rules have zero
 * specificity and exist only so the leaf still looks right if a class it borrows
 * ever leaves the compiled bundle. */

:where(html[data-daykeeper] .dk-settings-row) {
  width: 100%;
  padding: 0 0.5rem 0.25rem;
}

:where(html[data-daykeeper] .dk-settings-row[data-collapsed="1"]) {
  display: flex;
  justify-content: center;
  padding: 0 0.25rem 0.25rem;
}

:where(html[data-daykeeper] .dk-settings-link) {
  align-items: center;
  border-radius: 0.5rem;
  color: rgb(var(--slate-11));
  display: flex;
  gap: 0.5rem;
  height: 2rem;
  min-width: 0;
  padding: 0.25rem 0.5rem;
  text-decoration: none;
}

:where(html[data-daykeeper] .dk-settings-link[data-collapsed="1"]) {
  justify-content: center;
  padding: 0.25rem;
  width: 2rem;
}

:where(html[data-daykeeper] .dk-settings-link:hover) {
  background-color: rgb(var(--slate-3));
  color: rgb(var(--slate-12));
}

:where(html[data-daykeeper] .dk-settings-label) {
  flex: 1 1 0%;
  font-size: 0.875rem;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

:where(html[data-daykeeper] .dk-settings-icon) {
  flex-shrink: 0;
}