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

@layer demo {
  :root{
	interpolate-size: allow-keywords;
		
		--transition-duration: 300ms;
		
  /* select element */
    --select-width: 100px;
    --select-padding: .25rem .75rem;
    --select-text-color: light-dark(rgb(113, 113, 123),rgb(245 245 245));
    --select-bg-color: light-dark(rgb(245 245 245),dodgerblue);
    --select-bg-color-hover: light-dark(rgb(228 228 231),rgb(0 105 168));
    --select-border-color: 1px solid light-dark(rgb(212 212 216),rgb(0 105 168));
    /*  
    --select-border-color-open:rgb(94 165 0);
    --select-radius: 999vw;
    --select-trans-duration: 150ms;
    --select-trans-duration-open: 150ms;
    --select-trans-easing: ease-in-out;
    */
		
		/* :picker options wrapper */
    --option-list-size: calc(var(--select-width) * 4);
    --option-list-bg-color: light-dark(rgb(226 232 240), rgb(29 41 61));
    --option-list-border: 1px solid var(--clr-lines);
		--option-list-padding: 1rem;
    --option-list-radius: 10px;

		/* options */
    --option-size: var(--select-width);
    --option-padding: 2rem;
    --option-offset: calc(var(--select-width) * 1);
    --option-bg-color: light-dark(rgb(202, 213, 226), rgb(69, 85, 108));
    --option-bg-color-hover: rgb(0 105 168 / 1);
    --option-bg-color-selected: deeppink;
		--option-border: none;
    --option-border-color: var(--clr-lines);
		--option-font-size: .8rem;
    --option-text-color: light-dark(rgb(10, 113, 123), rgb(255 255 255));
    --option-text-color-hover: white;
    --option-text-color-selected: white;
    --option-radius: 9in;
		
		/* button > selected element - essentially the same as the option styling in this demo */
		--selected-element-radius: var(--option-radius);
		--selected-element-padding: var(--option-padding);
    --selected-element-bg-color: var(--option-bg-color);
		--selected-element-text-color: var(--option-text-color);
    --selected-element-border-color: var(--option-border-color);
  }
  
  /* base select styles for non supporting browsers */
  select {
    width: var(--select-width);
		margin-inline: auto;
    background-color: var(--select-bg-color);
		color: var(--sellecttext-color);
    padding: var(--select-padding);
    outline: 1px dashed transparent;
    border: var(--select-border-color);
    transition: 
      background-color var(--transition-duration) ease-in-out,
      outline var(--transition-duration) ease-in-out,
      scale var(--transition-duration) ease-in-out;
    &:hover,
    &:focus,
    &:active {
      scale: 1.1;
    }
    &:focus-visible{
      outline: 1px dashed dodgerblue;
      outline-offset: 5px;
    }
    selectedcontent > svg,
    option > svg{
      display: none; /* not really needed as these won't be displayed anyway */
    }
    /* hide "menu" option */
    option:first-of-type{
      display: none;
    }
 	}

	
  /* only if the browser supports custom select lists */
  @supports (appearance: base-select) {
    select,::picker(select) {
      appearance: base-select;
    }
    select{
      background-color: transparent;
      border: none;
      padding: 0;
			border-radius: 9in;
			
			/* no arrow */
      &::picker-icon {
        display: none;
      }
        
      /* hide text labels - maybe add as tooltips ? */
      selectedcontent > span,
      option > span{
        /* labels*/
        display: block;  
        position: absolute;
        bottom: 1em;
        left: 50%;
        translate: -50% 50%;
        transition: all var(--transition-duration) ease-in-out;
        opacity: 0;
      }
        
      /* display button and svgs */
      selectedcontent > svg,
      option > svg{
        display: block;
        width: 100%;
        aspect-ratio: 1;
        transition: 
					scale var(--transition-duration) ease-in-out, 
					translate var(--transition-duration) ease-in-out;
      }
        
      button{
        width: var(--select-width);
        aspect-ratio: 1;
        /* selected option is displayed in this element so essentially the same styling as the options */
        selectedcontent {
          display: grid;
          place-content: center;
          padding: var(--selected-element-padding);
					border: 1px solid var(--selected-element-border-color);
          border-radius: var(--selected-element-radius);
          background-color: var(--selected-element-bg-color);
          color: var(--selected-element-text-color);
					/*box-shadow: inset 1q 1q rgb(255 255 255 /.5),  inset -1q -1q rgb(255 255 255 /.5);*/
          transition: 
            opacity var(--transition-duration) ease-in-out,
            scale var(--transition-duration) ease-in-out ;
        }
          
      }
      /* scale down button when open */
      &:open selectedcontent{
        transiton-delay: 0ms;
        opacity: 0;
        scale: .5;
      }
        
      /* options list */
      &::picker(select) {
				
				--items: calc(sibling-count() - 1);
				
        pointer-events: none;
        position: relative;
        position-area: span-all; /* position over select element */
        width: var(--option-list-size);
        aspect-ratio: 1;
        border: none;
        border-radius: var(--option-list-radius);
        opacity: 0;
        scale: 0;
        background: transparent;
        transition: all var(--transition-duration) allow-discrete;
				backdrop-filter: blur(2px);
      }
      /* scale and opacity in when open */
      &:open::picker(select) {
        pointer-events: auto;
        opacity: 1;
        scale: 1;
        @starting-style{
          opacity: 0;
          scale: .4;
        }
      }
      
      option {
        /* show "menu" icon as we can use this to "close" the select list */
        &:first-of-type{
          display: block;
          scale: .5;
					transition: 0ms;
        }
        &:not(:first-of-type){
          /* leave "menu" option in center */
          --i: calc(sibling-index() );
          --angle: calc(360deg / calc(var(--items) - 1) * var(--i));
          transform: 
            rotate(var(--angle)) 
            translate(var(--option-offset)) 
            rotate(calc(var(--angle) * -1));
        }
        grid-area: 1/1;
        position: absolute;
        inset: 50%;
        translate: -50%  -50%;
        cursor: pointer;
        width: var(--option-size);
        aspect-ratio: 1;
        padding: var(--option-padding);
        border-radius: var(--option-radius);
				
				border: 1px solid var(--option-border-color);
        color: var(--option-text-color);
        background-color: var(--option-bg-color);
				/*	box-shadow: inset 1q 1q rgb(255 255 255 /.5), inset -1q -1q rgb(255 255 255 /.5);*/
        isolation: isolate;
        outline: 1px dashed transparent;
        transition: 
          color var(--transition-duration) ease-in-out,
          opacity var(--transition-duration) ease-in-out,
          outline var(--transition-duration) ease-in-out,
          scale var(--transition-duration) ease-in-out calc((var(--i) - 1) * 200ms), /* delay for staggered reveal if set */
          background-color var(--transition-duration) ease-in-out
          ;
        
        /* no checked mark on current selected option */
        &::checkmark {
          display: none;
        }
        /* selected option */
        &:checked{
          background: var(--option-bg-color-selected);
          color: var(--option-text-color-selected);
        }
      }
	
				
			/* reveal selected element and option labels on hover or focus */
      &:hover  selectedcontent,
      option:hover,
      option:focus-visible{
				background-color: var(--option-bg-color-hover);
				color: var(--option-text-color-hover);
				span{
					opacity: 1;
					translate: -50% -2ex;
				}
				svg{
					scale: .5;
					translate: 0 -2ex;
				}
				&:focus-visible{
          outline: 1px dashed dodgerblue;
          outline-offset: 5px;
        }
			}
		}  
		
		
  }
	
	/* 
	optional stagger option entry
	note - the scale delay is set on scale on the main option selector
	*/
	body:has(input#staggered-options:checked) select:open option{
		@starting-style{
			scale: 0;
		}
	}
}


@layer controls{
  .controls{
    position: fixed;
    bottom: 1rem;
		left: 50%;
		translate: -50% 0;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: .8rem;
    border: 1px solid rgb(98, 116, 142);
    padding: .25em 1em;
    border-radius:3px;
    label{
      display: flex;
      align-items: center;
      gap: .25rem;
      transition: color 150ms ease-in-out;
      &:hover{
        color: dodgerblue;
      }
    }
  }
}



   /* general styling not relevant for this demo */
@layer base {
	* {
		box-sizing: border-box;
	}
	:root {
		color-scheme: light dark;
		--bg-dark: rgb(12, 12, 12);
		--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 (appearance: base-select) {
			&::before {
  				content:"Sorry, your browser doesn't support custom select styling ";
  				position: fixed;
  				top: 1rem;
  				left: 50%;
  				translate: -50% 0;
  				font-size: 0.8rem;
          color: white;
					background-color: red;
					padding: .5em 1em;
  		}
		}
		
		h1{
			font-size: 1.2rem;
			margin: 0;
		}
	}
}