/*
	Dark mode overrides for Milligram CSS framework
*/

html[data-theme='dark'] body {
	background-color: #121212;
	color: #e0e0e0;
}

/* Links */
html[data-theme='dark'] a {
	color: #81a1c1;
}
html[data-theme='dark'] a:hover,
html[data-theme='dark'] a:focus {
	color: #88c0d0;
}

/* Headings */
html[data-theme='dark'] h1,
html[data-theme='dark'] h2,
html[data-theme='dark'] h3,
html[data-theme='dark'] h4,
html[data-theme='dark'] h5,
html[data-theme='dark'] h6 {
	color: #ffffff;
}

/* Paragraphs and text content */
html[data-theme='dark'] p,
html[data-theme='dark'] ul,
html[data-theme='dark'] ol,
html[data-theme='dark'] blockquote {
	color: #cccccc;
}

/* Blockquotes */
html[data-theme='dark'] blockquote {
	border-left-color: #444444;
}

/* Code blocks and inline code */
html[data-theme='dark'] code {
	background: #1e1e1e;
	color: #f8f8f2;
}
html[data-theme='dark'] pre {
	background: #1e1e1e;
	color: #f8f8f2;
}

/* Forms */
html[data-theme='dark'] input,
html[data-theme='dark'] textarea,
html[data-theme='dark'] select {
	background-color: #1e1e1e;
	border: 1px solid #333333;
	color: #e0e0e0;
}
html[data-theme='dark'] input:focus,
html[data-theme='dark'] textarea:focus,
html[data-theme='dark'] select:focus {
	border-color: #555555;
	outline: none;
}
/* Tables */
html[data-theme='dark'] table {
	border-collapse: collapse;
}
html[data-theme='dark'] table th,
html[data-theme='dark'] table td {
	border: 1px solid #333333;
	padding: 0.5rem;
}
html[data-theme='dark'] table th {
	background-color: #1f1f1f;
	color: #ffffff;
}
html[data-theme='dark'] table tr:nth-child(even) {
	background-color: #1a1a1a;
}

/* Horizontal rule */
html[data-theme='dark'] hr {
	border-color: #333333;
}

/* Darkmode Toggle */
html[data-theme='light'] .toggle_darkmode.sun {
	display:none;
}

html[data-theme='dark'] .toggle_darkmode.moon {
	display:none;
}

/* Miscellaneous utilities */
html[data-theme='dark'] .container {
	background-color: transparent;
}
html[data-theme='dark'] .label {
	background-color: #333333;
	color: #e0e0e0;
}


body.loading {
	cursor:wait;
}

a[disabled], .button[disabled], textarea[disabled] {
	opacity:0.30;
	pointer-events:none;
}

.feather {
	width: 24px;
	height: 24px;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
	fill: none;
}

.pulsate {
	animation: pulsate 1s ease-in-out infinite;
	backface-visibility: hidden;
}

@keyframes pulsate {
	0% {
		transform: scale(1);
		opacity: 1;
	}
	50% {
		transform: scale(1.1);
		opacity: 0.85;
	}
	100% {
		transform: scale(1);
		opacity: 1;
	}
}







/*
.btn-pulse {
	animation: Pulsate 1s ease-in-out infinite;
	backface-visibility: hidden;
}
*/