@import '../../functions', '../../mixins', '../../variables';

$radio: (
  'border': 2,
);
$radio-inner: (
  'width': 14,
);

@layer components {
  .pretty-checkbox.radio {
    border-radius: 50%;

    input:checked + &,
    .selected & {
      border: px-to-rem(get-map($radio, 'border')) solid
        get-map($theme, 'form_checkbox_bg');
      background: none;

      &::after {
        content: '';
        display: block;
        width: px-to-rem(get-map($radio-inner, 'width'));
        height: px-to-rem(get-map($radio-inner, 'width'));
        background-color: get-map($theme, 'form_checkbox_bg');
        border-radius: 50%;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      }
    }
  }
}
