/*
=====
DEPENDENCES
=====
*/

:where(.ra-button) {
  background-color: var(--ra-button-background-color, transparent);
  padding: var(--ra-button-padding, var(--ra-button-padding-top, 0) var(--ra-button-padding-right, 0) var(--ra-button-padding-bottom, 0) var(--ra-button-padding-left, 0));
  border: var(--ra-button-border, var(--ra-button-border-width, 0) var(--ra-button-border-style, solid) var(--ra-button-border-color, currentcolor));

  font-family: var(--ra-button-font-family, inherit);
  font-size: var(--ra-button-font-size, 1em);
  font-weight: var(--ra-button-font-weight, inherit);

  color: var(--ra-button-color, currentcolor);
  text-align: var(--ra-button-text-align, center);
  text-transform: var(--ra-button-text-transform, inherit);
  letter-spacing: var(--ra-button-letter-spacing, inherit);
  word-spacing: var(--ra-button-word-spacing, inherit);

  text-shadow: var(--ra-button-text-shadow, none);
  display: var(--ra-button-display, inline-flex);
}

.ra-button::-moz-focus-inner,
.ra-button[type="button"]::-moz-focus-inner,
.ra-button[type="reset"]::-moz-focus-inner,
.ra-button[type="submit"]::-moz-focus-inner {

  /* Remove the inner border and padding in Firefox. */

  border-style: none;
  padding: 0;
}

.uia-hamburger{  
  --_uia-hamburger-thickness: var(--uia-hamburger-thickness, 4px);

  display: var(--uia-hamburger-display, inline-flex);
  inline-size: var(--uia-hamburger-width, 28px);
  block-size: var(--uia-hamburger-height, 20px);

  position: var(--uia-hamburger-position, relative);
}

.uia-hamburger::before, 
.uia-hamburger::after, 
.uia-hamburger__label{
  inline-size: 100%;
  border-block-start: var(--_uia-hamburger-thickness) solid var(--uia-hamburger-background-color, currentColor);
  border-radius: var(--uia-hamburger-border-radius, 5px);

  position: absolute;
}

.uia-hamburger::before, 
.uia-hamburger::after{
  content:"";
}

.uia-hamburger::before{
  inset-block-start: var(--uia-hamburger-first-line-position, 0);
}

.uia-hamburger::after{
  inset-block-start: var(--uia-hamburger-third-line-position, calc(100% - var(--_uia-hamburger-thickness)));
}

.uia-hamburger__label{
  /* The calculation of middle hamburger button line position */

  inset-block-start: calc(50% - calc(var(--_uia-hamburger-thickness) / 2));
}

/*
=====
HELPERS
=====
*/

.ha-screen-reader {
  width: var(--ha-screen-reader-width, 1px);
  height: var(--ha-screen-reader-height, 1px);
  padding: var(--ha-screen-reader-padding, 0);
  border: var(--ha-screen-reader-border, none);

  position: var(--ha-screen-reader-position, absolute);
  clip: var(--ha-screen-reader-clip, rect(1px, 1px, 1px, 1px));
  overflow: var(--ha-screen-reader-overflow, hidden);
}

/*
=====
MENU STYLES
=====
*/

