.govie-radios--inline .govie-radios__item is not specific enough when size attribute is also defined

[ekynoxe]

Looking at the working example at https://storybook.design-system.ogcio.gov.ie/?path=/docs/form-radio--docs#inline, which works, it doesn't have a size attribute.

When using .govie-radios--medium in our codebase (FormsIE), the clear: none; property gets overridden by clear: left; defined in .govie-radios--medium .govie-radios__item.

The issue is that the specificity for both .govie-radios--medium .govie-radios__item and .govie-radios--inline .govie-radios__item is identical, therefore it's pot-luck which arrives first in the compiled css.

I have fixed this issue with an override locally in our file like so:

.govie-radios--inline.govie-radios--medium .govie-radios__item {
  clear: none;
}

But ideally, this would be taken care of in this library

Identical specificity leads to the issue:

Increased specificity when size is included fixes the problem:

[hamza14khan]

Resolved in 0.4.4 #219