// Base
* {
  box-sizing: border-box;
  position: absolute; // WHY: Sets everything to be positionable
  left: 0;
}

html,
body {
  position: fixed;
  top: 0;
  width: 100%;
  height: 100%;
  // background: red;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

// Helpers
@mixin cover {
  position: absolute;
  top: 0;
  height: 100%;
  width: 100%;
}

@mixin size-center($size) {
  margin: $size / -2 0 0 $size / -2;
  height: $size;
  width: $size;
  left: 50%;
  top: 50%;
}

// Base Variables
$image-width: 1055;
$image-height: 589;

// Reference
.reference {
  background: url(https://i.postimg.cc/KzQ8W2wS/triathlon-background.jpg) center no-repeat;
  background-size: contain;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  
  body:hover & {
    opacity: 0.33;
  }
}

.wrapper {
  background: blue;
  position: relative;
  width: 100vw;
  
  &::before {
    content: '';
    padding-top: $image-height / $image-width * 100vw;
    display: block;
  }
}

// Background
.background {
  @include cover;
  
  background: #2639C2;
  
  &__floor {
    background: #958F8F;
    bottom: 0;
    width: 100%;
    height: 7vw;
  }
}

// Wheel
$wheel-width: 22.85vw;
$wheel-tyre-width: .5vw;
$wheel-rim-width: 2.5vw;
$wheel-hub-width: 1.5vw;
$wheel-cassette-width: 3.25vw;

.wheel {
  height: $wheel-width;
  width: $wheel-width;
  position: absolute;
  // background: red;
  color: lighten(#1B1B23, 3%);
  display: block;
  top: 31.25vw;
  
  &--front {
    left: 53.25vw;
  }
  
  &--back {
    left: 19.75vw;
  }
  
  &__tyre,
  &__rim {
    @include cover;
    
    border-radius: 50%;
  }
  
  &__tyre {    
    border: $wheel-tyre-width #14171E solid;
  }
  
  &__rim {    
    border: $wheel-rim-width currentColor solid;
  }
  
  &__hub {
    @include size-center($wheel-hub-width);
    
    background: lighten(black, 11%);
    border-radius: 50%;
  }
  
  &__spokes {
    @include cover;
  }
  
  &__spoke {
    @include cover;
    
    &::before,
    &::after {
      content: '';
      height: .1vw;
      width: 100%;
      background: currentColor;
      position: absolute;
      top: 50%;
      left: 0;
      margin-top: -.05vw;
    }
    
    &::after {
      transform: rotate(90deg);
    }
    
    @for $i from 2 through 4 {
      
      &:nth-of-type(#{$i}) {
        transform: rotate(#{22.5 * ($i - 1)}deg);
      }
    }
  }
  
  &__cassette {
    @include size-center($wheel-cassette-width);
  }
  
  &__gear {
    @include cover;
    
    border: 2px dotted currentColor;
    color: white;
    background: currentColor;
    background-clip: content-box;
    border-radius: 50%;
    opacity: 0.5;

    &:nth-of-type(odd) {
      color: darken(#B7B8BA, 10%);
      opacity: 1;
    }
    
    @for $i from 2 through 9 {
      
      &:nth-of-type(#{$i}) {
        transform: scale(1 - (0.11 * ($i - 1)));
      }
    }
  }
  
  &__chain {
    @include cover;
    
    clip-path: polygon(
      0% 0%,
      50% 0,
      50% 100%,
      0 72%
    );
    
    .chain__links {
      position: absolute;
      top: -.05vw;
      left: -.05vw;
      right: -.05vw;
      bottom: -.05vw;
      
      &::before,
      &::after {
        border-radius: 50%;

        left: 0;
      }
      
      &::after {
        transform: rotate(4deg);
      }
    }
  }
}

// Bike Frame
$frame-color: darken(mix(white, blue, 95%), 5%);

.frame {
  position: static;
  
  &__down-tube {
    background: $frame-color;
    height: 2.5vw;
    width: 20vw;
    top: 36vw;
    left: 42vw;
    transform: rotate(-50deg);
    
    &::before {
      content: '';
      position: absolute;
      background: inherit;
      top: .25vw;
      left: 83%;
      width: 1vw;
      height: 3.25vw;
      transform: rotate(500deg);
    }
  }
  
  &__top-tube {
    background: $frame-color;
    left: 38.75vw;
    top: 28.5vw;
    width: 20vw;
    height: 1.5vw;
    
    &::after {
      position: absolute;
      width: 4vw;
      height: 4vw;
      content: '';
      top: 36%;
      left: -7.5%;
      border: 1vw solid $frame-color;
      box-sizing: border-box;
      border-radius: 50%;
      transform: rotate(-90deg);
      clip-path: polygon(
        50% 100%,
        100% 100%,
        100% 50%,
        50% 50%,
      );
    }
  }
  
  &__seat-stay {
    top: 38.5vw;
    left: 29.5vw;
    width: 13vw;
    height: .55vw;
    transform: rotate(-38.2deg);
    
    &::before,
    &::after {
      background: $frame-color;
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      content: '';
    }
    
    &::after {
      transform: rotate(2.5deg);
      transform-origin: center left;
    }
  }
  
  &__chain-stay {
    width: 15vw;
    top: 43.25vw;
    left: 31vw;
    height: 1vw;
    transform: rotate(8deg);
    
    &::before,
    &::after {
      background: $frame-color;
      position: absolute;
      height: 100%;
      width: 100%;
      top: 0;
      content: '';
    }
    
    &::after {
      transform: rotate(3deg);
      transform-origin: center left;
    }
  }
  
  &__seat-tube {
    width: 20vw;
    left: 40.25vw;
    height: 14vw;
    top: 30vw;
    overflow: hidden;
    
    &::after {
      content: '';
      background: $frame-color;
      width: 2vw;
      top: 0;
      height: 5.8vw;
      position: absolute;
      transform: rotate(-8deg);
    }
    
    &::before {
      content: '';
      border: $frame-color 1.5vw solid;
      box-sizing: border-box;
      width: $wheel-width;
      height: $wheel-width;
      position: absolute;
      left: $wheel-width * -0.81;
      top: $wheel-width * 0.025;
      border-radius: 50%;
    }
  }
  
  &__fork {
    background: $frame-color;
    background-attachment: red
      ;
    top: 27vw;
    left: 57.3vw;
    height: 17.33vw;
    width: .9vw;
    transform: rotate(-24deg);
    transform-origin: center top;
    
    &::before,
    &::after {
      background: inherit;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      content: '';
      transform-origin: center bottom;
    }
    
    &::before {
      transform: rotate(-2.6deg);
    }
    
    &::after {
      transform: rotate(-5.2deg);
    }
  }
  
  &__wheel-nut {
    background: lighten(black, 15%);
    box-shadow: inset lighten(black, 10%) 0 0 .3vw;
    width: .825vw;
    height: .825vw;
    border-radius: 50%;
    top: 42.3vw;
    
    &::before {
      @include size-center(.4vw);
      
      background: lighten(black, 10%);
      border-radius: 50%;
      content: '';
      position: absolute;
    }
    
    &--back {
      left: 30.75vw;
    }
    
    &--front {
      left: 64.28vw;
    }
  }
}

.seat {
  position: static;
  
  &__post {
    background: lighten(black, 15%);
    top: 22vw;
    left: 39.5vw;
    width: 1.3vw;
    height: 10vw;
    transform: rotate(-7deg);
    transform-origin: top center;
  }
  
  &__saddle {
    background: lighten(black, 5%);
    border-radius: 0 0 0 1vw;
    top: 20.75vw;
    left: 36.5vw;
    width: 7vw;
    height: 1vw;
    
    > b {
      background: inherit;
      border-radius: inherit;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      transform-origin: top left;
      
      @for $i from 1 through 3 {
        
        &:nth-of-type(#{$i}) {
          transform: rotate(#{2.5deg * $i});
        }
      }
    }
  }
}

// Stem
.stem {
  position: static;
  color: lighten(black, 5%);
  
  &__top-tube {
    background: currentColor;
    top: 25.7vw;
    left: 55.8vw;
    width: 1.2vw;
    height: 2vw;
    transform: rotate(-23deg);
    transform-origin: top left;
  }
  
  &__stem {
    top: 25.1vw;
    left: 55.7vw;
    width: 3.5vw;
    height: 1.1vw;
    background: currentColor;
    transform: rotate(-4deg);
    transform-origin: bottom left;
    
    &::before {
      content: '';
      right: 0;
      width: .75vw;
      background: currentColor;
      height: 2vw;
      position: absolute;
      bottom: 100%;
    }
  }
  
  &__rests {
    border-radius: .5vw .2vw .2vw 1vw;
    top: 21.5vw;
    left: 57vw;
    width: 3vw;
    height: 2.2vw;
    background: currentColor;
  }
  
  &__extensions {
    background: lighten(black, 12%);
    width: 10vw;
    height: 1vw;
    left: 57.5vw;
    top: 22vw;
  }
  
  &__handle {
    color: mix(orange, red);
    background: currentColor;
    width: 5vw;
    top: 24vw;
    left: 58.5vw;
    height: 1.1vw;
    border-radius: .5vw 0 .5vw .5vw;
    
    &::before,
    &::after {
      content: '';
      background: currentColor;
      position: absolute;
    }
    
    &::before {
      left: calc(100% - .5vw);
      top: -.5vw;
      height: 130%;
      width: 1.1vw;
      transform: rotate(45deg);
      border-top: .5vw black solid;
      box-sizing: border-box;
    }
  }
}

// Groupset
.groupset {
  position: static;
  
  &__chainring {
    @include size-center(6.75vw);
    
    color: lighten(black, 10%);
    border-radius: 50%;
    border: .8vw solid;
    top: 45.35vw;
    left: 44.6vw;
    
    &::before {      
      content: '';
      border: dashed .18vw;
      border-radius: 50%;
      box-sizing: border-box;
      top: -.8vw * 1.2;
      left: -.8vw * 1.2;
      right: -.8vw * 1.2;
      bottom: -.8vw * 1.2;
      position: absolute;
    }
    
    &::after {
      border: .2vw lighten(black, 25%) solid;
      position: absolute;
      border-radius: 50%;
      top: -.2vw;
      left: -.2vw;
      right: -.2vw;
      bottom: -.2vw;
      content: '';
    }
    
    &--small {
      color: lighten(black, 5%);
      transform: scale(0.6);
      border-width: 1.33vw;
      
      &::before {
        border-width: .3vw;
        top: -1.33vw * 1.2;
        left: -1.33vw * 1.2;
        right: -1.33vw * 1.2;
        bottom: -1.33vw * 1.2;
      }
    }
  }
  
  &__spoke {
    @include cover;
    
    &::before,
    &::after {
      color: lighten(black, 15%);
      width: .75vw;
      height: 55%;
      left: 50%;
      top: -5%;
      margin-left: -.375vw;
      background: currentColor;
      content: '';
      position: absolute;
      box-sizing: border-box;
      transform-origin: center bottom;
    }
    
    &::before {
      transform: rotate(-4deg);
    }
    
    &::after {
      transform: rotate(4deg);
    }
    
    @for $i from 2 through 5 {
      &:nth-of-type(#{$i}) {
        transform: rotate(#{360deg / 5 * ($i - 1)});
      }
    }
  }
  
  &__chain {
    position: absolute;
    top: -1vw * 1.05;
    left: -1vw * 1.05;
    right: -1vw * 1.05;
    bottom: -1vw * 1.05;
    clip-path: polygon(
      50% 0%,
      100% 0%,
      100% 100%,
      50% 100%
    );
    
    .chain__links {
      @include cover;
      
      &::before,
      &::after {
        border-width: .15vw;
        left: 0;
        border-radius: 50%;
      }
      
      &::after {
        transform: rotate(5deg);
      }
    }
  }
}

// Chain
.chain {
  position: static;
  
  &__links {
    // background: linear-gradient(black 50%, transparent 50.1%);
    // background-size: 100% 2vw;
    // height: .2vw;
    
    &::before,
    &::after {
      content: '';
      @include cover;
      
      border: .1vw dashed;
      box-sizing: border-box;
    }
    
    &::after {
      color: lighten(black, 50%);
      left: .1vw;
    }
    
    &--top {
      left: 31vw;
      top: 41vw;
      width: 14vw;
      transform: rotate(3deg);
      transform-origin: bottom left;
      
      &::before,
      &::after {
        border-bottom: 0;
        border-right: 0;
        border-left: 0;
      }
    }
    
    &--bottom {
      left: 30.6vw;
      top: 48.1vw;
      width: 14vw;
      transform: rotate(2.95deg);
      transform-origin: top left;
      
      &::before,
      &::after {
        border-bottom: 0;
        border-right: 0;
        border-left: 0;
      }
    }
    
    &--hanger {
      left: 32.1vw;
      top: 45.9vw;
      width: 2vw;
      transform: rotate(140deg);
      transform-origin: top left;
      
      &::before,
      &::after {
        border-bottom: 0;
        border-right: 0;
        border-left: 0;
      }
    }
  }
}

.hanger {
  position: static;
  color: lighten(black, 8%);
  
  &__top {
    background: currentColor;
    color: lighten(black, 12%);
    left: 29vw;
    top: 44.5vw;
    width: 3.25vw;
    height: 1.125vw;
    transform: rotate(35deg);
    border-radius: .5vw .2vw 1vw .2vw;
    
    &::before {
      color: lighten(black, 8%);
      background: currentColor;
      width: .5vw;
      top: -1.5vw;
      left: .4vw;
      height: 1.7vw;
      content: '';
      position: absolute;
      transform: rotate(9deg);
    }
  }
  
  &__bottom {
    @include size-center(1.4vw);
    
    background: currentColor;
    border-radius: 50%;
    top: 47.6vw;
    left: 31.1vw;
    
    .chain__links {
      @include cover;
      
      clip-path: polygon(0% 10%, -20% 160%, 70% 91%, 70% 10%);
      
      &::before,
      &::after {
        left: -2%;
        top: -2%;
        bottom: -2%;
        right: -2%;
        width: auto;
        height: auto;
        
        border-radius: 50%;
      }
    }
  }
}