@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@100;200;300;400;500;600;700;800;900&display=swap');

*          { box-sizing: border-box; margin: 0; padding: 0; }
a          { text-decoration: none; }
button     { border: none; cursor: pointer; }
img        { max-width: 100%; }
input      { background: none; border: none; }
select     { border: none; }
.hidden    { display: none!important; }

/*////////// BEHAVIOUR ///////////*/

button, label, 
.logo, 
#Navigation > * { user-select: none; }

input:focus { border: none; outline: none; }
select:focus { border: none; outline: none; }

/*////////// COLORS ///////////*/

html {
           --color-1: #43EAA2;
           --color-2: #DA9BCE;
           --color-3: #13264A;
      --shadow-color: #00000055;
  --textshadow-color: none;
  /* ImageFilter */
  --img-brightness : 1;
  --img-contrast   : 1;
  --img-grayscale  : 0;
  /* Misc */
  --brightness : 1.00;
}
img {
  filter: brightness(var(--img-brightness))
            contrast(var(--img-contrast)) 
           grayscale(var(--img-grayscale));
}

body {
  opacity : var(--brightness);
}

body            { background: var(--bg);          color: var(--fg);          }
header          { background: var(--bg-header);   color: var(--fg-header);   }
#Filter         { background: var(--bg-filter);   color: var(--fg-filter);   }
#Navigation     { background: var(--bg-nav);      color: var(--fg-nav);      }
#Settings       { background: var(--bg-settings); color: var(--fg-settings); }

#Filter button { color: var(--fg-filter); background: none; border: none; }
#Filter input  { /*border-bottom: 2px solid var(--fg-filter);*/ color: var(--fg-filter); }
#FilterOptions { border-bottom: 1px dashed var(--fg-filter); }
#FilterOptions select { background: var(--fg-filter); color: var(--bg-filter); }

.items                        article   { color: var(     --fg-item); background: var(  --bg-item); }
.items                        article a { color: var(     --fg-item); }
.items[data-viewmode*="grid"] article   { color: var(--fg-grid-item); background: var(--bg-grid-item); }
.items[data-viewmode*="grid"] article a { color: var(--fg-grid-item); }
.items[data-viewmode*="list"] article:nth-child(2n+1) { background: var(--bg-item-nth2, var(--bg-item)); }

#LoadMoreButton { background: var(--fg); color: var(--bg); }

.item[data-is-fav="true"] .fa-heart { color: red; }

/* SHADOWS */

header      { box-shadow: 0 0 5px var(--shadow-color); }
#Filter     { box-shadow: 0 0 5px var(--shadow-color); }
#Navigation { box-shadow: 0 0 5px var(--shadow-color); }
#Settings   { box-shadow: 0 0 5px var(--shadow-color); }

.items[data-viewmode*="grid"] .thumbnail img { box-shadow: 0 0 5px var(--shadow-color); }

body { text-shadow: 0 0 2px var(--textshadow-color); }

/* BORDER-RADIUS */ 

button     { border-radius: 5px; }
select     { border-radius: 5px; }
.item      { border-radius: 5px; }
.items[data-viewmode*="grid"]    img { border-radius: 5px; }
.items[data-viewmode*="list"]    img { border-radius: 5px 0 0 5px; }
.items[data-viewmode*="masonry"] img { border-radius: 5px; }

/* FONT & TEXT */

* { font-family: "Saira Condensed"; }
html, body { font-size: 16px; }

#Filter,
#Filter button,
#Filter input         { font-size: 1.50rem; }
#FilterOptions        { font-size: 1.00rem; }
#FilterOptions select { font-size: 1.00rem; }
header                { font-size: 1.50rem; }
#LoadMoreButton       { font-size: 1.00rem; }
#Navigation i         { font-size: 1.50rem; }
#Navigation span      { font-size: 0.75rem; font-weight: bold; text-transform: uppercase; }
#Settings label       { font-size: 0.90rem; font-weight: bold; text-transform: uppercase; }
#Settings select      { font-size: 1.25rem; }

.item {
  :is(.date, .source, .title) {
    font-size   : var(--FS); 
    line-height : var(--FS);
  }
  
  .date, .source { --FS: 0.8rem; opacity: 0.50; }
  .title         { --FS: 1.0rem; hyphens: auto; }
}

.items[data-viewmode="grid-100"] {
  .date, .source { --FS: 0.6rem; }
  .title         { --FS: 0.7rem; }
}

