<div class="grid">
  <!--  Settings   -->
  <label for="wireframe" class="wireframe">Toggle wireframe</label>
  <input type="checkbox" id="wireframe" class="wireframe" />

  <!--  The button   -->
  <button>
    <div class="back"></div>
    <div class="front">
      <p>Satisfaction</p>
    </div>
  </button>

</div>

/*  
  The button is composed of two separate layers.
  The .front layer contains the content of the button.
  The .back layer creates a side of a button.
*/

/* Style button as a container */
button {
  /* the button thickness variable */
  --button-thickness: 0.22em;
  /* the button press scale variable */
  --button-scale: 0.95;
  /* the button glow filter on hover variable */
  --button-hover-glow: 1.04;
  /* the button transition duration variable */
  --button-press-duration: 50ms;
  /* the button transition delay variable */
  --button-pressed-duration: 10ms;
  
  /* remove blue highligt on mobile chromium browsers */
  -webkit-tap-highlight-color: transparent;
  
  position: relative;
}

/* Style front and back layer of the button */
button .front, 
button .back {
  background: linear-gradient(45deg, var(--color-gradient-from), var(--color-gradient-to));
  border-radius: 999px;
  
  transform-origin: bottom center;
  shape-rendering: optimizespeed;
  background-origin: border-box;
}

/* Style front layer of the button */
button .front {
  filter: contrast(1.2);
  padding: 0.8em 3em calc(0.8em - var(--button-thickness) / 5) 3em;
  box-shadow: 
    1px -1px 2px 0 hsla(0, 0%, 0%, 0.06),
    3px -3px 4px 0 hsla(0, 0%, 0%, 0.08);
  transition: 
    transform var(--button-press-duration) ease-in var(--button-pressed-duration),
    box-shadow var(--button-press-duration) ease-in var(--button-pressed-duration);
}

/* Style back layer of the button */
button .back {
  /* Make it slightly darker */
  filter: brightness(0.9);
  
  /* Make it the same size as the front layer */
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
 
  /* Apply perspective transformation */
  transform: 
    translatey(var(--button-thickness))
    scale(var(--button-scale));
}

/* On button hover and focus */
button:hover .front, 
button:focus .front {
  /* Make the button glow on hover and focus */
  filter: contrast(1.2) brightness(var(--button-hover-glow));
  /* Let's create anticipation before the button press */
  transform: translatey(-1px);
  box-shadow: 
    1px -1px 3px 0 hsla(0, 0%, 0%, 0.05),
    3px -3px 5px 0 hsla(0, 0%, 0%, 0.07);
}

/* On button hover and focus */
button:hover .back, 
button:focus .back { 
  /* Make the button glow on hover and focus */
  filter: brightness(calc(var(--button-hover-glow) - 0.1));
}

/* On button press */
button:active .front {
  /* Transform acording to the perspective */
  transform: 
    translatey(var(--button-thickness))
    scale(var(--button-scale));
  /* Make shadows smaller */
  box-shadow: 
    0 0 1px 0 hsla(0, 0%, 0%, 0.06),
    1px -1px 1px 0 hsla(0, 0%, 0%, 0.08);
  
  transition: 
    transform var(--button-press-duration) ease-in,
    box-shadow var(--button-press-duration) ease-in;
  
  /* On touch screens make press transition faster */
  @media (hover: none) and (pointer: coarse) {
    transition: 
      transform calc(var(--button-press-duration) / 2) ease-in,
      box-shadow calc(var(--button-press-duration) / 2) ease-in;
  }
}

/* Style button's text */
button p {
  font-weight: 500;
  mix-blend-mode: overlay;
  text-rendering: optimizeSpeed;
}

