/* Persistent light mode overrides. Dark mode remains the default. */
:root {
	--niki-bg: #1c1c1c;
	--niki-accent: #1fb8b3;
	--niki-text: #f5f5f5;
	--niki-surface: #292929;
	--niki-footer-bg: #322a3d;
}

:root[data-theme="light"] {
	color-scheme: light;
	--niki-bg: #edeff0;
	--niki-accent: #805db6;
	--niki-text: #25212b;
	--niki-surface: #f5f5f5;
	--niki-surface-raised: #fff;
	--niki-border: rgb(37 33 43 / 16%);
	--niki-footer-bg: rgb(134 206 203 / 72%);
	--niki-header-gradient: linear-gradient(135deg, rgb(31 184 179 / 52%), rgb(28 28 28 / 72%));
}

:root[data-theme="light"] body,
:root[data-theme="light"] .demo,
:root[data-theme="light"] .values-section.section,
:root[data-theme="light"] .portfolio-tabs-section,
:root[data-theme="light"] .featured-content-section,
:root[data-theme="light"] .clients-section,
:root[data-theme="light"] .faq-section,
:root[data-theme="light"] .contact-section,
:root[data-theme="light"] .niki-faq,
:root[data-theme="light"] .niki-contact,
:root[data-theme="light"] .featured-content,
:root[data-theme="light"] .clients-slider,
:root[data-theme="light"] .demo.portfolio-tabs-section,
:root[data-theme="light"] .archive-service.section-main,
:root[data-theme="light"] .archive-service .section-main__intro,
:root[data-theme="light"] .archive-service .section-main__aside,
:root[data-theme="light"] .archive-service .section-main__intro > .works {
	background-color: var(--niki-bg) !important;
	color: var(--niki-text);
}

:root[data-theme="light"] .clients-slider[style*="background-color"],
:root[data-theme="light"] .featured-content[style*="background-color"] {
	background-color: var(--niki-bg) !important;
}

:root[data-theme="light"] .clients-slider.demo.bg-medium {
	background: var(--niki-bg) !important;
}

/* Keep the category artwork and tinted backdrop visible on portfolio archives in light mode. */
:root[data-theme="light"] .archive-service .intro__media {
	background: #1c1c1c;
}

:root[data-theme="light"] .archive-service .intro__category-background {
	color: rgb(255 255 255 / 19%);
}

:root[data-theme="light"] .archive-service .intro__category-background img {
	opacity: .26;
	filter: saturate(.8);
}

:root[data-theme="light"] .archive-service .color-layer-dark {
	background: rgb(237 239 240 / 58%);
}

:root[data-theme="light"] .archive-service .section-main__intro > .works {
	background: rgb(255 255 255 / 16%) !important;
}

:root[data-theme="light"] .archive-service .archive-service__aside.section-main__aside {
	background: transparent !important;
}

:root[data-theme="light"] .archive-service .archive-service__aside .aside__content {
	border-color: rgb(37 33 43 / 10%);
	background: linear-gradient(155deg, rgb(255 255 255 / 94%), rgb(244 247 248 / 92%));
	box-shadow: 0 1.2rem 3rem rgb(37 33 43 / 9%), inset 0 1px 0 rgb(255 255 255 / 85%);
}

:root[data-theme="light"] .archive-service .archive-service__aside .aside__title,
:root[data-theme="light"] .archive-service .archive-service__aside .meta-item,
:root[data-theme="light"] .archive-service .archive-service__aside .meta-item strong {
	color: var(--niki-text) !important;
}

