// Declaration of color classes

@each $color, $val in $colors {

.bg-color-#{$color} {
  background-color: $val;
}
.text-color-#{$color} {
  color: $val;
}

}

// Profile CSS

.profile-pic {

border-style: solid;
border-width: $spacer;
border-color: theme-color(primary);

}

.profile-icon {

height: $spacer*1.5;
width: $spacer*1.5;

}

// Name CSS .name {

hr {
  border-top-width: $spacer/2;
  border-color: theme-color(primary);
}

}

// Main CSS

.experience {

background-color: theme-color(secondary);
padding-bottom: $spacer;

h2 {
  text-transform: uppercase;
  text-align: center;
  background-color: theme-color(primary);
  padding: $spacer/2 0 $spacer/2 0;

  // Simulación de espacio en blanco
  border-top-style: solid;
  border-top-color: color("white");
  border-top-width: $spacer;
}

p, ul {
  padding-left: $spacer*2;
  padding-right: $spacer*2;
}

}

// Skill Meters CSS

.skill {

img {
  float: left;
  width: $spacer*3;
  height: $spacer*3;
}

span {
  float:left;
  font-size: $spacer*2.5;
  font-family: 'Ubuntu', sans-serif;
}

.note {
  margin-left: $spacer*4;
  margin-top: $spacer*2;
}

}

.skill-meter {

$marker-size: $spacer*1.5;

@function marker-units($units: 1, $scale: true){

  @if $scale {
    @return $marker-size * $units*0.8;
  }
  @else {
    @return $marker-size * $units;
  }
}

@function marker-displacement($units){
  @return (marker-units($units, false) + $marker-size/2)*0.8;
}

width: 80%;
margin-left: $spacer*3.5;

hr {
  border-top-width: $spacer/2;
  width: marker-units(10);
}

div {
  height: $marker-size;
  width: 100%;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
  margin-top: $spacer*-1/2;

  @for $value from 0 through 10 {
    &.skill-#{$value*10} {
      padding-top: $marker-size;
      background-position: marker-displacement($value) 0% ;
      padding-left: marker-displacement($value);
    }
  }

}

}