@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

	/* festive */
  :root {
    --bg: 240 240 240;
		--bg-active: 233 233 233;
    --bg-secondary: 52 58 64;
		--bg-accent:  250 250 250;
		--text-secondary: 128 128 128;
		--text-secondary-active: 255 255 255;
		--border: 212 212 212;
		--border-active : 180 180 180;
		--border-secondary: 187 187 187;
		--text: 33 37 41;
		--link: 0 123 255;
		--link-active: 0 86 179;
		--button-text: 255 255 255;
		--button-text-secondary: 33 37 41;
		--button-primary: 8 119 21;
		--button-primary-active : 0 75 13;
		--button-danger: 188 21 37;
		--button-danger-active: 139 0 0;
		--button-accent: 0 123 255;
		--button-accent-active: 0 86 179;
		--button-secondary: 108 117 125;
		--button-secondary-active: 74 80 87;
		--focus-ring: 3 102 214;
		--advert: 251 241 185;
		--article : 116 198 135;
		--podcast: 64 154 191;
		--video: 254 66 66;
		--card-white: 255 255 235;
		--card-blue:  212 237 255;
		--card-black: 214 204 214;
		--card-red: 255 200 200;
		--card-green: 233 255 212;
		--card-multi: 252 248 169;
		--card-colorless: 233 231 235;
		--card-lands: 255 224 192;
  }

	:root[class~="light"] {
    --bg: 240 240 240;
		--bg-active: 233 233 233;
    --bg-secondary: 52 58 64;
		--bg-accent:  250 250 250;
		--text-secondary: 128 128 128;
		--text-secondary-active: 255 255 255;
		--border: 212 212 212;
		--border-active : 180 180 180;
		--border-secondary: 187 187 187;
		--text: 33 37 41;
		--link: 0 123 255;
		--link-active: 0 86 179;
		--button-text: 255 255 255;
		--button-text-secondary: 33 37 41;
		--button-primary: 8 119 21;
		--button-primary-active : 0 75 13;
		--button-danger: 188 21 37;
		--button-danger-active: 139 0 0;
		--button-accent: 0 123 255;
		--button-accent-active: 0 86 179;
		--button-secondary: 108 117 125;
		--button-secondary-active: 74 80 87;
		--focus-ring: 3 102 214;
		--advert: 251 241 185;
		--article : 116 198 135;
		--podcast: 64 154 191;
		--video: 254 66 66;
		--card-white: 255 255 235;
		--card-blue:  212 237 255;
		--card-black: 214 204 214;
		--card-red: 255 200 200;
		--card-green: 233 255 212;
		--card-multi: 252 248 169;
		--card-colorless: 233 231 235;
		--card-lands: 255 224 192;
  }

  :root[class~="dark"] {
    --bg: 52 58 64;
		--bg-active: 74 80 87;
		--bg-accent: 63 69 76;
    --bg-secondary: 36 41 46;
		--text-secondary: 128 128 128;
		--text-secondary-active: 255 255 255;
		--border: 45 51 56;
		--border-active: 17 12 16;
		--border-secondary: 109 120 130;
		--text: 240 240 240;
		--link: 50 166 255;
		--link-active: 120 200 255;
		--button-text: 255 255 255;
		--button-text-secondary: 33 37 41;
		--button-primary: 40 167 67;
		--button-primary-active: 51 127 68;
		--button-danger: 220 53 69;
		--button-danger-active: 139 0 0;
		--button-accent: 13 110 253;
		--button-accent-active: 11 94 215;
		--button-secondary: 108 117 125;
		--button-secondary-active: 74 80 87;
		--focus-ring: 3 102 214;
		--advert: 91 90 64;
		--article: 116 198 135;
		--podcast: 64 154 191;
		--video: 254 66 66;		
		--card-white: 95 95 75;
		--card-blue: 52 77 95;
		--card-black: 69 63 82;
		--card-red: 95 56 68;
		--card-green: 73 95 52;
		--card-multi: 92 88 9;
		--card-colorless: 60 58 64;
		--card-lands: 95 58 36;
		color-scheme: dark;
  }
}

.dropdown-toggle::after {
	display: inline-block;
	margin-left: 0.255em;
	vertical-align: 0.255em;
	content: "";
	border-top: 0.3em solid;
	border-right: 0.3em solid transparent;
	border-bottom: 0;
	border-left: 0.3em solid transparent;
}

div.advertisement-div > div:not(.report-link) {
	height: 100% !important
}

