.x1-theme-toggle-wrap {
	display: flex;
	width: 100%;
}

.x1-theme-toggle-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	appearance: none;
	font: inherit;
	background: transparent;
	color: var(--color-text);
    padding: 0px;
	border-radius: 999px;
	cursor: pointer;
	transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
    border: none;
}

.x1-theme-toggle-button:hover,
.x1-theme-toggle-button:focus {
	background-color: color-mix(in srgb, var(--color-accent) 10%, transparent);
	outline: none;
}

.x1-theme-toggle-button .x1-theme-toggle-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
}

.x1-theme-toggle-button .x1-theme-toggle-icon img {
	display: block;
	width: 20px;
	height: 20px;
	object-fit: contain;
}

.x1-theme-toggle-button .x1-theme-toggle-icon svg {
	display: block;
	width: 20px;
	height: 20px;
}

.x1-theme-toggle-button .x1-theme-toggle-icon svg,
.x1-theme-toggle-button .x1-theme-toggle-icon svg * {
	fill: currentColor;
	stroke: currentColor;
}

.x1-theme-toggle-button .x1-theme-toggle-icon i {
	font-size: 20px;
}

.x1-theme-toggle-button .x1-theme-toggle-icon--light,
.x1-theme-toggle-button .x1-theme-toggle-icon--dark {
	display: none;
}

.x1-theme-toggle-button[data-theme='light'] .x1-theme-toggle-icon--light,
.x1-theme-toggle-button[data-theme='dark'] .x1-theme-toggle-icon--dark {
	display: inline-flex;
}

.x1-theme-toggle-button[data-display-mode='icon_only'] .x1-theme-toggle-text {
	display: none;
}

.x1-theme-toggle-button[data-display-mode='text_only'] .x1-theme-toggle-icon {
	display: none !important;
}

.x1-theme-toggle-button[data-display-mode='text_only'] {
	padding-inline: 0.9rem;
}