:host label.tef-radio { display: inline-block; vertical-align: middle; position: relative; float: none; background: none; min-width: 0; border: none; margin: 0; padding: 10px 0; cursor: pointer; box-sizing: border-box; } :host label.tef-radio.right { text-align: right; margin-right: 20px; } :host label.tef-radio.right span { padding: 0 35px 0 0; } :host label.tef-radio.right span:before { left: auto; right: 6px; } :host label.tef-radio.right span:after { left: auto; right: 0; } :host label.tef-radio.block { display: block; } :host label.tef-radio.block.right { text-align: left; margin-right: 0; } :host label.tef-radio.block.right span:after { right: 0; left: auto; } :host label.tef-radio input { margin: 0; opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; cursor: pointer; } :host label.tef-radio input:checked ~ span { color: {{g.significant}}; } :host label.tef-radio input:checked ~ span:before { display: block; } :host label.tef-radio span { position: relative; display: block; font-size: 12px; line-height: 16px; font-weight: normal; pointer-events: none; padding: 0 20px 0 35px; color: {{g.grey5}}; text-align: left; } :host label.tef-radio span:before { display: none; position: absolute; content: ""; top: 50%; left: 6px; width: 12px; height: 12px; margin-top: -7px; background: {{g.significant}}; border-radius: 50%; } :host label.tef-radio span:after { position: absolute; content: ""; left: 0; top: 50%; height: 22px; width: 22px; font-size: 22px; margin-top: -13px; border: 1px solid {{g.grey2}}; border-radius: 50%; }