@import '../../../styles/_partials/index'

$zIndexOptionNormal: 1
$zIndexOptionSelected: $zIndexOptionNormal + 3
$zIndexOptionTooltip: $zIndexOptionSelected + 3

.RadioBlock
	display: flex
	flex-wrap: wrap
	justify-content: center

	&.RadioBlock__DirectionVert
		flex-direction: column

		.RadioBlock_Option
			&:first-child:not(:last-child)
				border-top-left-radius: 4px
				border-top-right-radius: 4px
			&:last-child:not(:first-child)
				border-bottom-right-radius: 4px
				border-bottom-left-radius: 4px

	&:not(.RadioBlock__DirectionVert) .RadioBlock_Option
		&:first-child:not(:last-child)
			border-top-left-radius: 4px
			border-bottom-left-radius: 4px
		&:last-child:not(:first-child)
			border-top-right-radius: 4px
			border-bottom-right-radius: 4px

	// if child is not a radioblock option then the assumption is that it's a popup, tooltip or some other element that needs to appear above the options
	> *:not(.RadioBlock_Option)
		z-index: $zIndexOptionTooltip

.RadioBlock_Option_TooltipWrapper
	flex: 1

.RadioBlock_Option
	position: relative
	@include theme-background-white-else-graydark
	@include theme-input-border-box-shadow
	border-radius: 0
	text-align: center
	flex: 1

	.RadioBlock_Label_Text
		font-size: 18px
		pointer-events: none
		@include theme-color-gray-else-gray15

	&.RadioBlock_Option__BorderOnHover
		&:hover:not(.RadioBlock_Option__Disabled) .RadioBlock_Wrapper::before
			opacity: 1

	&.RadioBlock_Option__Disabled
		@include theme-color-gray25-else-gray-dark50
		@include theme-background-gray15-else-gray
		opacity: .5
		cursor: not-allowed

		.RadioBlock_Wrapper, .RadioBlock_Wrapper *
			cursor: not-allowed
			pointer-events: none

	&.RadioBlock_Option__Selected
		z-index: 10
		transform: scale(1.01)
		transition:  transform .2s ease 0s

		.RadioBlock_Label_Text
			@include theme-color-graydark-else-white

		.RadioBlock_Wrapper
			&::before
				opacity: 1

			.RadioBlock_Arrow
				transform: scale(1)
				transition: all .2s ease 0s !important
				opacity: 1

	.RadioBlock_Content
		display: block

	.RadioBlock_Wrapper:not(.RadioBlock_Option_Wrapper_Center) .RadioBlock_Content
		height: 100%
		width: 100%

	.RadioBlock_Wrapper
		display: block
		cursor: pointer
		top: 0
		right: 0
		bottom: 0
		left: 0
		transition: all .15s ease 0s
		width: 100%
		height: 100%

		@include selectors_setAsDefaults
			padding: 29px
		@include selectors_appendToNthParentSelector('.RadioBlock_Option__HeightSizeMedium', 1)
			padding-top: 20px
			padding-bottom: 20px
		@include selectors_appendToNthParentSelector('.RadioBlock_Option__HeightSizeNone', 1)
			padding: 0px

		&::before
			content: ""
			display: block
			position: absolute
			top: -2px
			right: 0
			bottom: 0
			left: -2px
			transition: all .15s ease 0s
			opacity: 0
			z-index: $zIndexOptionNormal + 1
			border: 2px solid
			border-radius: 4px

			@include if-theme-light()
				border-color: $green-dark
			@include if-theme-dark()
				border-color: $green

			@include selectors_ifHostHasModifier('.RadioBlock_Option__Warn')
				border-color: $orange

			width: 100%
			height: 100%

			@include selectors_setAsDefaults
				@include theme-background-white-else-graydark
			@include selectors_appendToNthParentSelector('.RadioBlock_Option__Disabled', 1)
				@include theme-background-gray15-else-gray

		*
			position: relative
			z-index: $zIndexOptionNormal + 1
			cursor: pointer

		&.RadioBlock_Option_Wrapper_Center
			display: flex
			flex-direction: column
			justify-content: center


	.RadioBlock_Arrow
		$width: 50px

		position: absolute
		transform: scale(0)
		transform-origin: 100% 0
		transition: all 0s ease 0s
		opacity: 0

		svg
			position: absolute
			top: 8.4px
			right: 11.6px
			z-index: $zIndexOptionSelected + 1
			width: 10px
			height: 14px
			color: $white

			path
				fill: $white

		&::after
			content: ""
			display: block
			position: absolute
			top: 0
			border-width: 0 $width $width 0
			border-style: solid
			width: 0
			height: 0

			@include if-theme-light()
				border-color:  transparent $green-dark transparent transparent
			@include if-theme-dark()
				border-color:  transparent $green transparent transparent

			@include selectors_ifHostHasModifier('.RadioBlock_Option__Warn')
				border-color: transparent $orange transparent transparent

		top: -1px
		right: -1px
		width: $width
		height: $width

		&::after
			border-width: 0 $width $width 0