.list {
  /* Custom Property setup */
  --list-z-index: 1;
  --list-border-radius: 0.75rem;
  --list-padding-outer: 0.75rem;
  --list-size-leading-visual: 8rem;

  /* Setup container query support */
  container-type: inline-size;
}

/* 
  Extending the primary action's clickable area
  Adapted semantic breakout button technique:
  https://piccalil.li/blog/create-a-semantic-break-out-button-to-make-an-entire-element-clickable/
  [1] "Breaks" the link out.
  [2] Extends the clickable area outwards in all directions.
  [3] "Clamps" the statically-declared position for the `.list-item-primary-action` to the list item's computed size.
*/
.list-item {
  position: relative; /* [3] */
}

.list-item-primary-action {
  position: static; /* [1] */
  
  /* [2] */
  &::before {
    content: '';
    display: block;
    position: absolute;
    inset: 0; /* h/t Anna Tudor: https://bsky.app/profile/anatudor.bsky.social/post/3mchwbbz4hc2m */
  }
}

/* Ensure all interactive content placed within the secondary content area can be clicked */
:where(
  .list-item-secondary-action,
  a,
  button,
  input,
  textarea,
  label,
  select,
  details,
  audio,
  video,
  object,
  [contenteditable],
  [tabindex]
)
 {
  /* Helps ensures secondary actions always float above the primary action's clickable area */
  z-index: calc(var(--list-z-index) + 1);
}


/* List item grids */
.list-item {
  align-items: center;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas:
    'primary'
    'secondary';
  padding: calc(var(--list-padding-outer) / 2);
  
  @container (width > 30rem) {
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      'primary secondary';
    padding: var(--list-padding-outer);
  }
}

.list-item-primary-content-area {
  display: grid;
  gap: 0 1rem;
  grid-area: primary;
  grid-template-columns: -webkit-max-content 1fr;
  grid-template-columns: max-content 1fr;
  grid-template-rows: auto auto;
  grid-template-areas:
    'leading-visual title'
    'leading-visual description';
  
  @container (width > 30rem) {
    gap: 0 0.75rem;
  }
}

.list-item-secondary-content-area {
  grid-area: secondary;
  justify-self: end;
}

.list-item-leading-visual {
  grid-area: leading-visual;
}

.list-item-title {
  align-self: end;
  grid-area: title;
}

.list-item-description {
  grid-area: description;
}




/* List styling */
.list-title {
  color: var(--color-blue);
  font-size: 1.25rem;
  letter-spacing: 0.01ch;
  -webkit-margin-start: 0.5rem;
          margin-inline-start: 0.5rem;
  text-transform: uppercase;
  
  @media (prefers-color-scheme: dark) {
    color: var(--color-gray);
  }
}

.list {
  -webkit-margin-before: 1rem;
          margin-block-start: 1rem;
}

.list-item {
  -webkit-border-before: var(--border-width-thin) solid var(--color-purple-light);
          border-block-start: var(--border-width-thin) solid var(--color-purple-light);
  -webkit-border-start: var(--border-width-thin) solid var(--color-purple-light);
          border-inline-start: var(--border-width-thin) solid var(--color-purple-light);
  -webkit-border-end: var(--border-width-thin) solid var(--color-purple-light);
          border-inline-end: var(--border-width-thin) solid var(--color-purple-light);
  background-color: hsl(from var(--color-white) h s 97%);
  transition: var(--transition-short) ease-in-out background-color;

  &:first-of-type {
    border-radius: var(--list-border-radius) var(--list-border-radius) 0 0;
  }

  &:last-of-type {
    -webkit-border-after: var(--border-width-thin) solid var(--color-purple-light);
            border-block-end: var(--border-width-thin) solid var(--color-purple-light);
    border-radius: 0 0 var(--list-border-radius) var(--list-border-radius);
  }
  
  &:hover {
    background-color: var(--color-white);
  }
  
  &:focus-within {
    outline: 0.1rem solid var(--color-purple-dark);
    outline-offset: -0.25rem;
  }
  
  @media (prefers-color-scheme: dark) {
    border-block-start-color: var(--color-purple-dark);
    border-inline-start-color: var(--color-purple-dark);
    border-inline-end-color: var(--color-purple-dark);
    background-color: hsl(from var(--color-black) h s 3%);
    
    &:last-of-type {
      border-block-end-color: var(--color-purple-dark);
    }
    
    &:hover {
      background-color: hsl(from var(--color-black) h s 6%);
    }
    
    &:focus-within {
      outline: 0.1rem solid var(--color-white);
    }
  }
  
  @media (forced-colors: active) {
    &:hover {
      background-color: Canvas;
    }
  }
  
  @media print {
    background-color: transparent;
  }
}

