@mixin colored-circle-radio($color) {
  background-image: inline-svg('<svg height="36.43" viewBox="0 0 36.43 36.43" width="36.43" xmlns="http://www.w3.org/2000/svg"><g fill="transparent" opacity=".99" stroke="#{$color}" stroke-width="2"><circle cx="18.215" cy="18.215" r="18.215" stroke="none"/><circle cx="18.215" cy="18.215" fill="none" r="17.215"/></g></svg>')
}

@mixin colored-full-circle-radio($color) {
  background-image: inline-svg('<svg height="23.583" viewBox="0 0 23.583 23.583" width="23.583" xmlns="http://www.w3.org/2000/svg"><g fill="transparent"><path d="m11.792 23.084a11.218 11.218 0 0 1 -7.985-3.308 11.218 11.218 0 0 1 -3.307-7.984c0-3.016 1.175-5.852 3.307-7.985a11.218 11.218 0 0 1 7.985-3.307c3.016 0 5.852 1.175 7.984 3.307a11.218 11.218 0 0 1 3.308 7.985c0 3.016-1.175 5.852-3.308 7.984a11.218 11.218 0 0 1 -7.984 3.308z"/><path d="m11.792 1a10.721 10.721 0 0 0 -7.632 3.16 10.721 10.721 0 0 0 -3.16 7.633c0 2.882 1.123 5.592 3.16 7.63a10.721 10.721 0 0 0 7.632 3.162c2.882 0 5.592-1.123 7.63-3.161a10.721 10.721 0 0 0 3.162-7.631c0-2.883-1.123-5.593-3.161-7.631a10.721 10.721 0 0 0 -7.631-3.162m0-1c6.512 0 11.792 5.28 11.792 11.792s-5.28 11.792-11.792 11.792c-6.513 0-11.792-5.28-11.792-11.792 0-6.513 5.28-11.792 11.792-11.792z" fill="#{$color}"/></g><circle cx="11.792" cy="11.792" fill="#{$color}" r="6.398"/></svg>')
}

@mixin colored-full-circle($background, $color) {
  background-image: inline-svg('<svg height="23.583" viewBox="0 0 23.583 23.583" width="23.583" xmlns="http://www.w3.org/2000/svg"><g fill="#{$background}"><path d="m11.792 23.084a11.218 11.218 0 0 1 -7.985-3.308 11.218 11.218 0 0 1 -3.307-7.984c0-3.016 1.175-5.852 3.307-7.985a11.218 11.218 0 0 1 7.985-3.307c3.016 0 5.852 1.175 7.984 3.307a11.218 11.218 0 0 1 3.308 7.985c0 3.016-1.175 5.852-3.308 7.984a11.218 11.218 0 0 1 -7.984 3.308z"/><path d="m11.792 1a10.721 10.721 0 0 0 -7.632 3.16 10.721 10.721 0 0 0 -3.16 7.633c0 2.882 1.123 5.592 3.16 7.63a10.721 10.721 0 0 0 7.632 3.162c2.882 0 5.592-1.123 7.63-3.161a10.721 10.721 0 0 0 3.162-7.631c0-2.883-1.123-5.593-3.161-7.631a10.721 10.721 0 0 0 -7.631-3.162m0-1c6.512 0 11.792 5.28 11.792 11.792s-5.28 11.792-11.792 11.792c-6.513 0-11.792-5.28-11.792-11.792 0-6.513 5.28-11.792 11.792-11.792z" fill="#{$color}"/></g><circle cx="11.792" cy="11.792" fill="#{$color}" r="6.398"/></svg>');
  background-size: contain;
}

@mixin zoom-modal-thumbnails-width($padding) {
  width: calc((((100vh - 2 * #{$padding} - 2rem) / (1 / #{$photo-width-to-height-ratio-zoom})) - 32px) / 4);
}

@mixin zoom-modal-single-width($padding) {
  width: calc((100vh - 2 * #{$padding} - 2rem) / (1 / #{$photo-width-to-height-ratio-zoom}));
}