.EOYSnippetForm { margin: 10px 0 8px; align-self: start; font-size: 14px; display: flex; align-items: center; .donation-amount, .donation-form-url { white-space: nowrap; font-size: 14px; padding: 8px 20px; border-radius: 2px; } .donation-amount { color: $grey-90; margin-inline-end: 18px; border: 1px solid $grey-40; padding: 5px 14px; background: $grey-10; cursor: pointer; } input { &[type='radio'] { opacity: 0; margin-inline-end: -18px; &:checked + .donation-amount { background: $grey-50; color: $white; border: 1px solid $grey-60; } // accessibility &:checked:focus + .donation-amount, &:not(:checked):focus + .donation-amount { border: 1px dotted var(--newtab-link-primary-color); } } } .monthly-checkbox-container { display: flex; width: 100%; } .donation-form-url { margin-inline-start: 18px; align-self: flex-end; display: flex; } }