:root {
  /* Dark mode using the browser's defaults */
  color-scheme: dark light;
  font-size: 16px;
  font-family: 'SN Pro', system-ui, sans-serif;
  line-height: 1.5em;

  --max-text-width: 75ch;
  --min-text-width: 45ch;
  --text-padding: 2ch;
  --text-container-max-width: calc(
    var(--max-text-width) + 2 * var(--text-padding)
  );
  --text-container-min-width: calc(
    var(--min-text-width) + 2 * var(--text-padding)
  );

  --transition-colors: background-color 0.2s cubic-bezier(0.83, 0, 0.17, 1),
    color 0.2s cubic-bezier(0.83, 0, 0.17, 1);
  --transition-checkbox: 200ms ease-in-out;
}

/* Simpler sizing */
*,
*::before,
*::after {
  box-sizing: border-box;
}

/* Remove default spacing */
* {
  margin: 0;
  padding: 0;
}

html {
  hanging-punctuation: first last;
}

/* Responsive images/videos */
img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  text-wrap: balance;
}

p {
  text-wrap: pretty;
  overflow-wrap: break-word;
}

body {
  display: flex;
  flex-direction: row;
  justify-content: center;

  transition: var(--transition-colors);
  --border-color: var(--color-border);

  background-color: var(--color-bg);
  color: var(--color-fg);
}

#sidebar {
  position: sticky;
  top: 0;
  /* Do not expand to occupy the same space as the flex container */
  height: 100%;
  font-size: 1.2rem;
  user-select: none;
}

#sidebar > * {
  transition: var(--transition-colors);
  background-color: var(--color-bg-element);
}

#file_picker {
  display: flex;
  text-align: center;
}

#file_picker > label {
  padding: 2rem;
  /* EaseOutCirc */
  transition: background-color 0.5s cubic-bezier(0, 0.55, 0.45, 1);
  font-weight: 800;
  flex-grow: 1;
}

#file_picker > label:hover {
  background-color: var(--color-glow);
}

#file_picker > input {
  opacity: 0;
  position: absolute;
  width: 0;
  height: 0;
}

main {
  max-width: var(--text-container-max-width);
  min-width: var(--text-container-min-width);
  width: 100%;
  padding: var(--text-padding);

  transition: var(--transition-colors);
  background-color: var(--color-bg-element);
}

.message-block {
  /* Please see .visible-message-block and .hidden-message-block */
  display: none;
  /* display: flex; */
  flex-flow: row;
  /* align-items: center; */
  padding: 0.1em 0.5em;
  border-radius: 0.3em;
}

.timestamp {
  font-family: 'Iosevka Fixed SS09 Clock Subset';
  padding-right: 0.6em;

  transition: var(--transition-colors);
  color: var(--color-timestamp);
}

.entity {
  font-weight: 600;
  max-width: 50%;
  flex-shrink: 0;
  overflow-wrap: break-word;

  transition: var(--transition-colors);
  color: var(--color-entity);
}

.entity::after {
  content: ':';
  padding-right: 0.6em;
}

.message {
  flex-grow: 1;
  overflow-wrap: break-word;
  font-weight: 400;
}

.visible-message-block.odd {
  transition: var(--transition-colors);
  background-color: var(--color-odd-message-block);
}

.visible-message-block.even {
  transition: var(--transition-colors);
  background-color: var(--color-even-message-block);
}

/* Message type */
.say > .message {
  color: var(--color-message-say);
}

.shout > .message {
  color: var(--color-message-shout);
}

.tellOutgoing > .message {
  color: var(--color-message-telloutgoing);
}

.tellIncoming > .message {
  color: var(--color-message-tellincoming);
}

.party > .message {
  color: var(--color-message-party);
}

.alliance > .message {
  color: var(--color-message-alliance);
}

.linkshell > .message {
  color: var(--color-message-linkshell);
}

.freeCompany > .message {
  color: var(--color-message-freecompany);
}

.customEmote > .message {
  color: color-message-customemote;
}

.emote > .message {
  color: var(--color-message-emote);
}

.yell > .message {
  color: var(--color-message-yell);
}

.npcDirect > .message {
  color: var(--color-message-npcdirect);
}

.npcBroadcast > .message {
  color: var(--color-message-npcbroadcast);
}

