/* ElectronThemes.css */

.theme-electron-cyan {
	--color: cyan;
	--card-background: #00111155;
	--card-border-color: cyan;
	--card-glow: cyan;
	--anchor-color: #FFFFFF88;
	--anchor-hover: #EFFFFFFF;
}

/* Base theme */
.electron-base {
	font-family: monospace;
	color: var(--color);
}

/* General borders */
.electron-card {
	border-radius: 8px;
	border: 1px solid var(--card-border-color);
	background: var(--card-background);
}

/* Links */
.electron-a {
	color: var(--anchor-color);
	text-decoration: none;
	position: relative;
	transition: 0.2s
}

/* hover effect */
.electron-a:hover {
	color: var(--anchor-hover);
}

.electron-list-item {
	position: relative;
	padding: 12px 16px;
	color: var(--anchor-color);
	display: flex;
	align-items: center;
	gap: 10px;
	justify-content: space-between;
	transition: 0.1s;
}
.electron-list-item .right {
	display: flex;
	align-items: center;
	gap: 10px;
	color: inherit;
}
.electron-list-item .right svg {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
}
.electron-list-item:hover {
	color: var(--anchor-hover);
}

.electron-list-item::before,
.electron-list-item::after {
	content: "";
	position: absolute;
	left: 0;
	width: 100%;
	height: 1px;

	background: var(--anchor-color); 
	transition: background 0.25s ease;
}

.electron-list-item::before {
	top: 0;
}
.electron-list-item::after {
	bottom: 0;
}
.electron-list-item:hover::before,
.electron-list-item:hover::after {
	background: var(--anchor-hover);
}

.electron-scrollbar {
    overflow: auto;
}
.electron-scrollbar::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
.electron-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}
.electron-scrollbar::-webkit-scrollbar-thumb {
    background: var(--anchor-color);
    border-radius: 8px;
    transition: background 0.2s ease;
}
.electron-scrollbar::-webkit-scrollbar-thumb:hover {
    background: var(--anchor-hover);
}