/*
 * Name: Material Notes
 * Author: Carlos Bonadeo
 * Version: 1.0.0
 * Repo: https://github.com/cdmoro/anki-material-notes
 */

/*** BASE ------------------ ***/
/*** Basic layout, typography, and core styles ***/

.card {
  --light-font-color: #010101;
  --dark-font-color: #e9e9e9;
  --border-radius: 8px;
  --front-font-size: 21px;
  --border: none;

  --background: #fff;
  --accent-color: #fff;
  --note-background: #fefefe;
  --font-color: var(--light-font-color);
  --hr-color: #ddd;

  background: #fefefe;
}

.card.nightMode {
  --background: #121212;
  --accent-color: #1d1d1d;
  --note-background: #1d1d1d;
  --font-color: var(--dark-font-color);
  --hr-color: #333;

  background: #121212;
}

.card {
  font-family: arial;
  font-size: 19px;
  color: var(--font-color);
  background: var(--background);
  padding: 0.5rem;
}

.card a {
  color: var(--font-color);
}

.card .note.front,
.card .note.back {
  max-width: 500px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
  border-radius: var(--border-radius);
  margin: 0 auto;
  overflow: hidden;
  color: var(--font-color);
  background: var(--note-background);
  border: var(--border);
  position: relative;
}

.card .note.back .note.front {
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  box-shadow: none !important;
}

.card .note.front {
  font-size: var(--front-font-size);
  background: var(--accent-color);
  text-align: center;
  color: var(--front-color, --font-color);
}

.note.front .header {
  font-size: 14px;
  margin-bottom: 1rem;
  font-style: italic;
}

.card .note.front .body,
.card .note.back .body {
  padding: 16px;
}

/* MARK & FLAG */

/* #_mark,
#_flag {
  display: none;
} */

/*#_mark:not([hidden]) + #_flag + #qa .note.front::before {
.note.front.Marked::before {
  content: "★";
  position: absolute;
  left: 9px;
  top: -9px;
  color: var(--note-background);
  font-size: 21px;
  border-radius: 0px 0px 6px 6px;
  padding: 0px 1px 0px 2px;
  border: 3px solid var(--background);
  background: #ffcc00;
}

#_flag:not([hidden]) + #qa .note.front::after {
.note.front[class^=flag]::after {
  content: "⚑";
  position: absolute;
  right: 9px;
  top: -5px;
  font-size: 14px;
  border-radius: 0px 0px 6px 6px;
  color: var(--note-background);
  padding: 3px 3px 2px 4px;
  border: 3px solid var(--background);
}

#_flag[style*="flag-1"] + #qa .note.front::after {
.note.front.flag1::after {
  background: var(--flag-1);
}

#_flag[style*="flag-2"] + #qa .note.front::after {
.note.front.flag2::after {
  background: var(--flag-2);
}

#_flag[style*="flag-3"] + #qa .note.front::after {
.note.front.flag3::after {
  background: var(--flag-3);
}

#_flag[style*="flag-4"] + #qa .note.front::after {
.note.front.flag4::after {
  background: var(--flag-4);
}

#_flag[style*="flag-5"] + #qa .note.front::after {
.note.front.flag5::after {
  background: var(--flag-5);
}

#_flag[style*="flag-6"] + #qa .note.front::after {
.note.front.flag6::after {
  background: var(--flag-6);
}

#_flag[style*="flag-7"] + #qa .note.front::after {
.note.front.flag7::after {
  background: var(--flag-7);
} */

/*** VARIANTS ------------------ ***/
/*** Different color and style variants for cards ***/

.note[class*="-base"] {
  --front-color: var(--dark-font-color);
}

.nightMode .note[class*="-base"] {
  --front-color: var(--light-font-color);
}

.note.Material\:\:note-white-base,
.nightMode .note.Material\:\:note-white-base {
  --front-color: var(--light-font-color);
  --accent-color: #fff;
}

