/* VIEW TRANSITION STUFF */

/* GEEF DE LI'S EEN VT-NAME */
/* - daar kun je match-element voor gebruiken */
/* - developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/view-transition-name */
/* GEEF DE LI'S EEN VT-CLASS */
/* - developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/view-transition-class */

div button {
  view-transition-name: match-element;
  view-transition-class: filter;
}




/* LAAT DE VT LANGER DUREN (.33s) */
/* - nodig ::view-transition-group met de vt-class */
/* - ook nodig: een animation delay van .075s */

::view-transition-group(.filter) {
  animation-duration: .33s;
  animation-delay: .075s;
}




/* BONUS */
/* CUSTOM ANIMATIE VOOR FILTER DAT TOEGEVOEGD WORDT */
/* een filter dat toegevoegd wordt heeft wel een new maar geen old */
/* die kun je op deze manier selecteren */

/* maak een animatie (keyframes) die van 0% naar 100% schaalt */
/* koppel die in onderstaande selector */
/* met een duration van .33s en een delay van 0s */
/* transform-origin linksonder is ook leuk */

::view-transition-new(.filter):only-child {
  animation-name:--is-coming;
  animation-duration: .33s;
  animation-delay:0s;
  transform-origin:left bottom;
}

@keyframes --is-coming {
  0% {
    scale:0;
  }
}




/* BONUS */
/* CUSTOM ANIMATIE VOOR FILTER DAT VERWIJDERD WORDT */
/* een filter dat toegevoegd wordt heeft juist wel een old maar geen new */

/* doe hetzelfde als voor toevoegen */
/* de naimatie schaalt juist andersom van 100% naar 0% */

::view-transition-old(.filter):only-child {
  animation-name:--is-going;
  animation-duration: .33s;
  animation-delay:0s;
  transform-origin:left;
}

@keyframes --is-going {
  100% {
    scale:0;
  }
}





/* BONUS */
/* ANIMATIES OP HET HELE DOCUMENT UITZETTEN */
/* da kun je als een gek op de plus button blijven klikken */
/* https://www.bram.us/2025/01/29/view-transitions-page-interactivity/ */

:root {
			view-transition-name: none;
		}

::view-transition {
  pointer-events: none;
}












@layer basis {
  @font-face {
		font-family: "saira-var";
		src:url("../fonts/saira.ttf");
	}

  * {
    box-sizing:border-box;
  }

  body {
    height:100dvh;
    margin:0;
    padding:2em;

    display:grid;
    grid-template-columns:max-content 1fr;
    grid-template-rows:1fr max-content 1fr;
    grid-template-areas:
      ".      ."
      "label  filters"
      "button button";
    gap:.5em;
    align-items:center;

    background-color:#ccc;

    font-family:saira-var, sans-serif;
  }

  h2 {
    grid-area:label;

    margin:0;
    font-size:1em;
    font-weight:400;

    &:has(+ :empty) {
      display:none;
    }
  }

  div {
    grid-area:filters;

    display:flex;
    flex-wrap:wrap;
    gap:.5em;
  }

  div > button {
    padding:0 .25em 0 .75em;

    display:flex;
    align-items:center;
    gap:.25em;

    appearance:none;
    border:none;
    border-radius:2em;

    font:inherit;
    text-transform:uppercase;

    &::after {
      content:"x";

      padding:.2em;

      text-box: trim-both ex alphabetic;
      border:solid 1px currentColor;
      border-radius:50%;

      text-transform:lowercase;
    }
  }


  /* ADD BUTTON */

  body > button {
    grid-area:button;
    place-self:end center;
    
    width:3em;
    aspect-ratio:1;
    padding:0;

    appearance:none;
    background-color:#0000;
    border-radius:50%;
    border:solid 1px currentColor;

    font:inherit;
  }
}