// Tab like radio group .radio-group { @include clearfix; } .radio-label { float: left; // stylelint-disable-next-line primer/spacing padding: 6px var(--base-size-16) 6px calc(var(--base-size-16) + 12px + var(--base-size-8)); // 12px is the size of the radio-input // stylelint-disable-next-line primer/spacing margin-left: -1px; // stylelint-disable-next-line primer/typography font-size: $body-font-size; // stylelint-disable-next-line primer/typography line-height: 20px; // Specifically not inherit our `` default color: var(--fgColor-default, var(--color-fg-default)); cursor: pointer; // stylelint-disable-next-line primer/borders, primer/colors border: $border-width $border-style var(--borderColor-default, var(--color-border-default)); :checked + & { position: relative; z-index: 1; border-color: var(--borderColor-accent-emphasis, var(--color-accent-emphasis)); } &:first-of-type { margin-left: 0; // stylelint-disable-next-line primer/borders border-top-left-radius: $border-radius; // stylelint-disable-next-line primer/borders border-bottom-left-radius: $border-radius; } &:last-of-type { // stylelint-disable-next-line primer/borders border-top-right-radius: $border-radius; // stylelint-disable-next-line primer/borders border-bottom-right-radius: $border-radius; } .octicon { margin-left: var(--base-size-4); color: var(--fgColor-muted, var(--color-fg-subtle)); } } .radio-input { z-index: 3; float: left; // stylelint-disable-next-line primer/spacing margin: 10px calc(var(--base-size-32) * -1) 0 var(--base-size-16); &:disabled { position: relative; // enables z-index + .radio-label { color: var(--fgColor-disabled, var(--color-primer-fg-disabled)); cursor: default; background-color: var(--bgColor-neutral-muted, var(--color-neutral-subtle)); .octicon { color: inherit; } } } }