.note.Material\:\:note-blue-base {
  --accent-color: #1976d2;
}
.nightMode .note.Material\:\:note-blue-base {
  --accent-color: #42a5f5;
}

.note.Material\:\:note-purple-base {
  --accent-color: #6200ee;
}
.nightMode .note.Material\:\:note-purple-base {
  --accent-color: #bb86fc;
}

.note.Material\:\:note-pink-base {
  --accent-color: #e91e63;
}
.nigthMode .note.Material\:\:note-pink-base {
  --accent-color: #f06292;
}

.note.Material\:\:note-teal-base {
  --accent-color: #00796b;
}
.nightMode .note.Material\:\:note-teal-base {
  --accent-color: #4db6ac;
}

.note.Material\:\:note-green-base {
  --accent-color: #388e3c;
}
.nightMode .note.Material\:\:note-green-base {
  --accent-color: #81c784;
}

.note.Material\:\:note-orange-base {
  --accent-color: #ef6c00;
}
.nightMode .note.Material\:\:note-orange-base {
  --accent-color: #ffb74d;
}

.note.Material\:\:note-indigo-base {
  --accent-color: #3949ab;
}
.nightMode .note.Material\:\:note-indigo-base {
  --accent-color: #9fa8da;
}

.note.Material\:\:note-brown-base {
  --accent-color: #6d4c41;
}
.nightMode .note.Material\:\:note-brown-base {
  --accent-color: #a1887f;
}

.note.Material\:\:note-lime-base {
  --accent-color: #9e9d24;
}
.nightMode .note.Material\:\:note-lime-base {
  --accent-color: #cddc39;
}

.note.Material\:\:note-red-base {
  --accent-color: #d32f2f;
}
.nightMode .note.Material\:\:note-red-base {
  --accent-color: #e57373;
}

.card .note[class*="-filled"] {
  --front-color: #000;
  background: var(--note-background);
  box-shadow: none;
}

.nightMode .note[class*="-filled"] {
  --front-color: #fff;
}

.note.back[class*="-filled"] > hr {
  border-top-color: #55555533;
}

.nightMode .note.back[class*="-filled"] > hr {
  border-top-color: #55555555;
}

.note.Material\:\:note-blue-filled {
  --note-background: #cbdef1;
}
.nightMode .note.Material\:\:note-blue-filled {
  --note-background: #243a4c;
}

.note.Material\:\:note-purple-filled {
  --note-background: #ccb1ec;
}
.nightMode .note.Material\:\:note-purple-filled {
  --note-background: #383042;
}

.note.Material\:\:note-pink-filled {
  --note-background: #f4dddc;
}
.nightMode .note.Material\:\:note-pink-filled {
  --note-background: #5a1b39;
}

.note.Material\:\:note-teal-filled {
  --note-background: #c3ffff;
}
.nightMode .note.Material\:\:note-teal-filled {
  --note-background: #004646;
}

.note.Material\:\:note-green-filled {
  --note-background: #b8edba;
}
.nightMode .note.Material\:\:note-green-filled {
  --note-background: #1c241c;
}

.note.Material\:\:note-orange-filled {
  --note-background: #ffd8b8;
}
.nightMode .note.Material\:\:note-orange-filled {
  --note-background: #372406;
}

.note.Material\:\:note-indigo-filled {
  --note-background: #ccd4ff;
}
.nightMode .note.Material\:\:note-indigo-filled {
  --note-background: #272938;
}

.note.Material\:\:note-brown-filled {
  --note-background: #f9cfab;
}
.nightMode .note.Material\:\:note-brown-filled {
  --note-background: #35211a;
}

.note.Material\:\:note-lime-filled {
  --note-background: #f4f4a9;
}
.nightMode .note.Material\:\:note-lime-filled {
  --note-background: #393300;
}

