@import url('https://fonts.googleapis.com/css?family=Raleway');

$color-primary: #3187F2;
$easing: cubic-bezier(.5, 0, .5, 1);

*, *:before, *:after {
  box-sizing: border-box;
  position: relative;
  transition: transform .3s $easing;
  transition-property: transform, opacity;
}

html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  font-family: Raleway, Helvetica, Arial, sans-serif;
}

#app {
  color: #656565;
  animation: fade-in .4s linear .3s both;
  @keyframes fade-in {
    from { opacity: 0; }
  }
}

/* ---------------------------------- */

.ui-form {
  padding: 5%;
  display: grid;
  height: 100vh;
  grid-template-columns: auto 1fr;
  grid-template-rows: 1fr;
  // align-items: center;
  justify-items: center;
}

.ui-section {
  grid-row: 1;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  max-width: 30em;
}

.ui-subheading {
  color: #CCC;
  font-weight: bold;
  letter-spacing: 1px;
}

.ui-input {
  appearance: none;
  border: 1px solid #CCC;
  border-radius: 2px;
  padding: .5rem;
  transition: border-color .3s ease;

  &:focus {
    outline: none;
    border-color: #3187F2;
  }
}

.ui-button {
  appearance: none;
  background: $color-primary;
  border: none;
  border-radius: 2px;
  padding: 1rem;
  display: inline-block;
  color: white;
  text-transform: uppercase;
  font-size: .75rem;
  letter-spacing: 2px;
  width: auto;
  margin-top: 1rem;
  transition-timing-function: cubic-bezier(.8, 0, .2, 1);
}

.ui-heading {
  margin: 1rem 0;
}

.ui-field {
  display: flex;
  flex-direction: row;

  > * {
    margin: 0;
  }

  > .ui-button {
    margin-left: -1rem;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    opacity: 0;
    transform: translateX(-50%);
    transition-duration: .6s;
    pointer-events: none;
  }

  > .ui-input:valid + .ui-button {
    pointer-events: auto;
    opacity: 1;
    transform: none;
  }
}

.ui-label {
  margin: 1rem 0;
}

.ui-paragraph {
  line-height: 1.5;
}

.ui-button#step-3-button {
  
  &:not([data-clickable]) {
    display: none;
  }
  
  animation: step-3-button .3s cubic-bezier(.5, 0, .5, 1);
  
  @keyframes step-3-button {
    from {
      opacity: 0;
      transform: translateY(100%);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

.ui-choices {
  > input {
    opacity: 0;
    height: 1px;
    width: 1px;
    display: none;
  }
  
  > input:checked + .ui-choice {
    background: $color-primary;
    color: white;
  }
}

.ui-choice {
  transition: all .3s $easing;
  border: 2px solid $color-primary;
  display: inline-block;
  padding: 1rem;
  margin-right: 1rem;
  border-radius: 2px;
}

/* ---------------------------------- */

.ui-steps,
.ui-step {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.ui-steps {
  grid-column: 1;
  margin-right: 2rem;
  display: grid;
  place-items: center;
}

.ui-step {
  display: grid;
  grid-template-rows: auto 1fr;
  height: 100%;
  --speed: .3s;
  --color: #{$color-primary};
  --secondary: #AAA;

  span {
    width: 2em;
    height: 2em;
    border-radius: 50%;
    background: var(--color);
    color: #FFF;
    display: grid;
    place-items: center;
    line-height: 1;
    transition: background-color var(--speed) cubic-bezier(.5, 0, .5, 1) var(--speed);
    
    &::before {
      content: '';
      position: absolute;
      top: 0; right: 0; bottom: 0; left: 0;
      width: 130%;
      height: 130%;
      margin: -15%;
      border: solid 2px var(--color);
      border-radius: 50%;
      transform: scale(0.6);
      transition: inherit;
      transition-property: transform, border-color;
    }
  }

  &::before,
  &::after {
    content: '';
    display: block;
    border-right: solid 3px var(--secondary);
    height: 100%;
    grid-row: 2;
    grid-column: 1;
    width: 0px;
    margin: 0 auto;
    transform-origin: top center;
  }

  &::after {
    transform: scaleY(1);
    border-right-color: var(--color);
    transition: transform var(--speed) cubic-bezier(.5, 0, .5, 1);
  }

  &:last-child::before,
  &:last-child::after {
    display: none; 
  }

  &[data-active] {
    span { 
      background: $color-primary; 
      
      &::before {
        transform: scale(1);
      }
    }

    &::after {
      transform: scaleY(0.5);
      transition-delay: var(--speed);
    }

    ~ .ui-step {
      --color: #AAA;
      &::after {
        transform: scaleY(0);
      }
    }
  }
}

/* ---------------------------------- */

.ui-section {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-30vh);
  transition: 
    opacity .5s linear, 
    transform .5s cubic-bezier(.5, 0, .5, 1),
    visibility 0s linear .5s;
}

.ui-section[data-active] {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
  
  ~ .ui-section {
    transform: translateY(30vh); 
  }
  
  > * {
    animation: slide-up .35s cubic-bezier(.5, 0, .5, 1) both;
    
    @for $i from 1 through 5 {
      &:nth-child(#{$i}):not(#step-3-button) {
        animation-delay: $i * 100ms !important;
      }
    }

    @keyframes slide-up {
      from {
        opacity: 0;
        transform: translateY(1rem);
      } 
      to {
        transform: none;
      }
    }
  }
}