* { box-sizing: border-box; }

:root {
  --color-main: #0f5390;
  --color-background: #f3f3f3;
  --color-error: #ef1610;
  --color-input: #ecedeb;
  --color-text: #333;
  --send-border: 4px;
  --send-height: 80px;
  --columns: 1;
  --max-width: 500px;
  --min-width: 200px;
}

body {  
  font-family: sans-serif;
  color: var(--color-text);
  background-color: var(--color-background);
  margin: 0;
  padding: 0;
}

label { display: block; }

input, select, textarea {
  width: 100%;
  height: 2rem;
  padding: 0 0.5rem;
  background-color: #ecedeb;
  border: none;
  border-bottom: 2px solid #b7b7b7;
}

#root main {
  /*width: min(var(--max-width), 100%);*/
  width: clamp(var(--min-width), 100%, var(--max-width));
  margin: 1rem auto;  
}

main[data-waiting] #send { display: none; }

#inputs {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

#inputs [data-error] {
  color: var(--color-error);
  box-shadow: 0 0 4px 1px var(--color-error);
}

#inputs img { max-width: 100%; }

button.style {
  background-color: unset;
  color: var(--color-main);
  font-weight: bold;
  text-transform: uppercase;
  padding: 0.5rem 1rem;
  border: 2px solid var(--color-main);
  border-radius: 4px;
  transition: all 200ms ease-in-out;
  cursor: pointer;
}

button.style:hover {
  color: white;
  background-color: var(--color-main);
}

.hidden { display: none; }
.pointer { cursor: pointer; }

/* INFO */
#info {
  color: #6c6c6c;
  font-size: 0.5rem;
  font-weight: bold;
  text-align: center;
  text-transform: uppercase;
}

#modal {
  --animation: all 300ms ease-in-out;
  opacity: 0;
  transition: var(--animation);
  pointer-events: none;
}

#modal[data-open="true"] {
  opacity: 1;
  pointer-events: all;
}

#modal > div { 
  transform: scale(0.5);
  transition: var(--animation);
}

#modal[data-open="true"] > div { transform: scale(1); }

[data-dialog="title"] {
  font-size: 1.5rem;
  text-align: center;
}

/* PICKER */
[data-picker] {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: auto;
  overscroll-behavior-y: contain;
  scroll-snap-type: both mandatory;
}

[data-picker] [data-value] {
  --animation: 400ms;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 10px;
  scroll-snap-align: center;
  transition: all var(--animation) ease-in-out;    
  cursor: pointer;
}

[data-picker] .selected label { color: var(--color-main); }
[data-picker] [data-value] * { pointer-events: none; }
[data-picker] [data-value] img {
  max-width: 100%;
  filter: grayscale(1);
  transition: all var(--animation) ease-in-out;
}  
[data-picker] [data-value]:hover img { filter: grayscale(0); }

/* SEND BUTTON */
#send * { pointer-events: none; }
#send:disabled:not([data-send="finish"]) { filter: grayscale(1); }

[data-runway] {  
  position: relative;
  height: var(--send-height, 50px);
  margin-top: 1rem;
  border-radius: var(--send-height, 50px);  
  background-size: 300% 100%;
}

[data-runway="open"] { 
  animation: runway-gradient 3s infinite linear;  
  background-image: linear-gradient(90deg, rgba(40,123,198,1), rgba(15,83,144,1), rgba(40,123,198,1), rgba(15,83,144,1));
}

[data-runway="goal"] { background-color: #30b010; }

[data-runway] #send {
  position: absolute;
  left: 0;  
  height: 100%;
  background-color: unset;
  font-size: 2rem;
  border: none;  
  z-index: 1;
  cursor: pointer;
}

[data-runway="finish"] #send {
  left: unset;
  right: 0;
}

/* Runway goal is on the right side and only visible when runway is open. */
[data-runway] [data-send="goal"] {
  display: none;
  position: absolute;
  right: 0;
  width: var(--send-height, 50px);
  height: var(--send-height, 50px);
  background-color: #ffffff77;
  border: var(--send-border) solid white;
  border-radius: 50%;  
}

[data-runway="open"] [data-send="goal"] { display: inline-block; }

[data-runway] #send img {
  height: 100%;
  background-color: var(--color-main);
  border: var(--send-border) solid white;
  border-radius: 50%;
  padding: var(--send-border);  
  box-shadow: 0 0 var(--color-main);
}

[data-runway="hidden"] #send:hover img { animation: send-glow 1.5s ease infinite; }

/* Sending form animation. */
[data-runway] #send[data-send] img { animation: send-rotate 2s infinite; }

/* Hide everything else except finish elements. */
#send[data-send="finish"] > :not(.finish) { display: none; }

/* This hides button background and text so that only finish icon is visible and basic text button. */
#send[data-send="finish"] {
  background-color: unset;
  font-size: 0;
}

@keyframes send-glow {
  100% { box-shadow: 0 0 10px 8px transparent; }
}

@keyframes send-rotate {  
  100% { transform: rotate(360deg); }
}

@keyframes runway-gradient {
  0% { background-position: 0 0; }
  100% { background-position: 100% 0; }
}

/* CHECKMARK ANIMATION */

.finish { height: var(--send-height); }
.finish circle { fill: #7ac142; }

.finish path.border {
  fill: none;
  stroke: #30b010;  
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  animation: stroke 0.8s cubic-bezier(.46,.03,.52,.96) 0s forwards;
}

.finish path.checkmark { 
  fill: none;
  stroke: white; 
  stroke-width: 3px;
  stroke-dasharray: 35;
  stroke-dashoffset: 35;
  animation: stroke 0.3s cubic-bezier(.9,.03,.69,.22) 0.8s forwards;
}

@keyframes stroke { 100% { stroke-dashoffset: 0; } }

@media (min-width: 300px) {
  #inputs { grid-template-columns: repeat(var(--columns), 1fr); }
  #inputs > .span { grid-column: span var(--span, 1); }
  #inputs .full { grid-column: var(--column, 1) / -1; }
 }

 @media screen and (min-width: 600px) {
  [data-picker] {
    flex-wrap: wrap;
    flex-direction: row;
  }
}