.note.Material\:\:note-red-filled {
  --note-background: #f7bfbf;
}
.nightMode .note.Material\:\:note-red-filled {
  --note-background: #371c1c;
}

.note[class*="-outlined"] {
  --front-color: var(--light-font-color);
}

.nightMode .note[class*="-outlined"] {
  --front-color: var(--dark-font-color);
}

.card .note[class*="-outlined"] {
  border: var(--border-color) 2px solid;
  box-shadow: none;
  --hr-color: rgb(from var(--border-color) r g b / 40%);
}

.card .note[class*="-outlined"] .front {
  border: none;
}

.note.Material\:\:note-base-outlined {
  --border-color: #d9d3de;
}
.nightMode .note.Material\:\:note-base-outlined {
  --border-color: #3d3a43;
}

.note.Material\:\:note-blue-outlined {
  --border-color: #1976d2;
}
.nightMode .note.Material\:\:note-blue-outlined {
  --border-color: #42a5f5;
}

.note.Material\:\:note-purple-outlined {
  --border-color: #6200ee;
}
.nightMode .note.Material\:\:note-purple-outlined {
  --border-color: #bb86fc;
}

.note.Material\:\:note-pink-outlined {
  --border-color: #e91e63;
}
.nightMode .note.Material\:\:note-pink-outlined {
  --border-color: #f06292;
}

.note.Material\:\:note-teal-outlined {
  --border-color: #00796b;
}
.nightMode .note.Material\:\:note-teal-outlined {
  --border-color: #4db6ac;
}

.note.Material\:\:note-green-outlined {
  --border-color: #388e3c;
}
.nightMode .note.Material\:\:note-green-outlined {
  --border-color: #81c784;
}

.note.Material\:\:note-orange-outlined {
  --border-color: #ef6c00;
}
.nightMode .note.Material\:\:note-orange-outlined {
  --border-color: #ffb74d;
}

.note.Material\:\:note-indigo-outlined {
  --border-color: #3949ab;
}
.nightMode .note.Material\:\:note-indigo-outlined {
  --border-color: #9fa8da;
}

.note.Material\:\:note-brown-outlined {
  --border-color: #6d4c41;
}
.nightMode .note.Material\:\:note-brown-outlined {
  --border-color: #a1887f;
}

.note.Material\:\:note-lime-outlined {
  --border-color: #9e9d24;
}
.nightMode .note.Material\:\:note-lime-outlined {
  --border-color: #cddc39;
}

.note.Material\:\:note-red-outlined {
  --border-color: #d32f2f;
}
.nightMode .note.Material\:\:note-red-outlined {
  --border-color: #e57373;
}

.note.Material\:\:note-flag-italy {
  --front-color: #fff;
  --accent-color: rgb(0, 140, 69);
}

.note.Material\:\:note-flag-brazil {
  --front-color: rgba(254, 221, 0, 1);
  --accent-color: rgba(0, 151, 57, 1);
}

.note.Material\:\:note-flag-greece {
  --front-color: #FFF;
  --accent-color: rgba(13, 94, 175, 1);
}

.note.Material\:\:note-flag-china {
  --front-color: rgba(255, 255, 0, 0.8);
  --accent-color: rgba(238, 28, 37, 1);
}

.note.Material\:\:note-flag-france {
  --front-color: #FFF;
  --accent-color: #000091;
  --back-accent-color: var(--light-font-color);
}

.nightMode .note.Material\:\:note-flag-france {
  --back-accent-color: var(--dark-font-color);
}

.note.Material\:\:note-flag-usa {
  --front-color: #FFF;
  --accent-color: #b31942;
}

/*** ELEMENTS ------------------ ***/
/*** Buttons, icons, and other UI elements ***/

.card .note.back hr {
  margin: 0;
  border: none;
  border-top: var(--hr-color) solid 1px;
  background: none;
}

.note.back > img.cover,
.note.front > img.cover {
  width: 100%;
  object-fit: cover;
  max-height: 200px;
  display: block;
}

