jobiqo-cl/lib/es/src/components/02-atoms/01-forms/14-radios/styles.js

[](https://circleci.com/gh/jobiqo/jobiqo-cl)

import styled from 'styled-components';

/**
 * @file styles.ts
 *
 * @fileoverview Styles for the radio button elements.
 */
const StyledRadio = styled.input `
  appearance: none;
  width: ${props => props.theme.radios.width};
  height: ${props => props.theme.radios.height};
  border-radius: ${props => props.theme.radios.borderRadius};
  vertical-align: middle;
  margin-bottom: ${props => props.theme.radios.marginBottom};
  position: relative;
  cursor: pointer;
  outline: 0;
  overflow: hidden;
  border-width: ${props => props.theme.radios.borderWidth};
  border-style: ${props => props.theme.radios.borderStyle};
  border-color: ${props => props.theme.radios.borderColor};
  background: ${props => props.theme.radios.background};

  &:after {
    position: absolute;
    content: '';
    top: 50%;
    left: 50%;
    border-radius: ${props => props.theme.radios.borderRadius};
    border-style: ${props => props.theme.radios.borderStyle};
    border-color: ${props => props.theme.radios.inner.borderColor};
    border-width: ${props => props.theme.radios.inner.borderWidth};
    background: ${props => props.theme.radios.inner.background};
    transition: all 0.1s;
    transform: translate3d(50%, 50%, 0);
  }

  &:checked:after {
    transform: translate3d(-50%, -50%, 0);
  }
`;
const StyledLabel = styled.label `
  margin-left: 0.5rem;
`;

export { StyledLabel, StyledRadio };