.list-item-leading-visual {
  border-radius: var(--border-radius-small);
  height: var(--list-size-leading-visual);
  width: var(--list-size-leading-visual);
}

.list-item-primary-action {
  color: var(--color-purple-dark);
  font-size: 1.5rem;
  text-decoration: none;
  letter-spacing: var(--tracking-tight);

  /* Focus effect is applied to the list item container via `:focus-within`  */
  &:focus {
    outline: none;
  }

  &:hover,
  &:focus-visible {
    text-decoration: underline;
  }
  
  @media (prefers-color-scheme: dark) {
    color: var(--color-white);
  }
}

.list-item-description {
  -webkit-margin-before: 0.25rem;
          margin-block-start: 0.25rem;
}

.list-item-secondary-content-area {
  display: flex;
  gap: 0.25rem;
  -webkit-margin-end: 0.5rem;
          margin-inline-end: 0.5rem;  

  @container (width > 30rem) {
    -webkit-margin-end: 0.75rem;
            margin-inline-end: 0.75rem;
  }
}

.list-item-secondary-action {
  --list-item-secondary-action-size: 3.5rem;

  background-color: var(--color-purple-dark);
  border: var(--border-width-thick) solid var(--color-white);
  border-radius: var(--border-radius-circle);
  cursor: pointer;
  display: grid;
  height: var(--list-item-secondary-action-size);
  place-items: center;
  transition: var(--transition-shortest) ease-in-out background-color;
  width: var(--list-item-secondary-action-size);

  &:focus-visible {
    outline: 0.15rem solid var(--color-purple-dark);
  }

  &:hover,
  &:focus-visible {
    background-color: hsl(from var(--color-purple-dark) h s 50%);
  }
  
  &:active {
    background-color: hsl(from var(--color-purple-dark) h s 10%);
    position: relative;
      top: 1px;
    transition: none;
  }
  
  @media (prefers-color-scheme: dark) {
    background-color: var(--color-blue);
    border-color: var(--color-black);

    &:focus-visible {
      outline: 0.15rem solid var(--color-white);
    }

    &:hover,
    &:focus-visible {
      background-color: hsl(from var(--color-blue) h s 50%);
    }
    
    &:active {
      background-color: hsl(from var(--color-blue) h s 10%);
    }
  }
  
  @media (forced-colors: active) {
    background-color: ButtonText;
    
    &:hover,
    &:focus {
      background-color: ButtonFace;
      
      svg {
        stroke: ButtonText;
      }
    }
    
    svg {
      stroke: ButtonFace;
    }
  }
  
  @media print {
    display: none;
  }
}

.list-item-secondary-action-icon {
  pointer-events: none;
  stroke: var(--color-white);
  
  .list-item-secondary-action:active & {
    stroke: var(--color-black);
  }
}

[data-icon="add-to-cart"] {
  position: relative;
    top: 1px;
    right: 1px;
}

.legal {
  font-size: 0.8rem;
  -webkit-margin-before: 3rem;
          margin-block-start: 3rem;
  text-align: center;
}

  .legal-link {
    color: var(--color-blue);
    
    &:hover,
    &:focus {
      text-decoration: none;
    }

    @media (prefers-color-scheme: dark) {
      color: var(--color-gray);
    }
  }
  



/* Pen setup */
:root {
  --border-radius-circle: 99999px;
  --border-radius-small: 0.3rem;
  --border-width-thin: 1px;
  --border-width-thick: 0.3rem;
  --color-black: hsl(0 0% 22.7%);
  --color-blue: hsl(228 42.9% 22%);
  --color-gray: hsl(225 3.4% 76.9%);
  --color-purple-dark: hsl(329 45.9% 31.2%);
  --color-purple-light: hsl(257 15.1% 53.3%);
  --color-sand: hsl(27 83.3% 95.3%);
  --color-white: hsl(0 0% 100%);
  --tracking-tight: -0.05ch;
  --transition-shortest: 100ms;
  --transition-short: 150ms;
}

*, 
*::before, 
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-sand);
  color: var(--color-black);
  font-family: "Rubik", sans-serif;
  font-optical-sizing: auto;
  margin: 2rem 1rem;
  
  @media (min-width: 30rem) {
    margin: 4rem 2rem;
  }
  
  @media (prefers-color-scheme: dark) {
    background-color: var(--color-blue);
    color: var(--color-purple-light);
  }
  
  @media print {
    background-color: transparent;
    color: #000;
    margin: 1in;
    
    a {
      color: #000 !important;
    }
  }
}

button {
  background-color: transparent;
  border: none;
  line-height: 1;
}

.hide-visually {
  clip: rect(0 0 0 0);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}