@import url(https://fonts.bunny.net/css?family=jura:300,500);
@layer base, demo;

@layer demo {
  .linked-list {
    --checkbox-checked-border-color: dodgerblue;
    --radio-checked-border-color: dodgerblue;
    --join-stroke: 1px;
    --join-line: var(--join-stroke) dashed dodgerblue;
    --join-radius: 20px;
    --gap: 10vw;

    position: relative;
    display: grid;
    align-items: start; 
    grid-template-columns: 1fr  1fr;
    width: min(100%, 800px);
    gap: var(--gap);
  }
	
  .list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: .5rem;
    & > li{
      border: 1px solid var(--clr-lines);
      display: flex;
      align-items: center;  
      & > label{
        flex: 1;
        padding: .5rem;
        cursor: pointer;
      }
    }
    /* list of checkbox items */
    &.items li:has(:checked) label {
      anchor-name: --checked-option;
      anchor-scope: --checked-option; /* this allows multiple elements to be linked at the same time */
      border-color:var(--checkbox-checked-border-color);
      &::before,
      &::after{
        content: '';
        position: absolute;
        border: var(--join-line);
        right: calc(anchor(left --radio-option) + var(--gap) / 2);
        left: anchor(right --checked-option);
        /*
				transition-property: left,right,top,bottom,border-radius;
        transition-duration: 150ms;
        transition-timing-function: ease-in-out;
				*/
      }
      &::after {
        right: anchor(left --radio-option);
        left: calc(anchor(left --radio-option) - var(--gap) / 2 - var(--join-stroke));
      }
          
      /* check box is ABOVE the radio button */
      @container style(--relation: -1) {
        &::before {
          border-left-color: transparent;
          border-bottom-color: transparent;
          border-radius: 0 var(--join-radius) 0 0;
          top: anchor(center --checked-option);
          bottom: anchor(top --radio-option);
        }
      
        &::after {
          border-right-color: transparent;
          border-top-color: transparent;
          border-radius: 0 0 0 var(--join-radius);
          top: calc(anchor(top --radio-option) - var(--join-stroke));
          bottom: anchor(center --radio-option);
        }
      }

      /* check box is BELOW the radio button */
      @container style(--relation: 1) {
        &::before {
          border-left-color: transparent;
          border-top-color: transparent;
          border-radius: 0 0 var(--join-radius) 0;
          top: anchor(bottom --radio-option);
          bottom: anchor(center --checked-option);
        }
      
        &::after {
          border-right-color: transparent;
          border-bottom-color: transparent;
          border-radius: var(--join-radius) 0 0 0;
          top: anchor(center --radio-option);
          bottom: calc(anchor(bottom --radio-option) - var(--join-stroke));
        }
      }
      
      /* check box has same index as the radio button */
      @container style(--relation: 0) {
        &::before {
          border-top-color: transparent;
          border-right-color: transparent;
          border-left-color: transparent;
          border-radius: 0;
          top: calc(anchor(center --radio-option) - var(--join-stroke) );
          bottom: calc(anchor(center --checked-option) + var(--join-stroke));
          right: anchor(left --radio-option);
          left: anchor(right --checked-option);
        }
      
        &::after {
          display: none;
        }
      }
    }
      
    /* list of radio options (only one can be checked) */
    &.options li:has(:checked){
      anchor-name: --radio-option;
      border-color: var(--radio-checked-border-color);
    }     
  }
	footer{
		position: fixed;
		bottom: 1rem;
		left: 50%;
		translate: -50% 0;
		font-size: .8rem;
		a{
			color: steelblue;
			text-decoration: none;
			transition: color 150ms ease-in-out;
			&:hover{
				color: hotpink;
			}
		}
	}
	
}
  
  
/* general styling not relevant for this demo */
@layer base {
	* {
		box-sizing: border-box;
	}
	:root {
		color-scheme: light dark;
		--bg-dark: rgb(16, 24, 40);
		--bg-light: rgb(248, 244, 238);
		--txt-light: rgb(10, 10, 10);
		--txt-dark: rgb(245, 245, 245););
		--line-light: rgba(0 0 0 / .25);
		--line-dark: rgba(255 255 255 / .25);
    
    --clr-bg: light-dark(var(--bg-light), var(--bg-dark));
    --clr-txt: light-dark(var(--txt-light), var(--txt-dark));
    --clr-lines: light-dark(var(--line-light), var(--line-dark));
	}
 
	body {
		background-color: var(--clr-bg);
		color: var(--clr-txt);
		min-height: 100svh;
		margin: 0;
		padding: 2rem;
		font-family: "Jura", sans-serif;
		font-size: 1rem;
		line-height: 1.5;
    display: grid;
    place-content: center;
    gap: 2rem;

	}
	@supports not (position-anchor: --test) {
	 body::before {
			content:"Sorry, your browser doesn't support anchor-positioning";
			position: fixed;
			top: 2rem;
			left: 50%;
			translate: -50% 0;
			font-size: 0.8rem;
		}
	}
	h1 {
		margin: 0;
		font-size: 1.2rem;
	}
}