/* HINT */

.note.front.symbol .body,
.note.front .body .symbol {
  font-size: 4rem;
}

.note.front .body .emoji {
  font-size: 4rem;
}

.note.front .subheader {
  margin-top: 0.5rem;
  font-size: 16px;
}

.note.back .subtitle {
  font-size: 16px;
  margin-bottom: 0.6rem;
  opacity: 0.6;
  margin-top: 1rem;
}

.note.back .body > .subtitle:first-child {
  margin-top: 0;
}

/* HINT STYLES */

.hint {
  font-size: 16px;
  font-style: italic;
  color: inherit;
}

.note a.hint {
  text-decoration: underline;
}

.note .body .hint {
  font-style: italic;
  display: inline-block;
}

.note.back[class*="-base"] > .body .hint,
.note.back[class*="-flag-"] > .body .hint {
  color: var(--back-accent-color, var(--accent-color));
}

.note[class*="-outlined"] .body .hint {
  color: var(--border-color);
}

.note[class*="-base-outlined"] .body .hint {
  color: var(--font-color);
}

.note.back[class*="-filled"] > .body .hint {
  color: #000;
}

.nightMode .note[class*="-filled"] .body .hint {
  color: #fff;
}

.note.back.Material\:\:note-white-base > .body .hint {
  color: #000;
}

.nightMode .note.back.Material\:\:note-white-base > .body .hint {
  color: #fff;
}

.note.front .hint {
  color: var(--front-color);
  font-size: 16px;
}

/* IMAGE STYLES */

.note.front > img {
  width: 100%;
  object-fit: cover;
  max-width: 500px;
  max-height: 200px;
  display: block;
}

.note.front .body img {
  max-height: 200px;
  max-width: 400px;
  vertical-align: middle;
}

.note.back > .body > img {
  width: 100%;
  object-fit: cover;
  max-height: 200px;
  display: block;
}

/* CENTERED */

.note.Material\:\:note-centered .body,
.note.Material\:\:note-centered .body .flex {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 0.5rem; */
  text-align: center;
}

/* .note.Material\:\:note-centered .header {
  margin-bottom: 0.5rem;
} */

.note.Material\:\:note-centered .body em,
.note.Material\:\:note-centered .body strong {
  display: contents;
}

/* PILL STYLES */

.note .text-block .pill {
  font-size: 70%;
  color: #000;
  background: #dddddd99;
  padding: 0.4rem 0.7rem;
  border-radius: 1rem;
  display: inline-block;
}

#qa .note a[href^="https://"]::after {
  content: "";
  width: 11px;
  height: 11px;
  margin-left: 4px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  display: inline-block;
}

.nightMode #qa .note a[href^="https://"]::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23FFFFFF' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M8.636 3.5a.5.5 0 0 0-.5-.5H1.5A1.5 1.5 0 0 0 0 4.5v10A1.5 1.5 0 0 0 1.5 16h10a1.5 1.5 0 0 0 1.5-1.5V7.864a.5.5 0 0 0-1 0V14.5a.5.5 0 0 1-.5.5h-10a.5.5 0 0 1-.5-.5v-10a.5.5 0 0 1 .5-.5h6.636a.5.5 0 0 0 .5-.5z'/%3E%3Cpath fill-rule='evenodd' d='M16 .5a.5.5 0 0 0-.5-.5h-5a.5.5 0 0 0 0 1h3.793L6.146 9.146a.5.5 0 1 0 .708.708L15 1.707V5.5a.5.5 0 0 0 1 0v-5z'/%3E%3C/svg%3E");
}

/*** AUDIO ------------------ ***/
/*** Styles for audio playback controls ***/

/* REPLAY BUTTON (ANDROID MOBILE APP) */

.note .replaybutton span {
  height: 32px;
  padding: 0;
}

.nightMode .note .replaybutton span svg polygon {
  fill: #fff;
}