.crossworldLinkshell > .message {
  color: var(--color-message-crossworldlinkshell);
}

.dragDropHover {
  animation: glowing 1s infinite;
}

.bordered {
  border: 2px solid var(--border-color);
  border-radius: 1rem;
  overflow: hidden;
}

#filters {
  font-weight: 600;
  overflow: hidden;
}

#filters > ul {
  display: flex;
  flex-flow: column;
}

#filters > ul > li {
  /* Magic number here */
  list-style: none;
  padding: 0.2em;
}

#filters > ul > li:hover {
  transition: var(--transition-colors);
  background-color: var(--color-glow);
}

#filters > ul > li > input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Toggle switches */

input[type='checkbox'].toggle + label {
  position: relative;
  display: flex;
  gap: 0.4em;
  align-items: center;

  cursor: pointer;
}

input[type='checkbox'].toggle + label::before {
  flex-shrink: 0;
  content: '';
  width: 2em;
  height: 1.1em;

  border-radius: 1em;

  background-color: var(--color-off-bg);
  transition: var(--transition-checkbox);
}

input[type='checkbox'].toggle + label::after {
  position: absolute;
  flex-shrink: 0;
  content: '';
  width: 0.9em;
  height: 0.9em;
  left: 0.1em;

  border-radius: 1em;

  background-color: var(--color-off-fg);
  transition: var(--transition-checkbox);
}

/*
input[type='checkbox'].toggle:focus + label::before {
        outline: 2px solid var(--color-accent);
}
*/

input[type='checkbox'].toggle:checked + label::before {
  background-color: var(--color-bg-accent);
}

input[type='checkbox'].toggle:checked + label::after {
  transform: translateX(100%);
  background-color: var(--color-accent);
}

/* TODO: Switch to transition? */
@keyframes glowing {
  0% {
    background-color: inherit;
  }

  66% {
    background-color: var(--color-glow);
  }

  100% {
    background-color: inherit;
  }
}

.visible-message-block {
  display: flex;
}

.hidden-message-block {
  display: 'none';
}

#theme_toggle {
  display: flex;
  flex-flow: column;
  justify-content: center;
  align-items: center;

  font-weight: 600;
}

#theme_toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

#theme_toggle label {
  height: 3em;
  width: 100%;
}

#theme_toggle:hover {
  background-color: var(--color-glow);
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-bg: #051313;
    --color-bg-element: #092020;
    --color-fg: #b5a592;
    --color-entity: #f2a48c;
    --color-timestamp: #305048;
    --color-border: #024040;
    --color-odd-message-block: rgba(0, 0, 0, 0.25);
    --color-even-message-block: rgba(0, 0, 0, 0.1);
    --color-off-bg: hsl(0 0% 20%);
    --color-off-fg: hsl(0 0% 40%);
    --color-accent: hsl(120 90% 35%);
    --color-bg-accent: hsl(120 90% 15%);

    --color-glow: hsl(180, 56%, 12%);

    --color-message-say: hsl(0 0% 50%);
    --color-message-shout: hsl(0 100% 50%);
    --color-message-telloutgoing: hsl(120 50% 50%);
    --color-message-tellincoming: hsl(120 100% 50%);
    --color-message-party: hsl(190 100% 50%);
    --color-message-alliance: hsl(35 100% 50%);
    --color-message-linkshell: hsl(80 100% 50%);
    --color-message-freecompany: hsl(230 50% 60%);
    --color-message-customemote: hsl(0 100% 70%);
    --color-message-emote: hsl(0 100% 80%);
    --color-message-yell: hsl(20 100% 50%);
    --color-message-npcdirect: hsl(300 100% 50%);
    --color-message-npcbroadcast: hsl(340 100% 50%);
    --color-message-crossworldlinkshell: hsl(80 50% 50%);
  }
}

