@function strip_unit($value) {
  @return $value / ($value * 0 + 1);
}
@function rem($px_value) {
  @return #{strip_unit($px_value) / strip_unit($html-font-size)}rem;
}
@function font_size($font) {
  @return #{strip_unit($font) / 12}rem;
}

@mixin colors {
  .colores {
    vertical-align: center;

    .text {
      margin-right: rem(3);
    }

    .white {
      border: thin solid rgb(0, 0, 0);
      background-color: rgb(255, 255, 255);
    }
    .black {
      background-color: rgb(0, 0, 0);
    }
    .blue {
      background-color: rgb(0, 0, 255);
    }
    .green {
      background-color: rgb(0, 255, 0);
    }
    .yellow {
      background-color: rgb(255, 255, 0);
    }
    .orange {
      background-color: rgb(255, 130, 0);
    }
    .red {
      background-color: rgb(255, 0, 0);
    }
    .circle {
      display: inline-block;

      width: rem($circle_radius);
      height: rem($circle_radius);
      border-radius: 8000px;
      margin: auto rem(1);
      cursor: pointer;

      &.selected {
        width: rem($circle_radius + 2);
        height: rem($circle_radius + 2);
        cursor: default;
      }
    }
  }
}