@import '_helpers';

.icon-select-arrow(@var-name, @color) {
  @svg-raw: "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='@{color}' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>";
  .svg-encode(@svg-raw);
    @{var-name}: url("data:image/svg+xml,@{svg-encoded}");
}

.icon-checkbox(@var-name, @color) {
  @svg-raw: "<svg viewBox='0 0 16 16' fill='@{color}' xmlns='http://www.w3.org/2000/svg'><path d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2.5-2.5a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/></svg>";
  .svg-encode(@svg-raw);
    @{var-name}: url("data:image/svg+xml,@{svg-encoded}");
}

.icon-radio(@var-name, @color) {
  @svg-raw: "<svg viewBox='0 0 16 16' fill='@{color}' xmlns='http://www.w3.org/2000/svg'><circle cx='8' cy='8' r='3'/></svg>";
  .svg-encode(@svg-raw);
    @{var-name}: url("data:image/svg+xml,@{svg-encoded}");
}