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

:root {
	--color-bg-light: #4DB6AC;
	--color-bg-dark: #00897B;
	--color-grey-light: #ECEFF1;
	--color-grey-dark: #9999aa;
	--color-text: #455A64;
	--color-red-light: #E57373;
	--color-red-dark: #C62828;
	--color-green-light: #81C784;
	--color-green-dark: #00796B;
	--color-white: #FFFFFF;
	--voter-button-size: 3rem;
	--voter-button-icon-size: 1.75rem;
	--voter-progress-width: 75%;
}

  .container {
	z-index: 9999;
	height: auto;
	position: absolute;
	width: 100%;
	bottom: 20vh;
	display: flex;
	align-items: center;
	justify-content: center;
  }
  
  .voter {
	z-index: 99999;
	background-color: var(--color-white);
	padding: 2rem 4rem 4rem;
	border-radius: 1rem;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	gap: 2rem;
	width: calc(100% - 10rem);
	max-width: 480px;
	box-shadow:
	  2px 4px 6px rgb(0 0 0 / 20%),
	  2px 8px 12px rgb(0 0 0 / 10%);
  }
  
  .voter__title {
	font-family: sans-serif;
	font-size: 1.75rem;
	color: var(--color-text);
  }
  
  .voter__ui {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: 100%;
  }
  
  .voter__progress {
	display: block;
	position: relative;
	width: 100%;
	height: 1rem;
	border: none;
	background-color: var(--color-red-light);
	flex: 1;
	border-radius: .5rem;
	overflow: hidden;
  }
  
  .voter__progress::after {
	content: "";
	display: block;
	height: 100%;
	width: var(--voter-progress-width);
	background-color: var(--color-green-light);
	position: absolute;
	top: 0;
	left: 0;
	border-right: 2px solid var(--color-white);
	transition: width .25s ease-in-out;
  }
  
  .voter__button {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	height: var(--voter-button-size);
	width: var(--voter-button-size);
	border-radius: 50%;
	border: none;
	background-color: var(--color-grey-light);
	cursor: pointer;
  }
  
  .voter__button[selected-button] .voter__button-icon {
	fill: white;
  }
  
  .voter__button[button-action="down"][selected-button] {
	background-color: var(--color-red-light);
  }
  
  .voter__button[button-action="up"][selected-button] {
	background-color: var(--color-green-light);
  }
  
  .voter__button-icon {
	transition: fill .25s ease-in-out;
  }
  
  .voter__button[button-action="down"] .voter__button-icon {
	transform: rotate(180deg);
  }
  
  .voter__button[button-action="down"]:is(:hover, :focus-visible) .voter__button-icon {
	fill: var(--color-red-light);
  }
  
  .voter__button[button-action="down"][selected-button]:is(:hover, :focus-visible) .voter__button-icon {
	fill: var(--color-red-dark);
  }
  
  .voter__button[button-action="up"]:is(:hover, :focus-visible) .voter__button-icon {
	fill: var(--color-green-light);
  }
  
  .voter__button[button-action="up"][selected-button]:is(:hover, :focus-visible) .voter__button-icon {
	fill: var(--color-green-dark);
  }
  
  .voter__button:focus-visible {
	border: none;
	outline-offset: 2px;
  }
  
  .voter__button[button-action="down"]:focus-visible {
	outline: 2px solid var(--color-red-light);
  }
  
  .voter__button[button-action="up"]:focus-visible {
	outline: 2px solid var(--color-green-light);
  }
  
  .voter__button-icon {
	height: var(--voter-button-icon-size);
	width: var(--voter-button-icon-size);
	fill: var(--color-grey-dark);
  }
  
  .voter__button-count {
	position: absolute;
	bottom: -2rem;
	font-size: 1.25rem;
	color: var(--color-text);
	font-weight: bold;
	pointer-events: none;
  }
  
  .voter__ripple {
	pointer-events: none;
	position: absolute;
	top: 50%;
	left: 50%;
	height: 100%;
	width: 100%;
	border-radius: 50%;
	animation: rippleAnimation .35s ease-out;
	opacity: 0;
  }
  
  .voter__ripple[ripple-type="null"] {
	background-color: var(--color-grey-dark);
  }
  
  .voter__ripple[ripple-type="up"] {
	background-color: var(--color-green-light);
  }
  
  .voter__ripple[ripple-type="down"] {
	background-color: var(--color-red-light);
  }
  
  @keyFrames rippleAnimation {
	0% {
	  opacity: 1;
	  transform: translate(-50%, -50%) scale(.5);
	}
	50% {
	  opacity: .875;
	  transform: translate(-50%, -50%) scale(1);
	}
	100% {
	  opacity: 0;
	  transform: translate(-50%, -50%) scale(2);
	}
  }

  @media (orientation: portrait) and (max-width: 480px){
	.voter__ui {
		gap: 0.5em;
	}
	.voter__progress {
		display: none;
	}
  }