/* Abstracting away math. This is used to pull back against the padding of the same value */
@function --negate(--value) {
  result: calc(-1 * var(--value));
}

/* Abstracting away a complex value */
@function --opacity(--color, --opacity) {
  result: oklch(from var(--color) l c h / var(--opacity));
}

.card {
  --padding: 1rem;
  padding: var(--padding);
  border: 1px solid black;
  background: white;

  > header {
    background: --opacity(rebeccapurple, 0.75);
    color: white;
    padding: var(--padding);
    margin: --negate(var(--padding));
    margin-block-end: 1rem;
  }
}

/* Just a string, just because */
@function --site-title(--str) {
  --site-title: var(--str) " in CSS";
  result: var(--site-title);
}

main {
  &::after {
    content: --site-title("Using @function");
    font-size: 2rem;
    display: block;
    text-align: center;
    padding: 1rem;
    color: white;
    font-weight: 800;
  }
}

/* Abstracting away browser support logic */
@function --site-background() {
  result: if(
    supports(color: oklch(0.7 0.185 232)): oklch(0.33 0.185 232);
    else: #00adf3;
  );
}

body {
  background-color: --site-background();
}

/* NOPE - can't use variables in this media format either. */
/* @function --test(--breakpoint) {
  result: if(
    media(width > var(--breakpoint)): red;
  )
} */

@function --column-logic() {
  result: 1fr 1fr 1fr;

  @media (width < 500px) {
    /* In the future it would be nice to accept a --breakpoint argument and use here, but variables don't work in @media queries. */
    result: 1fr;
  }

  /* 
  Source order matters! 
  This one will always win.
  @supports (color: red) {
    result: 1fr 1fr;
  }
  */
}


.grid {
  display: grid;
  gap: 1rem;
  grid-template-columns: --column-logic();
}

html {
  font: 100%/1.4 system-ui;
}