.items[data-viewmode="list-75"] {
  .date, .source { --FS: 0.80rem; }
  .title         { --FS: 1.20rem; }
}

.items[data-viewmode="list-100"] {
  .date, .source { --FS: 0.90rem; }
  .title         { --FS: 1.35rem; }
}

/*////////// LAYOUT //////////*/

iconify-icon { display: inline-block; }

header      { z-index: 101; }
#Footer     { z-index: 101; }
#Filter     { z-index: 102; }
#Navigation { z-index: 103; }
#Settings   { z-index: 100; }

html  { min-height: 100%; height: 100%; }
body  { min-height: 100%; height: 100%; max-height: 100dvh; }
#app  { min-height: 100%; height: 100dvh; }

body { overflow: hidden; }
#app { overflow: hidden; }
main { overflow: auto; }

#app    { display: flex; flex-direction: column; justify-content: center; margin: 0 auto; }
header  { flex-grow: 0; }
main    { flex-grow: 1; display: flex; flex-direction: column; justify-content: safe center; }
#Footer { flex-grow: 0; position: sticky; bottom: 0; }

#Footer     { display: flex; flex-direction: column; }
#Filter     { order: 1; }
#Navigation { order: 2; }

#Navigation { 
  display: flex;
  
  > * { flex: 1 0 10%; padding: 10px 5px 5px 5px; }
  > * { display: flex; flex-direction: column; align-items: center; gap: 0px; }

  > *             { border-left: 1px solid var(--shadow-color); }
  > *:first-child { border-left: none; }
  > *        > * { opacity:  50%; }
  > *.active > * { opacity: 100%; }
}

/* Header */

header   { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; padding: 5px 10px 0px 10px; }
.logo    { margin-top: -5px; }
.iconbar { display: flex; align-items: flex-end; gap: 10px; }

/* Settings */

#Settings {
  position: fixed; top: 0; right: 0; width: 250px;
  display: flex; flex-direction: column; justify-content: space-between;
  gap: 10px; padding: 50px 1rem 1rem 1rem;
  
  > * { display: flex; flex-direction: column; justify-content: stretch; }
  
  select {
    background : none;
    color      : var(--fg-settings);
    border     : 2.5px solid var(--fg-settings);
    padding    : 0.25rem;
  }
}

.Toggle {
  display     : flex;
  align-items : center;
  cursor      : pointer;
  gap         : 8px;
  user-select : none;
}

/* Items */

.items {
  display: flex; gap: 10px; padding: 10px; width: 100%; 
  
  article, .item { content-visibility: auto; display: flex; }
  .title         { font-weight: bold; }
  .thumbnail img { width: 100%; }
}

/* Viewmode: Grid */

.items[data-viewmode*="grid"] img { aspect-ratio: 1; object-fit: cover; }
.items[data-viewmode*="grid"]         { display: grid; grid-template-columns: repeat( auto-fit, minmax(var(--minmax), 1fr) ); }
.items[data-viewmode*="grid"] article { flex-direction: column; gap: 5px; }
.items[data-viewmode="grid"]     { --minmax: 140px; }
.items[data-viewmode="grid-100"] { --minmax: 100px; }
.items[data-viewmode="grid-150"] { --minmax: 150px; }
.items[data-viewmode="grid-200"] { --minmax: 200px; }
.items[data-viewmode="grid-300"] { --minmax: 300px; }

.items[data-viewmode="grid-2"] { grid-template-columns: repeat(2, 1fr); }
.items[data-viewmode="grid-3"] { grid-template-columns: repeat(3, 1fr); }
.items[data-viewmode="grid-4"] { grid-template-columns: repeat(4, 1fr); }
.items[data-viewmode="grid-5"] { grid-template-columns: repeat(5, 1fr); gap: 10px; }
.items[data-viewmode="grid-6"] { grid-template-columns: repeat(6, 1fr); gap: 5px; }

.items[data-viewmode*="grid"] .item {
  container: grid-item / inline-size;
  
  --FS1 : clamp(0.75rem, 0.75rem + 6cqw, 1.50rem);
  --FS2 : clamp(0.50rem, 0.50rem + 4cqw, 1.00rem);
  
  .title         { font-size: var(--FS1); line-height: var(--FS1); }
  .date, .source { font-size: var(--FS2); line-height: var(--FS2); }
}

