@procraft/widget-order/src/components/RadioGroup/styles.ts

Order widget for landing

import styled, { css } from 'styled-components'
import {
  TITLE_BG_DEFAULT_COLOR,
  TITLE_TEXT_DEFAULT_COLOR,
} from '../../constants/colors'
import { WidgetOrderStyled } from '../../styles'

export const RadioGroupRowStyled = styled.div<{
  checked: boolean
  checkedBgColor?: string
  checkedTextColor?: string
}>`
  /* 
    Добавляем вложенность для жесткости стилей
  */
  ${WidgetOrderStyled} & {
    margin: 5px 0;
    padding: 5px 5px;
    display: flex;
    align-items: center;

    &,
    & > * {
      cursor: pointer;
    }

    label {
      margin-left: 5px;
      margin-bottom: 0;
      font-size: 12px;
    }

    input {
      margin: 0;
      padding: 0;
    }
  }

  /* 
    JS-логика не работает во вложенности WidgetOrderStyled &
  */
  ${({ checked, checkedBgColor, checkedTextColor }) => {
    if (checked) {
      return css`
        background-color: ${checkedBgColor ?? TITLE_BG_DEFAULT_COLOR};
        border-radius: 5px;

        label {
          color: ${checkedTextColor ?? TITLE_TEXT_DEFAULT_COLOR};
        }
      `
    }
  }}
`

export const RadioGroupStyled = styled.div``