body,
html {
    --color: #945;
    --bgColor: #d89;
    --size: 2rem;
    --border: calc(var(--size) * 0.125);
    --borderRadius: calc(var(--size) * 0.5);
    --labelSize: calc(var(--size) * 0.75);
    --margin: calc(var(--size) * 0.25);
    --marginLeft: calc(var(--size) + calc(var(--size) * 0.5));
}

input {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><circle cx='20' cy='20' r='18.5' fill='none' stroke='%23222' stroke-width='3' /><path d='M20,4 20,8 M4,20 8,20 M36,20 32,20 M20,36 20,32' stroke='%23bbb' stroke-width='1' /><circle cx='20' cy='20' r='2' fill='%23222' stroke='%23222' stroke-width='2' /></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M18.5,24.5 19.5,4 20.5,4 21.5,24.5 Z' fill='%23222' style='transform:rotate(120deg); transform-origin: 50% 50%;' /></svg>"), url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><path d='M18.5,24.5 19.5,8.5 20.5,8.5 21.5,24.5 Z' style='transform:rotate(20deg); transform-origin: 50% 50%;' /></svg>");
    background-position: var(--margin) 50%;
    background-repeat: no-repeat;
    background-size: var(--size) var(--size);
    border: var(--border) solid var(--color);
    border-radius: var(--borderRadius);
    color: #222;
    font-size: var(--size);
    padding: var(--margin) var(--margin) var(--margin) var(--marginLeft);
    transition: backgroundImage 0.25s;
}

input:focus {
    outline: 2px dashed #945;
    outline-offset: 3px;
}