/* Viewmode: List */

.items[data-viewmode="list"]     { --size:  50px; --gap:  5px; }
.items[data-viewmode="list-50"]  { --size:  50px; --gap:  5px; }
.items[data-viewmode="list-75"]  { --size:  75px; --gap: 10px; }
.items[data-viewmode="list-100"] { --size: 100px; --gap: 10px; }

.items[data-viewmode*="list"] {
  flex-direction: column; gap: var(--gap);
  
  article        { flex-direction: row; gap: var(--gap); flex-wrap: wrap; align-items: center; height: var(--size); /*gap: 10px; align-items: center;*/ position: relative; padding-right: var(--gap); padding-left: calc( var(--size) + var(--gap) ); }
  .thumbnail     { flex-basis: var(--size); flex-shrink: 0; position: absolute; left: 0; bottom: 0; height: var(--size); width: var(--size); }
  .thumbnail img { aspect-ratio: 1; object-fit: cover; max-height: 100%; }
  .title         { order: 2; flex-basis: 100%; flex-grow: 1; }
  .actions       { order: 3; }
  .date          { order: 4; }
  .source        { order: 5; }
}

#LoadMoreButton      { font-weight: bold; text-transform: uppercase; padding: 0.25rem 0.5rem; margin-bottom: 10px; width: 50%; width: fit-content; align-self: center; display: flex; align-items: center; gap: 5px; }
#LoadMoreButton span {  }
#LoadingMoreEnd      { text-align: center; padding: 10px; }

/* Filter */

#Filter        { gap: 10px; padding: 0 10px; display: flex; flex-wrap: wrap; align-items: center; }
#Filter button { position: relative; }
#Filter input  { flex-basis: 50%; flex-grow: 1; padding: 0; }

/* Formulare */

.form       { display: flex; flex-direction: column; gap: 10px; }
.form > div { display: flex; flex-direction: column; }

.form .input { 
  display: flex; flex-direction: row; align-items: stretch; justify-content: center;
  
  button { background: var(--fg); color: var(--bg); }
  
  label { 
    flex-basis: 50px; flex-grow: 0; aspect-ratio: 1; /*align-self: center; justify-self: center;*/ 
    background: var(--shadow-color); color: var(--bg);
    font-size: 2.00rem;
    display: flex; align-items: center; justify-content: center;
    order: 2;
    display: flex; gap: 5px; align-items: center; font-weight: bold; text-transform: uppercase;
  }
  
  input {
    order: 1;
    box-shadow: inset 0 0 2px var(--shadow-color);
    font-size: 1.50rem; padding: 5px 10px;
  }
}

/* Activity: ACCOUNT */

h2 { text-align: center; }

#AccountActivity {
  max-width      : 300px; 
  align-self     : center;
  display        : flex;
  flex-direction : column;
  gap            : 1rem;
}

/* Loading */ 
#loading { display: flex; align-items: center; align-self: center; justify-self: center; flex-basis: 100%; }

/*////////// ANIMATIONS //////////*/

html {
  --how: 0.4s cubic-bezier(0.25, 1, 0.5, 1) forwards;
  &[data-transition="backward"] {
    &::view-transition-old(main-content) { animation: slide-out-rightwards var(--how); }
    &::view-transition-new(main-content) { animation: slide-in-rightwards  var(--how); }
  }
  &[data-transition="forward"] {
    &::view-transition-old(main-content) { animation: slide-out-leftwards var(--how); }
    &::view-transition-new(main-content) { animation: slide-in-leftwards  var(--how); }
  }
}

/* --- KEYFRAMES --- */
@keyframes slide-in-leftwards {
  from { transform: translateX(100%); }
  to   { transform: translateX(0);    }
}
@keyframes slide-out-leftwards {
  from { transform: translateX(0);     }
  to   { transform: translateX(-100%); }
}
@keyframes slide-in-rightwards {
  from { transform: translateX(-100%); }
  to   { transform: translateX(0);     }
}
@keyframes slide-out-rightwards {
  from { transform: translateX(0);    }
  to   { transform: translateX(100%); }
}


header { view-transition-name: site-header; }
footer { view-transition-name: site-footer; }
main   { view-transition-name: main-content; }

::view-transition-group(site-header),
::view-transition-group(site-footer)  { z-index: 10; }
::view-transition-group(main-content) { z-index:  1; }