@require 'nib'
@require '~modul-markup-common/markup/stylus/variables'

$prefix-radio = ant-radio

// КЛАССИЧЕСКИЙ ВАРИАНТ (ГОРИЗОНТАЛЬНЫЙ)
.{$prefix-radio}-wrapper
	position relative
	display inline-block

	& > span:last-child
		display block
		padding-left 26px
		max-width 100%
		word-wrap break-word
		overflow-wrap break-word
		cursor pointer
	
	& + .{$prefix-radio}-wrapper
		margin-left 24px

.{$prefix-radio}
	display block

.{$prefix-radio}-inner
	position absolute
	top 0
	left 0
	display inline-block
	vertical-align top
	box-sizing content-box
	width 18px
	height @width
	border-radius @width
	background-color $cl-white
	box-shadow inset 0 0 0 2px $cl-graphite-5
	transition box-shadow .2s
	appearance none


.{$prefix-radio}-wrapper-checked
	.ant-radio-inner
		border-color $cl-green-3
		box-shadow inset 0 0 0 6px $cl-green-3


// КЛАССИЧЕСКИЙ ВАРИАНТА (ВЕРТИКАЛЬНЫЙ)
.{$prefix-radio}-group
	&._vertical
		display flex
		flex-direction column
		align-items flex-start

		.{$prefix-radio}-wrapper
			& + .{$prefix-radio}-wrapper
				margin-top 12px
				margin-left 0


// КНОПКОЧНЫЙ ВАРИАНТ
.{$prefix-radio}-button-wrapper
	position relative
	display inline-flex
	justify-content center
	align-items center
	padding 12px 16px
	box-sizing border-box
	color $cl-text
	background-size $cl-white
	box-shadow inset 0 0 0 1px $cl-graphite-5
	transition color .2s,
			   box-shadow .2s
	cursor pointer
	&:hover
		color $cl-text-primary

	&:first-child
		border-radius 3px 0 0 3px

	&:last-child
		border-radius 0 3px 3px 0

	&:not(:first-child)
		margin-left -2px

.{$prefix-radio}-button-wrapper-checked
	color $cl-text
	background-color $cl-blue-7
	box-shadow inset 0 0 0 2px $cl-blue-2
	z-index 1