packages/pass/components/Form/Field/RadioButtonGroupField.scss

   1 @import '~@proton/styles/scss/lib';
   2
   3 .pass-radio-group--button {
   4         --focus-ring: var(--text-hint);
   5
   6         .input-button-input {
   7                 + span {
   8                         transition:
   9                                 opacity 0.12s,
  10                                 outline 0.12s,
  11                                 outline-offset 0.12s;
  12                         background: var(--radio-button-background);
  13                         inline-size: rem(36);
  14                         block-size: rem(36);
  15                         border: none;
  16
  17                         &:hover {
  18                                 background: var(--radio-button-background);
  19                                 opacity: 0.8;
  20                         }
  21                 }
  22
  23                 &:checked {
  24                         + span {
  25                                 outline: 2px solid var(--focus-ring);
  26                                 outline-offset: 3px;
  27                                 color: var(--text-norm);
  28                         }
  29                 }
  30         }
  31 }
  32
  33 .pass-radio-group--labelled-button {
  34         input[type='radio'] {
  35                 + div {
  36                         border-block-end: 1px solid var(--border-weak);
  37                 }
  38
  39                 &:focus-visible {
  40                         + div {
  41                                 outline: 2px solid var(--focus-ring);
  42                         }
  43                 }
  44         }
  45
  46         &:last-of-type {
  47                 input[type='radio'] + div {
  48                         border-block-end: none;
  49                 }
  50         }
  51 }