<button class="plastic">
  <p>Plastic button</p>
</button>

/*  Plastic button styles  */
button.plastic {
  color: var(--color-on-primary);
  /* Background fallback  */
  background: var(--color-primary);
  background: linear-gradient(-45deg, hsla(0, 0%, 100%, 0.04), var(--color-primary));
  /*  Set glass like border  */
  border: hsla(0, 0%, 0%, 0.2) 1px solid;
  /*  Make corners round btw. 50% won't work as expected  */
  border-radius: 999px;
  filter: brightness(1.03);

   /* remove blue highligt on mobile chromium browsers */
  -webkit-tap-highlight-color: transparent;
  
  /* Add shadows */
  --indent: 0.2rem;
  box-shadow: calc(-1 * var(--indent)) calc(-1 * var(--indent)) calc(2.5 * var(--indent)) hsla(0, 0%, 100%, 0.14), 
    var(--indent) var(--indent) calc(2.5 * var(--indent)) hsla(0, 0%, 0%, 0.1);
  &:hover, &:focus {
    filter: brightness(1.06)
  }

  &:active {
    padding: 1.05em 2em 1em 2em;
    filter: brightness(0.96);
    box-shadow: inset var(--indent) var(--indent) calc(2.5 * var(--indent)) hsla(0, 0%, 0%, 0.1),
      inset calc(-1 * var(--indent)) calc(-1 * var(--indent)) calc(2.5 * var(--indent)) hsla(0, 0%, 100%, 0.14);

    & > p {
      transform: scale(0.97);
    }
  } 
}

/*  Plastic button dark mode styles  */
@media (prefers-color-scheme: dark) { 
  button.plastic {
    border: hsla(0, 0%, 100%, 0.2) 1px solid;
    background: linear-gradient(135deg, hsla(0, 0%, 100%, 0.04), var(--color-primary));
    box-shadow: calc(-1 * var(--indent)) calc(-1 * var(--indent)) calc(2 * var(--indent)) hsla(0, 0%, 100%, 0.08), 
      var(--indent) var(--indent) calc(2 * var(--indent)) hsla(0, 0%, 0%, 0.21);
    filter: brightness(1.02);

    &:hover, &:focus {
      filter: brightness(1.08)
    }

    &:active {
      filter: brightness(0.96);
      box-shadow: inset var(--indent) var(--indent) calc(2.5 * var(--indent)) hsla(0, 0%, 0%, 0.21),
        inset calc(-1 * var(--indent)) calc(-1 * var(--indent)) calc(2.5 * var(--indent)) hsla(0, 0%, 100%, 0.08);
    } 
  }
}

/*  Generic button styles */
button {
  font-family: 'Work Sans', sans-serif;
  font-size: calc(1rem + 1.5vmin);
  padding: 1em 2em 1.05em 2em;
  white-space: nowrap;
  cursor: pointer;

  /* Don't forget about keyboard only styles */
  &:focus-visible {
    /* Add simple outline */
    outline: 2px var(--color-on-primary) solid;
    outline-offset: 0.5rem;
  }

  /* Improve redability in dark mode */
  @media (prefers-color-scheme: dark) {
    font-weight: 500;
  }
}

/* Setup color variables */
:root {
  color-scheme: dark light;
  /* Light mode colors */
  --color-background: hsl(4, 7%, 70%);
  --color-primary: hsl(4, 9%, 72%);
  --color-on-primary: hsl(4, 85%, 2%);

  /* Dark mode colors */
  @media (prefers-color-scheme: dark) {
    --color-background: hsl(4, 4%, 18%);
    --color-primary: hsl(4, 6%, 16%);
    --color-on-primary: hsl(4, 9%, 86%);
  }
}

/* Import Work Sans font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Work+Sans:wght@400;500&display=swap');

/* Setup body */
body {
  padding: 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  box-sizing: border-box;
  background: var(--color-background);
}

@use postcss-preset-env(stage: 1, browsers: "last 2 versions");