.advertisement-div {
	height: 100%;
}

.centered {
	display: flex;
	justify-content: center;
	align-items: center;
}

#autocardPopup {
	position: absolute;
	pointer-events: none;
	user-select: none;
	-moz-user-select: none;
	-webkit-user-drag: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	border-radius: 10px;
	overflow: hidden;
}

#autocardPopup img {
	width: 15rem;
}

#autocardPopup {
	width: 15rem;
}

#autocardPopup.double-width {
	width: 30rem;
}

.autocard-background {
	background-clip: content-box;
}

@media (max-width: 767.98px) {
	#autocardPopup {
		display: none !important;
	}
}


/* make autocard text more obvious in comments and descriptions */
.card-text .autocard {
	font-weight: bolder;
	opacity: 0.9; /* hack to lighten the color so bold isn't quite so strong */
}

.foilOverlay {
	position: absolute;
	pointer-events: none;
	width: 100%;
	height: 100%;
	mix-blend-mode: multiply;
}

.card-border {
	border-radius: 4.72% / 3.37%;
}

.profile-thumbnail {
	border-radius: 50%;
	object-fit: cover;
	width: 60px;
	height: 60px;
	min-width: 60px;
	min-height: 60px;
	float: left;
	box-shadow: -1px 0 var(--text), 0 1px var(--text), 1px 0 var(--text), 0 -1px var(--text);
}

img.mana-symbol {
	height: 1.8rem;
}

img.mana-symbol-sm {
	height: 1.3rem;
}


.markdown-input {
	font-family: "Fira Mono", monospace;
	min-height: 20rem !important;
}


.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}


/*
	TODO: Migrate these to Tailwind
*/

.outline {
  box-shadow: 0px 0px 15px 0px var(--glow);
}

.transparent {
  opacity: 0;
}

.stacked {
  /* This is calculated relative to containing width */
  margin-top: -124%;
}

.stack {
  padding-top: 124%;
}

.off-screen {
  position: absolute;
  z-index: -10000;
}

/* On screens where not all columns display at once, scroll cubes horizontally. */
.mobile-table-view-container {
	/* Size to viewport. Have to do this so that scroll displays to edge of screen. */
	overflow: hidden;
	width: 100vw;
	margin: -0.5rem calc(-50vw + 50%) 0rem;
}

.mobile-table-view-row {
	overflow: auto;
	flex-wrap: nowrap;
	padding: 0 calc(50vw - 50% - 2px);
	margin: 0 calc(-50vw + 50%);
}

.mobile-table-view-row:after {
	content: '';
	min-width: calc(50vw - 50% - 2px);
	height: 1px;
}

/* Extra small screens (xs) */
@media (min-width: 0px) {
  .table-view-col {
    width: 33.33%;
		min-width: 33.33%;
		max-width: 33.33%;
  }
}

/* Small screens (sm) */
@media (min-width: 640px) {
  .table-view-col {
    width: 25%;
		min-width: 25%;
		max-width: 25%;
  }
}

/* Medium screens (md) */
@media (min-width: 768px) {
  .table-view-col {
    width: 25%;
		min-width: 25%;
		max-width: 25%;
  }
}

/* Large screens (lg) */
@media (min-width: 1024px) {
  .table-view-col {
    width: 12.5%;
		min-width: 12.5%;
		max-width: 12.5%;
  }
}

/* Loose lists (https: //spec.commonmark.org/0.31.2/#lists) have a <p> within the list items. Use bottom margin to emulate
* a blank line after the list item. No longer using list-style-position: inside with it, so don't have to muck with inline-block
* to prevent the <p> from starting one a new line after the marker.
*/
.markdown ul p,
.markdown ol p {
	margin-bottom: 1rem;
}

/* Add margin to images rendered within centered markdown blocks */
.markdown .text-center .markdown-card-image {
	margin: auto;
}

/* Used in conjunction with DraggableCard and DndContext. Per https: //docs.dndkit.com/api-documentation/sensors/pointer#touch-action turns off
* the mobile browser's default touch actions on elements with the class, which is necessary for dragging to work as expected with DndContext. */
.no-touch-action {
  touch-action: none;
}

/* Make external images within centering blocks display beside it each instead of stacked vertically */
.markdown .text-center img.max-w-full {
	display: inline-block;
}

.max-h-1\/2 {
  max-height: 50vh;
}

.max-h-95\/100 {
  max-height: 95dvh;
}
