/*
  original design and CSS trig functions 
  by Una Kravets: https://codepen.io/una/pen/VwGRpXN

note: there are some duplicate rulesets in the CSS because the popover-related selectors are still in flux. 
*/


:root {
  --btn-size: 2.5rem;
  --extra-space: 1.2rem;
}

/* Where the magic happens */
.item {
  --radius: calc(var(--btn-size) + var(--extra-space));
  background-color: var(--bg);
  transform: 
			 translateX(calc(cos(var(--angle)) * var(--radius)))
		  translateY(calc(sin(var(--angle) * -1) * var(--radius)))
    rotate(0deg);
  transition: all 0.3s var(--delay) ease;
}

/* Every item gets a background, angle, and delay */
.item:nth-child(1) {
  --bg: lightpink;
  --angle: 0deg;
  --delay: 0s;
}

.item:nth-child(2) {
  --bg: lightgrey;
  --angle: 45deg;
  --delay: 0.1s;
}

.item:nth-child(3) {
  --bg:	palegreen;
  --angle: 90deg;
  --delay: 0.2s;
}

.item:nth-child(4) {
  --bg: violet;
  --angle: 135deg;
  --delay: 0.3s;
}

.item:nth-child(5) {
  --bg: paleturquoise;
  --angle: 180deg;
  --delay: 0.4s;
}

/* :open is likely changing to :popover-open */
.actions ul:not(:open) .item {
  --radius: 0;
  --angle: 0;
  rotate: 45deg;
}
/* so duplicated the above in hopes that this'll stop an inevitable breakage */
.actions ul:not(:popover-open) .item {
  --radius: 0;
  --angle: 0;
  rotate: 45deg;
}

/* list container */
.action-items {
	background: none; /* undo popover default style */
	border: none; /* undo popover default style */
	visibility: visible; /* see :not(:open) selector */
	overflow: visible; /* undo popover's overflow auto */
	pointer-events: none; /* don't want the container preventing clicking on the triggering button */
}

.action-items:not(:open) {
	visibility: hidden; /* the ul is using display: grid. rather than undoing that and having to muck with toggling the display value, set visibility hidden when the popover is closed to ensure it's 1. not visible and 2. hidden from the accessibility tree */
}
.action-items:not(:popover-open) {
	visibility: hidden;
}



/* Other styles */
.actions,
.action-items {
	position: fixed;
	inset: 0;
}

.item {
  border-radius: 50%;
  width: var(--btn-size);
  aspect-ratio: 1/1;
	 pointer-events: auto; /* had to make the parent pointer-events none, so re-enable pointer activatino of the buttons */
	 opacity: 0;
	  /* changing this to a popover, the actions that animate out no longer 
	     neatly z-index behind the triggering button.  so, fake it a bit by 
	     giving them an opacity 0 to start */
}

.action-items:open .item {
	opacity: 1;
}
.action-items:popover-open .item {
	opacity: 1;
}

.actions .toggle {
  border-radius: 50%;
  width: var(--btn-size);
  aspect-ratio: 1/1;
  background: darksalmon;
  z-index: 1;
	 transition: scale .2s ease-in-out;
}

/* Grid piles */
.actions,
.action-items,
.item {
  display: grid;
  place-content: center;
}

.actions  > *,
.action-items > *,
.item button {
  grid-area: 1/1;
}

.actions button {
  border: none;
  background: none;
  font-family: 'Noto Emoji';
  color: #222;
  font-size: 1.25rem;
}

.toggle:hover,
.toggle:focus,
.actions .item:hover,
.actions .item:focus-within {
	scale: 1.2;
}

.actions button {
	outline: 0; /* we'll get outlines from other stuffs */
}

button::after {
	content: '';
	position: absolute;
	border-radius: 100%;
	inset: 0;
}

.actions button:focus-visible::after {
	transition: ease-in-out .2s rotate;
	rotate: 360deg;
	outline: 2px dashed deeppink;
	outline-offset: 2px;
}