//- Planet Data
- var planetList = [{"name":"mercury", "tilt":"0.034", "day": "1,407", "year":"88"},{"name":"venus", "tilt":"177.3", "day": "5,832", "year":"224.7"},{"name":"earth", "tilt":"23.26", "day": "23.9", "year":"365.2"},{"name":"mars", "tilt":"25.2", "day": "24.6", "year":"687"},{"name":"jupiter", "tilt":"3.1", "day": "9.9", "year":"4,331"},{"name":"saturn", "tilt":"26.7", "day": "10.7", "year":"10,747"},{"name":"uranus", "tilt":"97.8", "day": "17.2", "year":"30,589"},{"name":"neptune", "tilt":"28.3", "day": "16.1", "year":"59,800"},{"name":"pluto", "tilt":"122.5", "day": "153.3", "year":"90,560"}, {"name":"sun", "tilt":"0", "day": "~600", "year":"0"}];

//- Planet Template
each planet in planetList
  article(class="card card--"+planet.name)
    div(class="card__planet")
      div(class="planet__atmosphere")
        div(class="planet__surface")
    div(class="card__info")
      h2(class="info__title")= planet.name
      div(class="info__form")
        div(class="info__item")
          label(class="info__label") Tilt
          span(class="info__line")
          i(class=" tilt__icon fas fa-long-arrow-alt-right")
          span(class="info__detail") #{planet.tilt}°      
        div(class="info__item")
          label(class="info__label") Day
          span(class="info__line")
          span(class="info__detail") #{planet.day} hours

        div(class="info__item")
          label(class="info__label") Year
          span(class="info__line")
          span(class="info__detail") #{planet.year} days

//List of planets - used for mixin interation and interpolation
$solarSystem: ("mercury", "venus", "earth", "mars", "jupiter", "saturn", "uranus", "neptune", "pluto", "sun");

//Planet propeties
:root {
  --mercury-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/mercury2.jpg);
  --mercury-tilt: rotate(0.034deg);
  --mercury-day: 1407.6; 
  --mercury-color: #999999;
  --venus-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/venus2.jpg);
  --venus-tilt: rotate(177.3deg); 
  --venus-day: 5832.5;
  --venus-color: #e8cda2;
  --earth-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/earth.jpg);
  --earth-tilt: rotate(23.26deg);
  --earth-day: 23.9;
  --earth-color: #b3caff;
  --mars-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/mars.jpg);
  --mars-tilt: rotate(25.2deg);
  --mars-day: 24.6;
  --mars-color: #c07158;
  --jupiter-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/jupiter.jpg);
  --jupiter-tilt: rotate(3.1deg);
  --jupiter-day: 9.9;
  --jupiter-color: #c9b5a4;
  --saturn-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/saturn.jpg);
  --saturn-tilt: rotate(26.7deg);
  --saturn-day: 10.7;
  --saturn-color: #f0e2c4;
  --uranus-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/uranus2.jpg);
  --uranus-tilt: rotate(97.8deg);
  --uranus-day: 17.2;
  --uranus-color: #b8d8e1;
  --neptune-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/neptune.jpg);
  --neptune-tilt: rotate(28.3deg);
  --neptune-day: 16.1;
  --neptune-color: #5e73bb;
  --pluto-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/pluto.jpg);
  --pluto-tilt: rotate(122.5deg);
  --pluto-day: 153.3;
  --pluto-color: #c3b6aa;
  --sun-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/332937/sun.jpg);
  --sun-tilt: rotate(0deg);
  --sun-day: 600; 
  --sun-color: #cc9f4c;
}

//Mixin for styling each planet
@mixin planetization {
  @each $planet in $solarSystem {
    &--#{$planet} {
      .planet__atmosphere {
        box-shadow: inset 10px 0px 12px -2px rgba(255,255,255,.2), 
                    inset -70px 0px 50px 0px black,
                    -5px 0px 10px -4px var(--#{$planet}-color);
      }
      .planet__surface {
        background-image: var(--#{$planet}-image);
        transform: var(--#{$planet}-tilt)scale(1.2);
        animation: planetRotate calc(var(--#{$planet}-day)*.1s) linear infinite; 
      }
      .card__planet {
        &::before {
          transform: var(--#{$planet}-tilt)scale(1.2);
          border-color: var(--#{$planet}-color);
          color: var(--#{$planet}-color);
        }    
      }
      .tilt__icon {
        transform: var(--#{$planet}-tilt);
        color: var(--#{$planet}-color);
      }
    }
	}
}

//Planet rotation animation
@keyframes planetRotate {
  0%{
    background-position: 0% center;
  }
  100%{
    background-position: -200% center;
  }
}
// End definitions
//---------------------------
//Start styles
body{ 
  background: #000000;
  color: #fff;
  height: 100%;
  width: 100vw;
  margin: 10px 0 40px 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, 190px);
  grid-template-rows: repeat(auto-fill, 400px);
  grid-gap: 40px;
  align-items: center;
  justify-items: center;
  justify-content: center;
  overflow-x: hidden;
  font-family: "Major Mono Display";
  text-transform: lowercase;
}


.card {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  @include planetization;
}

.card__planet {
  &::before {
    content: '';
    position: absolute;
    height: 190px;
    z-index: -2;
    left: 50%;
    top: 0%;
    border-left: 1px dashed rgba(255,255,255,.25);
  }
}

.planet {
  &__atmosphere {
    height: 190px;
    width: 190px;
    position: relative;
    background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.3) 0%, rgba(255,255,255,0) 65%);
    border-radius: 100px;
    overflow: hidden;
  }
  &__surface{
    position: absolute; 
    height: 100%;
    width: 100%; 
    z-index: -1;
    background-size: cover;
  }
}

//Different box-shadow for the sun
.card--sun {
  .planet__atmosphere {
    box-shadow: 0px 0px 10px 0px var(--sun-color), 
      0px 0px 1000px -2px var(--sun-color);
  }
}


.card__info {
  width: 100%;
}

.info {
  &__title {
    text-align: center;
    font-size: 28px;
  }
  &__form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
  &__item {
    display: flex;
    align-items: flex-end;
    margin-bottom: 5px;
    font-size: 14px;
    .tilt__icon {
      margin: 0 5px;
    }
  }
  &__label {
      font-size: 11px;
  }
  &__line {
    flex: 1;
    margin: 0 5px;
    border-bottom: 1px dashed rgba(255,255,255,.3); 
  }
}

// Empty space