/*
  This stylesheet contains the complete styling for the NotesToLaTeX
  web application, using the BEM-methodology to keep the stylesheet
  consistent and easily extandable.

  Author: Niek Adams
  Date:   5 January 2025
*/

/* || IMPORT */

/* Importing the fonts Pacifico, Sriracha, and Ubuntu from Google Fonts. */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");

/* || RESET */

* {
  margin: 0;
  padding: 0;
}

/* || COLOURS */

/* Setting the colours for the light themed style (default). */
:root {
  --color-bg: #f7f7f7;
  --color-text: #252422;
  --color-bg-accent: #688e26;
  --color-text-accent: #52711e;
  --color-error-bg: #fcf0ee;
  --color-error-text: #571a0f;

  --color-shadow: #00000040;
  --color-light: #f7f7f7;
  --color-grey: #d7d7d7;
  --color-error-border: #d64933;
  --color-disabled-bg: #829399;

  --text-sm: 0.85rem;
  --text-md: 1rem;
  --text-lg: 1.7rem;
  --text-xl: 2.0rem;
}

@media (prefers-color-scheme: dark) {
  /* Setting the colours for the dark themed style. */
  :root {
    --color-bg: #252422;
    --color-text: #ebebea;
    --color-bg-accent: #52711e;
    --color-text-accent: #688e26;
    --color-error-bg: #571a0f;
    --color-error-text: #ebebea;
  }
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
}

/* || HEADER */

.header {
  font-family: "Roboto Condensed", serif;
  font-optical-sizing: auto;
  font-size: var(--text-xl);
  font-style: normal;
  font-weight: 500;
}

.header--sm {
  font-size: var(--text-lg);
}

/* || LOGO */

.logo {
  cursor: default;
  font-family: "Roboto Condensed", serif;
  font-optical-sizing: auto;
  font-size: var(--text-xl);
  font-style: normal;
  font-weight: 400;
  user-select: none;
}

.logo__accent {
  color: var(--color-text-accent);
}

/* || BUTTON */

.button {
  background-color: var(--color-bg-accent);
  border-radius: 10px;
  border: 0;
  color: var(--color-light);
  cursor: pointer;
  font-family: "Roboto Condensed", serif;
  font-optical-sizing: auto;
  font-size: var(--text-lg);
  font-style: normal;
  font-weight: 400;
  padding: .6rem 0;
  width: 100%;
  margin: 1rem 0;
}

.button:hover:not(.button--disabled):not(.button--busy) {
  background-color: var(--color-text-accent);
  text-decoration: underline;
  color: var(--color-light);
}

.button--disabled {
  background-color: var(--color-disabled-bg);
  cursor: wait;
}

.button--shadow {
  box-shadow: 0 4px 4px 0 var(--color-shadow);
}

.button--busy {
  background-color: var(--color-text-accent);
  color: var(--color-light);
}

.button--cta::before {
  content: '>';
}

.button--secondary {
  background: none;
  border: 2px solid var(--color-bg-accent);
  padding: calc(.6rem - 2px) 0;
  box-sizing: border-box;
  color: var(--color-text-accent);
}

.button--secondary:hover {
  background: none;
}

/* || PROGRESS */

.progress {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.progress__background {
  width: 100%;
  height: 1rem;
  background-color: var(--color-grey);
  border-radius: 50px;
  overflow: hidden;
}

.progress__indicator {
  width: 0%;
  height: 100%;
  background-color: var(--color-bg-accent);
}

.progress__percentage {
  font-family: "Roboto Condensed", serif;
  font-optical-sizing: auto;
  font-size: var(--text-md);
  font-style: normal;
  font-weight: 500;
}

.progress__percentage::after {
  content: '%';
}

.progress__status {
  font-family: "Roboto Condensed", serif;
  font-optical-sizing: auto;
  font-size: var(--text-md);
  font-style: normal;
  font-weight: 400;
}

/* || TEXT */

.text {
  font-family: "Roboto", serif;
  font-weight: 400;
  font-style: normal;
}

.text--clickable {
  color: var(--color-text-accent);
}

.text--subtext {
  text-align: center;
  font-size: var(--text-sm);
}

.text--list {
  list-style-position: inside;
}

.text__list-item {
  margin: .6rem 0;
}

/* || CONTAINERS */

.page-container {
  margin: 1rem auto;
  width: 95vw;
}

.spaced-block {
  margin: 3rem 0;
}

.spaced-block--small {
  margin: 1rem 0;
}

@media (min-width: 40em) {
  /* 640px */
  .page-container {
    width: 38em;
  }
}

@media screen and (min-width: 64em) {
  /* 1024px */
  .page-container {
    width: 50em;
  }
}

/* || ERROR */

.error {
  border: 2px solid var(--color-error-border);
  border-radius: 10px;
  padding: .8rem 2rem;
  background-color: var(--color-error-bg);
}

.error__text {
  color: var(--color-error-text);
}

.error--hidden {
  display: none;
}

/* || FORM */

.form--hidden {
  display: none;
}