/* Make shadows stronger on dark background */
@media (prefers-color-scheme: dark) {
  button .front { 
     box-shadow: 
       1px -1px 2px 0 hsla(0, 0%, 0%, 0.12),
       3px -3px 4px 0 hsla(0, 0%, 0%, 0.23);
  }
  
  button:active .front {
     box-shadow: 
       0 0 1px 0 hsla(0, 0%, 0%, 0.12),
       1px -1px 1px 0 hsla(0, 0%, 0%, 0.23);
  }
}

/*  Reset default button styles */
button {
  appearance: none;
  font-family: 'Work Sans', sans-serif;
  font-size: calc(1rem + 1.5vmin);
  white-space: nowrap;
  cursor: pointer;
  border: none;
  color: var(--color-on-primary);
  background-color: transparent;
  padding: 0;
}

/* Don't forget about keyboard only styles */
button:focus-visible .front {
  /* Add simple outline */
  outline: 2px var(--color-primary) solid;
  outline-offset: 0.6em;
}

button:focus-visible {
  /* Remove default outline from the button */
  outline: none;
}

/* Setup color variables */
:root {
  color-scheme: dark light;
  /* Light mode colors */
  --color-background: hsl(4, 9%, 69%);
  --color-on-background: hsl(4, 3%, 7%);
  --color-primary: hsl(4, 54%, 50%);
  --color-gradient-from: hsl(344, 62%, 49%);
  --color-gradient-to: hsl(27, 100%, 64%);
  --color-on-primary: hsl(4, 3%, 99%);
  
  /* Dark mode colors */
  @media (prefers-color-scheme: dark) {
    --color-background: hsl(4, 12%, 16%);
    --color-on-background: hsl(4, 3%, 99%);
    --color-primary: hsl(4, 49%, 45%);
    --color-gradient-from: hsl(344, 54%, 46%);
    --color-gradient-to: hsl(27, 88%, 64%);
    --color-on-primary: hsl(4, 3%, 99%);
  }
}

/* Setup body */
body {
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  min-height: 100vh;
  background: var(--color-background);
}

/* Center the button */
.grid {
  display: flex;
  flex-direction: column;
  width: 100%; 
  
  @supports (display: grid){
    display: grid;
    grid-gap: 2rem 0.5rem;
    grid-template-columns: auto auto 1fr;
    grid-template-rows: auto 1fr;
    
    & button {
      grid-column: 1 / 4;
      grid-row: 1 / 3;
      place-self: center;  
    }
  }
}

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

/* Wireframe styles */
label.wireframe {
  font-family: 'Work Sans', sans-serif;
  font-size: calc(1rem + 1.5vmin);
  color: var(--color-on-background);
  place-self: center end;
  opacity: 0.9;
  cursor: pointer;
  grid-row: 1;
  grid-column: 1;
  padding: 1rem 0 1rem 1rem;
  font-size: 1.1rem;
}

label.wireframe:hover ~ input.wireframe,
input.wireframe:hover,
input.wireframe:focus {
  filter: brightness(1.1);
}

input:focus-visible {
  /* Add simple outline */
  outline: 2px var(--color-primary) solid;
  outline-offset: 0.5rem;
}

input.wireframe {
  appearance: none;
  grid-column: 2;
  grid-row: 1;
  cursor: pointer;
  place-self: center start;
  border: var(--color-primary) 2px solid;
  width: 2.5rem;
  height: 1.5rem;
  border-radius: 999px;
  position: relative;
}

input.wireframe::before {
  content: '';
  background: var(--color-primary);
  border-radius: 999px;
  position: absolute;
  width: 1rem;
  height: 1rem;
  top: 0.125rem;
  left: 0.125rem;
  transform: scale(0.9);
  transition: transform 60ms ease-in;
}

input.wireframe:checked::before {
  transform: translatex(1rem);
}

/* Make wireframe affect the button */
button > div {
  border: 1px transparent solid;
}

input.wireframe:checked ~ button > div {
  background: hsla(0, 0%, 100%, 0.05);
  border: var(--color-on-background) 1px solid;
  box-shadow: none;
  color: var(--color-on-background);
}

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