.note.back[class*="-base"] > .body .replaybutton span svg polygon,
.note.back[class*="-flag-"] > .body .replaybutton span svg polygon {
  fill: var(--back-accent-color, var(--accent-color));
  align-self: center;
}

.note.back[class*="-filled"] > .body .replaybutton span svg polygon {
  fill: #000;
}

.nightMode .note.back[class*="-filled"] > .body .replaybutton span svg polygon {
  fill: #fff;
}

.note.back.Material\:\:note-white-base > .body .replaybutton span svg polygon {
  fill: #000;
}

.nightMode .note.back.Material\:\:note-white-base > .body .replaybutton span svg polygon {
  fill: #fff;
}

.note.front[class*="-base"] .replaybutton svg polygon {
  fill: #fff;
}

.note.front[class*="-flag-"] .replaybutton svg polygon {
  fill: var(--front-color);
}

.nightMode .note.front[class*="-base"] .replaybutton svg polygon {
  fill: #000;
}

.note.front[class*="-filled"] .replaybutton svg polygon {
  fill: #000;
}

.nightMode .note.front[class*="-filled"] .replaybutton svg polygon {
  fill: #fff;
}

.note[class*="-outlined"] .replaybutton span svg polygon,
.nightMode .note[class*="-outlined"] .replaybutton span svg polygon {
  fill: var(--border-color);
}

.note[class*="-base-outlined"] .replaybutton span svg polygon,
.nightMode .note[class*="-base-outlined"] .replaybutton span svg polygon {
  fill: var(--font-color);
}

.note.front.Material\:\:note-white-base .replaybutton svg polygon {
  fill: #000;
}

/* REPLY BUTTON (DESKTOP APP) */

.note .replay-button {
  margin: 0;
}

.note .replay-button svg {
  width: 32px;
  height: 32px;
}

.note .replay-button svg circle {
  fill: transparent;
  stroke: transparent;
}

.note .replay-button svg path {
  transform: scale(0.9);
  transform-origin: center;
  fill: #000;
}

.nightMode .note .replay-button svg path {
  fill: #fff;
}

.note.front[class*="-base"] .replay-button svg path {
  fill: #fff;
}

.nightMode .note.front[class*="-base"] .replay-button svg path {
  fill: #000;
}

.note.front[class*="-filled"] .replay-button svg path {
  fill: #000;
}

.nightMode .note.front[class*="-filled"] .replay-button svg path {
  fill: #fff;
}

.note.front[class*="-flag-"] .replay-button svg path {
  fill: var(--front-color);
}

.note.back[class*="-base"] > .body .replay-button svg path,
.note.back[class*="-flag-"] > .body .replay-button svg path {
  fill: var(--back-accent-color, var(--accent-color));
}

.note[class*="-outlined"] .body .replay-button svg path {
  fill: var(--border-color);
}

.note[class*="-base-outlined"] .body .replay-button svg path {
  fill: var(--font-color);
}

.note.back[class*="-filled"] > .body .replay-button svg path {
  fill: #000;
}

.nightMode .note.back[class*="-filled"] > .body .replay-button svg path {
  fill: #fff;
}

.note.back.Material\:\:note-white-base .body .replay-button svg path {
  fill: #000;
}

.nightMode .note.back.Material\:\:note-white-base .body .replay-button svg path {
  fill: #fff;
}

.note.back .note.front.Material\:\:note-white-base .replay-button svg path {
  fill: #000;
}

/* REPLAY BUTTON (FIREFOX) */

.note .gecko audio {
  width: 48px;
  height: 32px;
}

/* REPLAY BUTTON (CHROME) */

.note .chrome audio {
  width: 143px;
  height: 32px;
}

/*** UTILS ------------------ ***/

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.flex-row {
  flex-direction: row;
}

.flex-col {
  flex-direction: column;
}

.text-center {
  text-align: center;
}