:root[data-theme="light"] .archive-service .archive-service__aside .archive-service__category-logo .custom-logo-link {
	border-color: rgb(37 33 43 / 10%);
	background: linear-gradient(145deg, #fff, rgb(134 206 203 / 18%));
}

:root[data-theme="light"] .archive-service .archive-service__aside .archive-service__filter-list a {
	color: #393344 !important;
}

:root[data-theme="light"] .archive-service .archive-service__aside .archive-service__filter-list a:hover,
:root[data-theme="light"] .archive-service .archive-service__aside .archive-service__filter-list a:focus-visible {
	border-color: rgb(128 93 182 / 18%);
	background: rgb(128 93 182 / 9%);
	color: #68469c !important;
}

:root[data-theme="light"] .archive-service .archive-service__aside .article-search__field {
	border-color: rgb(37 33 43 / 12%);
	background: rgb(237 239 240 / 75%);
}

:root[data-theme="light"] .archive-service .archive-service__aside .article-search__field input[type="search"] {
	color: var(--niki-text) !important;
}

:root[data-theme="light"] .archive-service .archive-service__aside .article-search__field input::placeholder {
	color: rgb(37 33 43 / 55%) !important;
}

:root[data-theme="light"] .portfolio-single .archive-service__aside .aside__meta {
	border-color: rgb(37 33 43 / 10%);
	background: rgb(128 93 182 / 6%);
}

:root[data-theme="light"] .portfolio-single .archive-service__aside .portfolio-order {
	border-color: rgb(37 33 43 / 12%);
}

:root[data-theme="light"] .clients-slider .category-section-copy .headline__title,
:root[data-theme="light"] .clients-slider .category-section-copy .headline__subtitle {
	color: #000 !important;
}

:root[data-theme="light"] .values-section__heading .headline__subtitle,
:root[data-theme="light"] .values-section__heading .headline__title,
:root[data-theme="light"] .headline__title,
:root[data-theme="light"] .headline__subtitle,
:root[data-theme="light"] .headline__description,
:root[data-theme="light"] .inner__text,
:root[data-theme="light"] .aside__title,
:root[data-theme="light"] .demo,
:root[data-theme="light"] .demo__headline,
:root[data-theme="light"] .category-section-copy,
:root[data-theme="light"] .niki-faq__title,
:root[data-theme="light"] .niki-faq__intro,
:root[data-theme="light"] .niki-faq__eyebrow,
:root[data-theme="light"] .niki-contact__title,
:root[data-theme="light"] .niki-contact__intro,
:root[data-theme="light"] .niki-contact__eyebrow,
:root[data-theme="light"] .niki-contact__item,
:root[data-theme="light"] .niki-contact__item strong,
:root[data-theme="light"] .niki-contact__item span,
:root[data-theme="light"] .archive-service .intro__headline,
:root[data-theme="light"] .archive-service .intro__headline a {
	color: var(--niki-text) !important;
}

:root[data-theme="light"] .portfolio-single .portfolio-single__body,
:root[data-theme="light"] .portfolio-single .portfolio-single__body p,
:root[data-theme="light"] .portfolio-single .portfolio-single__body li,
:root[data-theme="light"] .portfolio-single .portfolio-single__body blockquote,
:root[data-theme="light"] .portfolio-single .headline__description,
:root[data-theme="light"] .portfolio-single .article-card__content time,
:root[data-theme="light"] .portfolio-single .article-card__content h3,
:root[data-theme="light"] .portfolio-single .portfolio-order > p,
:root[data-theme="light"] .portfolio-single .portfolio-order__form label,
:root[data-theme="light"] .article-single .portfolio-single__body,
:root[data-theme="light"] .article-single .portfolio-single__body p,
:root[data-theme="light"] .article-single .portfolio-single__body li,
:root[data-theme="light"] .article-single .portfolio-single__body blockquote,
:root[data-theme="light"] .article-single .article-card__content time,
:root[data-theme="light"] .article-single .article-card__content h3 {
	color: var(--niki-text) !important;
}

:root[data-theme="light"] .portfolio-single .headline__title,
:root[data-theme="light"] .portfolio-single .portfolio-single__body h2,
:root[data-theme="light"] .portfolio-single .portfolio-single__body h3,
:root[data-theme="light"] .portfolio-single .portfolio-single__body h4,
:root[data-theme="light"] .portfolio-single .article-section-heading h2,
:root[data-theme="light"] .portfolio-single .article-card__content h3 a,
:root[data-theme="light"] .portfolio-single .article-comments > h2,
:root[data-theme="light"] .portfolio-single .article-comments .comment-body,
:root[data-theme="light"] .portfolio-single .article-comments .comment-respond,
:root[data-theme="light"] .article-single .portfolio-single__body h2,
:root[data-theme="light"] .article-single .portfolio-single__body h3,
:root[data-theme="light"] .article-single .portfolio-single__body h4,
:root[data-theme="light"] .article-single .article-section-heading h2,
:root[data-theme="light"] .article-single .article-card__content h3 a {
	color: var(--niki-text) !important;
}

:root[data-theme="light"] .article-archive .article-archive__grid .my-gallery__descr h2,
:root[data-theme="light"] .article-archive .article-archive__grid .my-gallery__descr h2 a,
:root[data-theme="light"] .article-archive .article-archive__grid .my-gallery__descr p,
:root[data-theme="light"] .article-archive .article-archive__grid .article-archive__date {
	color: var(--niki-text) !important;
}

:root[data-theme="light"] .article-archive .article-archive__all a { border-color: var(--niki-border); color: var(--niki-text); }

:root[data-theme="light"] .article-archive .pagination .page-numbers {
	border-color: var(--niki-border);
	color: var(--niki-text);
}

:root[data-theme="light"] .article-archive .pagination .page-numbers.current {
	border-color: var(--niki-accent);
	background: var(--niki-accent);
	color: #fff;
}

:root[data-theme="light"] .portfolio-single .headline__description,
:root[data-theme="light"] .portfolio-single .headline__description p,
:root[data-theme="light"] .portfolio-single .article-search > label,
:root[data-theme="light"] .article-single .article-search > label,
:root[data-theme="light"] .portfolio-single .article-search__field input[type="search"],
:root[data-theme="light"] .article-single .article-search__field input[type="search"],
:root[data-theme="light"] .portfolio-single .portfolio-order__form label,
:root[data-theme="light"] .portfolio-single .portfolio-order__form input,
:root[data-theme="light"] .portfolio-single .portfolio-order__form textarea,
:root[data-theme="light"] .portfolio-single .portfolio-order > p {
	color: var(--niki-text) !important;
}

:root[data-theme="light"] .portfolio-single .article-search__field input[type="search"],
:root[data-theme="light"] .article-single .article-search__field input[type="search"],
:root[data-theme="light"] .portfolio-single .portfolio-order__form input,
:root[data-theme="light"] .portfolio-single .portfolio-order__form textarea {
	border-color: var(--niki-border) !important;
	background: var(--niki-surface-raised, #fff) !important;
}

:root[data-theme="light"] .portfolio-single .headline__description p,
:root[data-theme="light"] .portfolio-single .article-search__field input::placeholder,
:root[data-theme="light"] .article-single .article-search__field input::placeholder,
:root[data-theme="light"] .portfolio-single .portfolio-order__form input::placeholder,
:root[data-theme="light"] .portfolio-single .portfolio-order__form textarea::placeholder {
	color: rgb(37 33 43 / 68%) !important;
}

:root[data-theme="light"] .portfolio-single .article-card,
:root[data-theme="light"] .article-single .article-card {
	border-color: var(--niki-border);
	background: var(--niki-surface-raised, #fff);
}

:root[data-theme="light"] .portfolio-single .portfolio-single__body,
:root[data-theme="light"] .article-single .portfolio-single__body,
:root[data-theme="light"] .portfolio-single .article-related,
:root[data-theme="light"] .article-single .article-related,
:root[data-theme="light"] .portfolio-single .article-comments,
:root[data-theme="light"] .article-single .article-comments {
	border-color: var(--niki-border);
}

:root[data-theme="light"] .portfolio-single .portfolio-order__form input,
:root[data-theme="light"] .portfolio-single .portfolio-order__form textarea,
:root[data-theme="light"] .portfolio-single .article-search__field input[type="search"],
:root[data-theme="light"] .article-single .article-search__field input[type="search"],
:root[data-theme="light"] .portfolio-single .article-comments input:not([type="submit"]),
:root[data-theme="light"] .portfolio-single .article-comments textarea,
:root[data-theme="light"] .article-single .article-comments input:not([type="submit"]),
:root[data-theme="light"] .article-single .article-comments textarea {
	border-color: var(--niki-border);
	background: var(--niki-surface-raised, #fff);
	color: var(--niki-text);
}

:root[data-theme="light"] .portfolio-single .portfolio-order__form input::placeholder,
:root[data-theme="light"] .portfolio-single .portfolio-order__form textarea::placeholder,
:root[data-theme="light"] .portfolio-single .article-search__field input::placeholder,
:root[data-theme="light"] .article-single .article-search__field input::placeholder {
	color: rgb(37 33 43 / 58%);
}

:root[data-theme="light"] .portfolio-single .article-comments .comment-meta,
:root[data-theme="light"] .article-single .article-comments .comment-meta {
	color: var(--niki-text);
}

:root[data-theme="light"] .intro__header,
:root[data-theme="light"] .intro__header.scrolled,
:root[data-theme="light"] .archive-service .intro__header,
:root[data-theme="light"] .archive-service .intro__header.scrolled {
	background: var(--niki-header-gradient) !important;
}

:root[data-theme="light"] a:not(.works-link):not(.custom-logo-link),
:root[data-theme="light"] .portfolio-category-tab.is-active {
	color: var(--niki-accent);
}

:root[data-theme="light"] .portfolio-tabs-section .category-section-link,
:root[data-theme="light"] .demo .archive-service__post-link,
:root[data-theme="light"] .archive-service .archive-service__post-link,
:root[data-theme="light"] .archive-service .archive-service__filter-list a,
:root[data-theme="light"] .archive-service .archive-service__filter-list a:hover,
:root[data-theme="light"] .archive-service .archive-service__filter-list a:focus-visible {
	color: #fff !important;
}

:root[data-theme="light"] .portfolio-category-panel__heading .category-section-link,
:root[data-theme="light"] .portfolio-category-panel__heading .category-section-link:hover,
:root[data-theme="light"] .portfolio-category-panel__heading .category-section-link:focus-visible {
	color: var(--niki-accent) !important;
}

:root[data-theme="light"] .portfolio-category-panel,
:root[data-theme="light"] .values-section__entry,
:root[data-theme="light"] .archive-service .aside__content,
:root[data-theme="light"] .demo .my-gallery__item,
:root[data-theme="light"] .archive-service .my-gallery__item,
:root[data-theme="light"] .featured-content__link,
:root[data-theme="light"] .niki-contact__item,
:root[data-theme="light"] .niki-faq__item {
	background-color: var(--niki-bg);
}

:root[data-theme="light"] .portfolio-category-tab,
:root[data-theme="light"] .portfolio-category-tab:hover,
:root[data-theme="light"] .portfolio-category-tab.is-active {
	border-color: #1fb8b3;
}

:root[data-theme="light"] .portfolio-category-tab,
:root[data-theme="light"] .portfolio-category-tab .portfolio-category-tab__label,
:root[data-theme="light"] .portfolio-category-panel__heading,
:root[data-theme="light"] .demo .my-gallery__descr,
:root[data-theme="light"] .archive-service .my-gallery__descr,
:root[data-theme="light"] .archive-service .aside__title,
:root[data-theme="light"] .archive-service .archive-service__filter-list a,
:root[data-theme="light"] .featured-content__details h3,
:root[data-theme="light"] .featured-content__details p {
	color: var(--niki-text) !important;
}

:root[data-theme="light"] .niki-footer__link-list,
:root[data-theme="light"] .niki-footer__link-list li,
:root[data-theme="light"] .niki-footer__link-list a {
	color: #fff !important;
}

:root[data-theme="light"] .portfolio-category-tab .portfolio-category-tab__label {
	color: #000 !important;
}

:root[data-theme="light"] .clients-slider .client-caption,
:root[data-theme="light"] .clients-slider .client-caption p {
	color: #25212b !important;
}

:root[data-theme="light"] .intro__header .desktop-nav .main-menu a,
:root[data-theme="light"] .intro__header .desktop-nav .main-menu a:hover,
:root[data-theme="light"] .intro__header .desktop-nav .main-menu .current-menu-item > a {
	color: #fff !important;
}

.intro__header .desktop-nav .main-menu .sub-menu {
	min-width: 20rem;
	padding: .8rem;
	border: 1px solid rgb(255 255 255 / 18%);
	border-radius: 1rem;
	background: rgb(50 42 61 / 96%);
	box-shadow: 0 1.2rem 3rem rgb(0 0 0 / 28%);
	-webkit-backdrop-filter: blur(16px) saturate(150%);
	backdrop-filter: blur(16px) saturate(150%);
}

.intro__header .desktop-nav .main-menu .sub-menu a {
	padding: .9rem 1.2rem;
	border-radius: .6rem;
	color: #fff !important;
	line-height: 1.5;
	transition: background-color .2s ease, color .2s ease;
}

.intro__header .desktop-nav .main-menu .sub-menu a:hover,
.intro__header .desktop-nav .main-menu .sub-menu a:focus-visible {
	background: rgb(255 255 255 / 12%);
	color: #86cecb !important;
}

:root[data-theme="light"] .intro__header .desktop-nav .main-menu .sub-menu {
	border-color: rgb(37 33 43 / 12%);
	background: rgb(255 255 255 / 96%);
	box-shadow: 0 1.2rem 3rem rgb(37 33 43 / 18%);
}

:root[data-theme="light"] .intro__header .desktop-nav .main-menu .sub-menu a {
	color: #25212b !important;
}

:root[data-theme="light"] .intro__header .desktop-nav .main-menu .sub-menu a:hover,
:root[data-theme="light"] .intro__header .desktop-nav .main-menu .sub-menu a:focus-visible {
	background: rgb(128 93 182 / 10%);
	color: #805db6 !important;
}

:root[data-theme="light"] .niki-faq__item,
:root[data-theme="light"] .niki-contact__item,
:root[data-theme="light"] .demo .my-gallery__item,
:root[data-theme="light"] .archive-service .my-gallery__item {
	border-color: var(--niki-border);
}

:root[data-theme="light"] .niki-faq__item {
	background: linear-gradient(135deg, rgb(128 93 182 / 12%), rgb(237 239 240 / 92%)) padding-box,
		linear-gradient(90deg, #805db6, #1fb8b3, #805db6) border-box;
	background-size: 100% 100%, 200% 200%;
	animation: niki-faq-border-rotate 3s linear infinite;
}

:root[data-theme="light"] .niki-faq__item:has(.niki-faq__question:not(.collapsed)),
:root[data-theme="light"] .niki-faq__item:focus-within {
	background: linear-gradient(135deg, rgb(128 93 182 / 18%), rgb(237 239 240 / 96%)) padding-box,
		linear-gradient(90deg, #805db6, #1fb8b3, #805db6) border-box;
	background-size: 100% 100%, 200% 200%;
	animation: niki-faq-border-rotate 3s linear infinite;
}

:root[data-theme="light"] .niki-faq__item:has(.niki-faq__question:not(.collapsed)) .niki-faq__question,
:root[data-theme="light"] .niki-faq__item:focus-within .niki-faq__question {
	background-color: transparent;
}

:root[data-theme="light"] .niki-faq__question::after {
	filter: none;
}

:root[data-theme="light"] .niki-faq__question:focus {
	box-shadow: inset 0 0 0 2px rgb(128 93 182 / 35%);
}

:root[data-theme="light"] .niki-faq__question,
:root[data-theme="light"] .accordion-button.niki-faq__question,
:root[data-theme="light"] .niki-faq__answer,
:root[data-theme="light"] .wpcf7 input:not([type="submit"]),
:root[data-theme="light"] .wpcf7 textarea,
:root[data-theme="light"] .wpcf7 select,
:root[data-theme="light"] .niki-contact__form input:not([type="submit"]),
:root[data-theme="light"] .niki-contact__form textarea,
:root[data-theme="light"] .niki-contact__form select {
	background-color: var(--niki-surface-raised);
	color: var(--niki-text);
}

:root[data-theme="light"] .niki-contact__form p,
:root[data-theme="light"] .niki-contact__form label,
:root[data-theme="light"] .niki-faq__question,
:root[data-theme="light"] .niki-faq__answer {
	color: var(--niki-text) !important;
}

:root[data-theme="light"] .niki-contact__item-icon,
:root[data-theme="light"] .niki-faq__item:hover {
	color: var(--niki-accent);
}

:root[data-theme="light"] .niki-contact__form input:focus,
:root[data-theme="light"] .niki-contact__form textarea:focus,
:root[data-theme="light"] .niki-contact__form select:focus {
	border-color: var(--niki-accent);
	outline-color: rgb(128 93 182 / 25%);
}

:root[data-theme="light"] .niki-contact__item,
:root[data-theme="light"] .niki-contact__form {
	background: linear-gradient(135deg, rgb(128 93 182 / 12%), rgb(237 239 240 / 92%));
	border-color: rgb(128 93 182 / 24%);
}

:root[data-theme="light"] .niki-contact__item:hover {
	border-color: var(--niki-accent);
	color: var(--niki-text);
}

:root[data-theme="light"] .niki-contact__form input[type="submit"],
:root[data-theme="light"] .niki-contact__form button {
	border-color: var(--niki-accent);
	background-color: var(--niki-accent);
	color: #fff;
}

:root[data-theme="light"] footer.niki-footer,
:root[data-theme="light"] .niki-footer {
	background: var(--niki-footer-bg) !important;
	background-color: var(--niki-footer-bg) !important;
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
	border-top: 1px solid rgb(255 255 255 / 38%);
	box-shadow: 0 -8px 28px rgb(37 33 43 / 8%), inset 0 1px 0 rgb(255 255 255 / 35%);
	color: var(--niki-text) !important;
}

:root[data-theme="light"] .niki-footer .niki-footer__brand,
:root[data-theme="light"] .niki-footer .niki-footer__heading,
:root[data-theme="light"] .niki-footer p,
:root[data-theme="light"] .niki-footer li,
:root[data-theme="light"] .niki-footer__bottom p {
	color: #fff !important;
}

:root[data-theme="light"] .niki-footer .niki-footer__link,
:root[data-theme="light"] .niki-footer .niki-footer__social-link,
:root[data-theme="light"] .niki-footer .niki-footer__link:hover,
:root[data-theme="light"] .niki-footer .niki-footer__link:focus-visible,
:root[data-theme="light"] .niki-footer .niki-footer__social-link:hover,
:root[data-theme="light"] .niki-footer .niki-footer__social-link:focus-visible {
	color: #fff !important;
}

:root[data-theme="light"] .niki-footer .niki-footer__divider {
	border-color: rgb(37 33 43 / 20%);
}

:root[data-theme="light"] .niki-footer__logo .logo-link,
:root[data-theme="light"] .niki-footer__logo .custom-logo-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

:root[data-theme="light"] .niki-footer__logo img {
	filter: brightness(0) saturate(100%) invert(12%) sepia(13%) saturate(1260%) hue-rotate(218deg) brightness(94%) contrast(92%);
}

:root[data-theme="light"] .featured-content__badge {
	background-color: var(--niki-accent);
}

:root[data-theme="light"] .featured-content__link:hover .featured-content__details p,
:root[data-theme="light"] .featured-content__link:focus-visible .featured-content__details p {
	color: #fff !important;
}

:root[data-theme="light"] .values-section__entry:before {
	background: linear-gradient(to bottom, transparent 12%, rgb(0 0 0 / 65%) 100%);
}

:root[data-theme="light"] .values-section__featured,
:root[data-theme="light"] .demo .works-image--empty,
:root[data-theme="light"] .archive-service .works-image--empty {
	background: linear-gradient(135deg, rgb(31 184 179 / 52%), rgb(28 28 28 / 72%));
}

:root[data-theme="light"] .demo .archive-service__post-link,
:root[data-theme="light"] .archive-service .archive-service__post-link {
	border-color: var(--niki-accent);
	background-color: var(--niki-accent);
	color: #fff !important;
}

:root[data-theme="light"] .archive-service .button-solid-light {
	border-color: var(--niki-accent);
	background-color: var(--niki-accent);
}

:root[data-theme="light"] .archive-service .archive-service__filter-list a {
	color: var(--niki-text) !important;
}

.theme-mode-toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	width: 6.8rem;
	height: 3.6rem;
	margin-inline-start: auto;
	flex: 0 0 auto;
	padding: .35rem;
	border: 1px solid rgb(255 255 255 / 25%);
	border-radius: 999px;
	background: linear-gradient(135deg, rgb(16 28 48 / 88%), rgb(34 31 58 / 82%));
	box-shadow: 0 5px 18px rgb(8 14 30 / 28%), inset 0 1px 1px rgb(255 255 255 / 18%), 0 0 14px rgb(128 93 182 / 22%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);
	backdrop-filter: blur(14px) saturate(160%);
	cursor: pointer;
	transition: background .35s ease, border-color .35s ease, box-shadow .35s ease;
}

.theme-mode-toggle::after {
	position: absolute;
	top: 50%;
	right: .9rem;
	width: .3rem;
	height: .3rem;
	border-radius: 50%;
	background: #fff;
	box-shadow: -1.1rem .7rem 0 -0.05rem rgb(255 255 255 / 78%), -1.7rem -.7rem 0 -0.05rem rgb(185 169 255 / 85%);
	content: '';
	transform: translateY(-50%);
	transition: opacity .25s ease;
}

.theme-mode-toggle__thumb {
	position: relative;
	z-index: 1;
	display: grid;
	width: 2.8rem;
	height: 2.8rem;
	place-items: center;
	border: 1px solid rgb(255 255 255 / 52%);
	border-radius: 50%;
	background: linear-gradient(145deg, rgb(255 255 255 / 28%), rgb(255 255 255 / 8%));
	color: #d9d2ff;
	box-shadow: 0 2px 8px rgb(0 0 0 / 22%), inset 0 1px 2px rgb(255 255 255 / 35%);
	font-size: 1.35rem;
	transition: transform .35s cubic-bezier(.2,.8,.2,1), color .35s ease, background .35s ease, box-shadow .35s ease;
}

.theme-mode-toggle:hover,
.theme-mode-toggle:focus-visible {
	border-color: var(--niki-accent);
	outline: 2px solid rgb(31 184 179 / 30%);
	outline-offset: 2px;
	box-shadow: 0 6px 20px rgb(8 14 30 / 30%), inset 0 1px 1px rgb(255 255 255 / 22%), 0 0 18px rgb(31 184 179 / 28%);
}

:root[data-theme="light"] .theme-mode-toggle {
	justify-content: flex-end;
	border-color: rgb(255 255 255 / 85%);
	background: linear-gradient(135deg, rgb(255 255 255 / 82%), rgb(235 247 248 / 74%));
	box-shadow: 0 5px 18px rgb(43 72 90 / 14%), inset 0 1px 1px #fff, 0 0 16px rgb(31 184 179 / 14%), 0 0 20px rgb(128 93 182 / 10%);
}

:root[data-theme="light"] .theme-mode-toggle::after {
	opacity: 0;
}

:root[data-theme="light"] .theme-mode-toggle__thumb {
	border-color: rgb(255 255 255 / 92%);
	background: linear-gradient(145deg, #fff4bf, #ffd45e);
	color: #e99b18;
	box-shadow: 0 2px 10px rgb(226 166 49 / 30%), inset 0 1px 2px rgb(255 255 255 / 95%), 0 0 12px rgb(255 205 79 / 38%);
}

@media (max-width: 575.98px) {
	.theme-mode-toggle { width: 6rem; height: 3.3rem; }
	.theme-mode-toggle__thumb { width: 2.5rem; height: 2.5rem; }
}