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

html {
	padding-left: calc(100vw - 100%);
}

body {
	@apply w-full min-h-screen;
}
#content {
	@apply w-10/12 md:w-1/2 mx-auto pt-12 pb-24;
}

h1 {
	@apply text-4xl mb-4 font-bold;
}
h3 {
	@apply text-2xl;
}

p {
	@apply my-2;
}

button {
	@apply px-4 py-2 rounded-2xl hover:brightness-90 active:brightness-75 duration-200 bg-button-color;
}

/* themes */

/* default theme */
body {
	@apply bg-slate-800 text-white;

	--button-color: rgb(96 165 250);
	--dark-button-color: #3c91f9;
	--green-button-color: rgb(34 197 94);
	--radio-label-color: rgb(37 99 235);
  
    --card-color: rgb(2 132 199);
                    /*rgb(96 165 250);*/
                    /*rgb(79 70 229);*/

	--note-block-color: rgb(96 165 250);
	--info-block-color: rgb(20 184 166);
	--hint-block-color: rgb(16 185 129);
	--quote-block-color: #504c49;
}

.infoElement {
	@apply brightness-90;
}

/* minimalist theme */
.theme-minimalist {
	@apply bg-minimalist-gray text-white;

	--button-color: rgb(37 99 235);
	--dark-button-color: #1e4fbc;
	--green-button-color: rgb(22 163 74);
	--radio-label-color: rgb(29 78 216);

	--note-block-color: rgb(2 132 199);
	--info-block-color: rgb(13 148 136);
	--hint-block-color: rgb(5 150 105);
}

.theme-minimalist .infoElement {
	@apply brightness-100;
}

/* note */
.theme-minimalist #note > *:is(h1, h2, h3, h4, h5, h6) {
	@apply text-minimalist-text;
}

.theme-minimalist h1 {
	@apply text-2xl;
	font-variant: small-caps;
}
.theme-minimalist #note h2 {
	@apply text-xl;
}
.theme-minimalist #note h3 {
	@apply text-lg;
}

.theme-minimalist #note > *:is(h4, h5, h6) {
	font-variant: small-caps;
}
.theme-minimalist #note h4 {
	@apply text-base;
}
.theme-minimalist #note h5 {
	@apply text-sm;
}
.theme-minimalist #note h6 {
	@apply text-xs;
}

/* primary theme */
.theme-primary {
	@apply bg-primary-brown;
  
  --card-color: rgb(17 24 39);
}

/* note */
.theme-primary #note {
	@apply text-primary-text font-['Karla'];
}
.theme-primary #note > *:is(h1, h2, h3, h4, h5, h6) {
	@apply text-primary-text-light;
}
.theme-primary #note strong {
	@apply text-red-500;
}
.theme-primary #note em {
	@apply text-blue-400;
}

/* index css */
/* featured notes */
.feat-note {
	/* small:1 large:2 xlarge:3 per line */
	@apply basis-auto grow w-3/4 lg:w-4/12 xl:w-1/4
            bg-button-color hover:brightness-75
            px-6 pt-2 pb-4 mx-2 my-3
            rounded-2xl;
}
.feat-note h4 {
	@apply text-xl mt-1 mb-2
        whitespace-normal line-clamp-2;

	font-variant: small-caps;
}
.feat-note div {
	@apply mt-0 inline-block max-w-full
        line-clamp-2 md:line-clamp-3
        whitespace-normal truncate;
}

/* account css */
.infoElement {
	@apply bg-button-color
        basis-full mb-8
        px-6 md:px-20 py-4 rounded-2xl;
}

/* settings css */
#themeSettings .radio-label {
	@apply bg-radio-label-color
        px-4 py-2;
}
#themeSettings input {
	@apply hidden;
}

#savePreferences {
	@apply bg-green-button-color;
}

input:checked ~ .dot {
	transform: translateX(100%);
	background-color: var(--dark-button-color);
}

/* list css */
ul {
	@apply list-disc;
}
li {
	@apply ml-6;
}

/* note css */
#note h1,
h2,
h3,
h4,
h5,
h6 {
	@apply font-bold my-3;
}
#note h1 {
	@apply text-3xl text-red-500
        mt-6 pb-2 border-b-4 border-slate-700;
}
#note h2 {
	@apply text-2xl text-orange-500;
}
#note h3 {
	@apply text-xl text-yellow-500;
}
#note h4 {
	@apply text-lg text-lime-600;
}
#note h5 {
	@apply text-base text-emerald-500;
}
#note h6 {
	@apply text-base text-sky-500;
}

#note table {
	@apply table-auto border border-black;
}
#note th {
	@apply border-2 border-zinc-900 px-2 py-1;
}
#note td {
	@apply border-2 border-zinc-900 px-2 py-1;
}

.table-of-contents {
	@apply hidden relative -top-6 
	pt-4 pb-2 px-4 -mb-4
	bg-dark-button-color;
}

/* note blocks */
#note .b-title {
	@apply mt-0 mb-2 mx-[-1rem] py-2 pl-4
        font-bold text-lg
        text-white
        flex items-center;
}
#note .b-title svg {
	@apply float-left mr-3;
}

/* note block */
#note .note-block .b-title {
	@apply bg-note-block-color;
}

/* hint/tip block */
#note > :is(.hint-block, .tip-block) > .b-title {
	@apply bg-hint-block-color;
}

/* info block */
#note .info-block .b-title {
	@apply bg-info-block-color;
}

/* quote block */
#note .quote-block .b-title {
	@apply bg-quote-block-color;
}

/* popup */
.popup-content ul {
	@apply list-disc ml-4;
}
.popup-content h1 {
	@apply mb-0;
}

/* learn note / cards css */
.-hide .-show-child {
    @apply hidden;
}
.-hide .-hide-child {
    @apply block;
}
.-show-child {
    @apply block;
}
.-hide-child {
    @apply hidden;
}

.hidespoilers .spoiler, .hidespoilers .spoiler * {
    @apply md:!text-transparent md:!bg-gray-700 hover:!text-inherit;
}

.card-buttons button {
    @apply bg-gray-700 mx-3 px-6;
}