beta-parity-react/ui/Radio/index.css

Beta Parity React Components

input[type=radio].par-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--par-transparent);border:none;border-radius:50%!important;cursor:pointer;height:1rem;outline:unset!important;padding:0;position:relative;width:1rem}input[type=radio].par-radio:checked{background-color:transparent;border-color:transparent;color:transparent}input[type=radio].par-radio:disabled{cursor:not-allowed}.radio-wrapper{cursor:pointer;display:flex;gap:.75rem;width:-moz-fit-content;width:fit-content}.radio-wrapper[aria-disabled=true]{cursor:not-allowed;-webkit-user-select:none;-moz-user-select:none;user-select:none}.radio-wrapper[aria-disabled=true] .input-label{color:var(--par-color-text-surface-item-disabled)}.radio-wrapper[aria-disabled=true] .input-sublabel{color:var(--par-color-text-helper-neutral-disabled)}.radio-input{align-items:center;display:flex;height:-moz-fit-content;height:fit-content;justify-content:center;margin-bottom:.25rem;margin-top:.25rem;position:relative;width:-moz-fit-content;width:fit-content}.radio-icon{height:1rem;left:50%;position:absolute;top:50%;width:1rem;--tw-translate-x:-50%;--tw-translate-y:-50%;border-radius:.125rem;padding:0;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.radio-input .radio-checked{display:none}.radio-input:has(input[type=radio].par-radio:checked) .radio-checked{display:unset}.radio-input:has(input[type=radio].par-radio:checked) .radio-unchecked{display:none}.input-label{color:var(--par-color-text-surface-item-enabled);flex-direction:column;font-size:1rem;line-height:1.375rem;overflow-wrap:break-word;-webkit-user-select:none;-moz-user-select:none;user-select:none}.input-label,.input-sublabel{font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-weight:400;width:100%}.input-sublabel{display:-webkit-box;font-size:.75rem;letter-spacing:.02em;line-height:1rem;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:4;color:var(--par-color-text-helper-neutral)}.radio-group{display:flex;flex-direction:column;gap:.5rem}.radio-group-label{color:var(--par-color-text-surface-item-enabled);font-family:IBM Plex Sans,Helvetica Neue,Arial,sans-serif;font-size:.875rem;font-weight:400;letter-spacing:.01rem;line-height:1.125rem}.radio-group-item{display:flex;flex-direction:column;gap:.5rem}.radio-group.horizontal{flex-direction:row;flex-wrap:wrap;gap:1rem}@keyframes strokeExpand{0%{stroke-width:2}to{stroke-width:5}}@keyframes strokeShrink{0%{stroke-width:2}to{stroke-width:2}}.radio-checked rect{animation:strokeExpand .15s ease-out forwards}.radio-unchecked rect{animation:strokeShrink .15s ease-out forwards}