@media (prefers-color-scheme: light) {
  :root {
    --color-bg: #f2ebbc;
    --color-bg-element: #e7dba0;
    --color-fg: #545464;
    --color-entity: #672611;
    --color-timestamp: #f28786;
    --color-border: #d9c97c;
    --color-odd-message-block: rgba(255, 255, 255, 0.25);
    --color-even-message-block: rgba(255, 255, 255, 0.1);
    --color-off-bg: hsl(50, 10%, 50%);
    --color-off-fg: hsl(50, 10%, 80%);
    --color-accent: hsl(50, 90%, 85%);
    --color-bg-accent: hsl(50, 90%, 35%);

    --color-glow: hsl(50, 60%, 67%);

    --color-message-say: hsl(0 0% 25%);
    --color-message-shout: hsl(0 100% 25%);
    --color-message-telloutgoing: hsl(120 50% 25%);
    --color-message-tellincoming: hsl(120 100% 25%);
    --color-message-party: hsl(190 100% 25%);
    --color-message-alliance: hsl(35 100% 25%);
    --color-message-linkshell: hsl(80 100% 25%);
    --color-message-freecompany: hsl(230 50% 35%);
    --color-message-customemote: hsl(0 100% 45%);
    --color-message-emote: hsl(0 100% 55%);
    --color-message-yell: hsl(20 100% 25%);
    --color-message-npcdirect: hsl(300 100% 25%);
    --color-message-npcbroadcast: hsl(340 100% 25%);
    --color-message-crossworldlinkshell: hsl(80 50% 25%);
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --color-bg: #051313;
  --color-bg-element: #092020;
  --color-fg: #b5a592;
  --color-entity: #f2a48c;
  --color-timestamp: #305048;
  --color-border: #024040;
  --color-odd-message-block: rgba(0, 0, 0, 0.25);
  --color-even-message-block: rgba(0, 0, 0, 0.1);
  --color-off-bg: hsl(0 0% 20%);
  --color-off-fg: hsl(0 0% 40%);
  --color-accent: hsl(120 90% 35%);
  --color-bg-accent: hsl(120 90% 15%);

  --color-glow: hsl(180, 56%, 12%);

  --color-message-say: hsl(0 0% 50%);
  --color-message-shout: hsl(0 100% 50%);
  --color-message-telloutgoing: hsl(120 50% 50%);
  --color-message-tellincoming: hsl(120 100% 50%);
  --color-message-party: hsl(190 100% 50%);
  --color-message-alliance: hsl(35 100% 50%);
  --color-message-linkshell: hsl(80 100% 50%);
  --color-message-freecompany: hsl(230 50% 60%);
  --color-message-customemote: hsl(0 100% 70%);
  --color-message-emote: hsl(0 100% 80%);
  --color-message-yell: hsl(20 100% 50%);
  --color-message-npcdirect: hsl(300 100% 50%);
  --color-message-npcbroadcast: hsl(340 100% 50%);
  --color-message-crossworldlinkshell: hsl(80 50% 50%);
}

:root[data-theme='light'] {
  color-scheme: light;

  --color-bg: #f2ebbc;
  --color-bg-element: #e7dba0;
  --color-fg: #545464;
  --color-entity: #672611;
  --color-timestamp: #f28786;
  --color-border: #d9c97c;
  --color-odd-message-block: rgba(255, 255, 255, 0.25);
  --color-even-message-block: rgba(255, 255, 255, 0.1);
  --color-off-bg: hsl(50, 10%, 50%);
  --color-off-fg: hsl(50, 10%, 80%);
  --color-accent: hsl(50, 90%, 85%);
  --color-bg-accent: hsl(50, 90%, 35%);

  --color-glow: hsl(50, 60%, 67%);

  --color-message-say: hsl(0 0% 25%);
  --color-message-shout: hsl(0 100% 25%);
  --color-message-telloutgoing: hsl(120 50% 25%);
  --color-message-tellincoming: hsl(120 100% 25%);
  --color-message-party: hsl(190 100% 25%);
  --color-message-alliance: hsl(35 100% 25%);
  --color-message-linkshell: hsl(80 100% 25%);
  --color-message-freecompany: hsl(230 50% 35%);
  --color-message-customemote: hsl(0 100% 45%);
  --color-message-emote: hsl(0 100% 55%);
  --color-message-yell: hsl(20 100% 25%);
  --color-message-npcdirect: hsl(300 100% 25%);
  --color-message-npcbroadcast: hsl(340 100% 25%);
  --color-message-crossworldlinkshell: hsl(80 50% 25%);
}

@font-face {
        font-family: 'SN Pro';
        src: url('../fonts/SNPro-Regular.woff2');
}

@font-face {
        font-family: 'Iosevka Fixed SS09 Clock Subset';
        src: url('../fonts/Iosevka-Fixed-SS09-clock-subset.woff2');
}