.menu{
  --_menu-circle-size: var(--menu-circle-size, 6.25rem);
  --_menu-circle-height: calc(var(--_menu-circle-size) / 2);  
  --_menu-circle-background-color: var(--menu-circle-background-color, currentColor);

  --_menu-hamburger-width: var(--menu-hamburger-width, 1.75rem);
  --_menu-hamburger-height: var(--menu-hamburger-height, 1.25rem);

  --uia-hamburger-width: var(--_menu-hamburger-width);
  --uia-hamburger-height: var(--_menu-hamburger-height);
  --uia-hamburger-background-color: var(--menu-hamburger-background-color, #fff);
  --uia-hamburger-position: absolute;
  
  inline-size: 100%;

  display: flex;
  flex-direction: column;
  align-items: center;  

  position: fixed;
  inset-block-end: 0;
  inset-inline-start: 0;
  z-index: var(--menu-z-index, 9998);
}

.menu__nav{
  box-sizing: border-box;
  inline-size: 100%;
  block-size: 0;

  transition: opacity .2s ease-out;
  opacity: 0;

  display: flex;
  align-items: flex-end;
  z-index: 2;
}

.menu__list{
  inline-size: 100%;
  max-block-size: 100%;

  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.menu__group{
  padding: .5rem 2rem; 
  font-size: 2rem;
  font-weight: 700;
  text-transform: uppercase;
}

.menu__toggle{
  box-sizing: border-box;
  inline-size: var(--_menu-circle-size);
  block-size: var(--_menu-circle-height);
  flex: none;

  position: relative;
  isolation: isolate;
}

.menu__toggle::before{
  content: "";
  box-sizing: border-box;
  inline-size: 1em;
  block-size: 1em;
  border: 1px solid var(--_menu-circle-background-color);
  font-size: var(--_menu-circle-size);

  background-color: var(--_menu-circle-background-color);
  border-radius: 50%;

  position: absolute;
  inset-block-end: -.5em;
  inset-inline-start: calc(50% - .5em);
  z-index: -1;
}

.menu__hamburger{
  inset-inline-start: 50%;
  inset-block-end: .75rem;
  transform: translateX(-50%);
}

/*
=====
MENU STATES
=====
*/

.menu_activated{
  --uia-hamburger-first-line-position: 50%;
  --uia-hamburger-third-line-position: 50%;

  block-size: 100%;
}

.menu_activated .menu__nav{
  flex-grow: 1;
  opacity: 1;

  will-change: opacity;
  transition-duration: .2s;
  transition-delay: .3s;
}

.menu_activated .menu__toggle::before{
  inline-size: 100vmax;
  block-size: 100vmax;
  transform: translate3d(-50vh, -50vh, 0) scale(5);
}

.menu:not(.menu_activated) .menu__list{
  display: none;
}

.menu_activated .menu__hamburger::before{
  transform: translate3d(0, -50%, 0) rotate(45deg);
}

.menu_activated .menu__hamburger::after{
  transform: translate3d(0, -50%, 0) rotate(135deg);
}

.menu_activated .menu__hamburger-label{
  transform: rotate(-45deg) translate3d(-.285em, -.3em, 0);
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference){
  .menu__toggle::before{
    will-change: width, height;
    transition: transform .25s cubic-bezier(0.04, -0.1, 0.29, 0.98),
      width .25s cubic-bezier(0.04, -0.1, 0.29, 0.98),
      height .25s cubic-bezier(0.04, -0.1, 0.29, 0.98);
  }  

  .menu_activated .menu__toggle::before{
    transition-duration: 1s;
  }

  .menu__hamburger::before, 
  .menu__hamburger::after, 
  .menu__hamburger-label{
    transition-timing-function: ease;
    transition-duration: .15s;  
  }

  .menu__hamburger::before, 
  .menu__hamburger::after{
    transition-property: transform;
  }

  .menu__hamburger-label{
    transition-property: transform, opacity;
  }
}

/*
=====
HELPERS
=====
*/

:where(.ra-link) {
  display: var(--ra-link-display, inline-flex);
}

:where(.ra-link[href]) {
  color: var(--ra-link-color);
  text-decoration: var(--ra-link-text-decoration, none);
}

:where(.ra-list) {
  padding-inline-start: var(--ra-list-padidng-inline-start, 0);
  margin-block: var(--ra-list-margin-block-start, 0) var(--ra-list-margin-block-end, 0);
  list-style: var(--ra-list-list-style, none);
}

/*
=====
UIA-CONTROL
=====
*/

.uia-control__group {
	cursor: var(--uia-control-cursor, var(--_uia-control-cursor, pointer));	
	line-height: var(--uia-control-line-height, 1);
}

.uia-control {
	--_uia-control-padding_default: 0;

	--_uia-control-border-width: var(--uia-control-border-width);
	--_uia-control-border-style: var(--uia-control-border-style, solid);
	--_uia-control-border-color: var(--uia-control-border-color, currentColor);

	--_uia-control-padding: var(--uia-control-padding,
														var(
															--uia-control-padding-block-start,
															var(--_uia-control-padding_default)
														)
														var(
															--uia-control-padding-inline-end,
															var(--_uia-control-padding_default)
														)
														var(
															--uia-control-padding-block-end, 
															var(--_uia-control-padding_default)
														)
														var(
															--uia-control-padding-inline-start,
															var(--_uia-control-padding_default)
														)
													);
	--_uia-control-border: var(--_uia-control-border-width) var(--_uia-control-border-style) var(--_uia-control-border-color);
	--_uia-control-border-radius: var(--uia-control-border-radius, .25rem);
}

.uia-control__group {
	display: var(--uia-control-display, inline-flex);
	gap: var(--uia-control-gap, .5rem);
	
	padding: var(--_uia-control-padding);

	border: var(--_uia-control-border);
	border-radius: var(--_uia-control-border-radius);
	background-image: linear-gradient(
		var(--uia-control-background-degree, 135deg),
		var(
			--uia-control-background-start-color,
			var(--uia-control-background-color)
		) var(--uia-control-background-start-position, 0),
		var(
			--uia-control-background-end-color,
			var(--uia-control-background-color)
		) var(--uia-control-background-end-position, 100%)
	);
}

/*
=====
DEMO
=====
*/

:root{
  --menu-circle-background-color: #19e619;
  --menu-hamburger-background-color: #fff;
}

@media (prefers-color-scheme: dark){

	:root{
    --menu-circle-background-color: #45526b;
    --menu-hamburger-background-color: #ebecef;
    
		--accent-mode-color: #ebecef;
		--main-mode-color: #1e2229;
	}	
}

:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 5px;
}

body{
  display: flex;
  flex-direction: column;
  min-block-size: 100dvh;
  margin: 0;  
  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Open Sans, Ubuntu, Fira Sans, Helvetica Neue, sans-serif;
  background-color: var(--main-mode-color);
  color: var(--accent-mode-color);
}

.page{
  max-inline-size: 380px;
  padding: 1rem;
  margin: auto;  
  text-align: center;
}

.page__name{
  display: block;
  font-size: 2rem;
  font-weight: 700;
}

.page__hint{
  display: block;
  line-height: 1.45;
  margin-block-size: 1rem;
}

.menu_activated{
  color: #ebecef;
}

.linktr{
  --uia-control-background-color: rgb(209, 246, 255);
  --uia-control-border-radius: 2rem;
  --uia-control-padding: .75rem 1.5rem;
  --uia-control-border-width: 1px;
  --uia-control-border-color: rgb(209, 246, 255);
  
  order: -1;
  padding: 1.75rem;
  text-align: center;
}

.linktr__goal{ 
  box-shadow: rgb(8 49 112 / 24%) 0 2px 8px 0;  
}

@media (prefers-color-scheme: dark){

	.linktr{
    --uia-control-background-color: #45526b;
    --uia-control-border-color: #45526b;
	}	
}

@media (min-width: 1024px){

  .linktr{
    position: absolute; 
    right: 1rem; 
    bottom: 1rem;
  }
}