overleaf/services/web/frontend/stylesheets/components/radio-chip.less

.radio-chip {
  background: @white;
  border: 1px solid @neutral-60;
  border-radius: 999px;
  color: @neutral-90;
  display: inline-flex;
  font-weight: 400;
  gap: 4px;
  inline-size: fit-content;
  line-height: 1.4;
  padding: 8px 16px 8px 8px;

  @media only screen and (max-width: @screen-sm-min) {
    width: 100%;
  }

  &:hover {
    background: @neutral-20;
  }

  &:focus-within {
    box-shadow: 0px 0px 0px 2px @blue-30;
  }

  input[type='radio'] {
    accent-color: @green-50;
    height: 16px;
    margin: 4px;
    width: 15px;
  }
}

.radio-chip[data-disabled='true'] {
  border-color: @neutral-20;

  &:hover {
    background: @white;
    cursor: not-allowed;
  }
}

.radio-group-col-1 {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.radio-group-col-2 {
  display: grid;
  grid-gap: 16px;
  grid-template-columns: 1fr 1fr;

  @media (max-width: @screen-sm-min) {
    grid-template-columns: 1fr;
  }
}