@charset "UTF-8";
@use '../../configurations/mixins' as mixin;
@use '../../configurations/bem' as bem;
@use '../../configurations/variables' as var;
@use '../../configurations/functions' as func;
@use '../../configurations/colors/colors' as colors;
@use '../../vendor/grid/breakpoints' as breakpoint;

@keyframes radiobutton-advanced-icon-pulse {
	0% {
		transform: scale(1);
		opacity: 0.8;
	}

	45% {
		transform: scale(1.65);
		opacity: 0;
	}

	100% {
		transform: scale(1.65);
		opacity: 0;
	}
}

@include mixin.molecule(radiobutton-advanced) {
	@include breakpoint.bp-down(sm) {
		&.is-expanded {
			padding-bottom: var(--radiobutton-advanced-collapsed-height, 0);

			[class*='m-radiobutton-advanced__options'] {
				position: absolute;
				right: 0;
				left: 0;
				z-index: func.z_index(foreground);
				padding: func.rhythm(1);
				border: 1px solid colors.$color-concrete;
				border-radius: var.$border-radius;
				background-color: colors.$color-snow;
			}
		}

		&.is-collapsed:not(.is-expanded) {
			[class*='m-radiobutton-advanced__options'] > [class*='m-radiobutton-advanced__option'] {
				@include mixin.visuallyhidden;

				&.is-visible {
					position: static;
					width: auto;
					height: auto;
					margin-bottom: 0;
					overflow: visible;
					clip: auto;
				}
			}

			[class*='m-radiobutton-advanced__options'] > [class*='m-radiobutton-advanced__option'].is-visible {
				cursor: pointer;

				[class*='m-radiobutton-advanced__icon'] {
					display: inline-flex;
				}
			}
		}

		&.is-collapsed:not(.is-expanded):not(.has-selection) {
			[class*='m-radiobutton-advanced__options'] > [class*='m-radiobutton-advanced__option'].is-visible {
				[class*='m-radiobutton-advanced__icon'] {
					background-color: colors.$color-ocean-lighter;

					&::after {
						animation: radiobutton-advanced-icon-pulse 2.8s ease-out infinite;
					}
				}
			}
		}
	}

	@include bem.e(options) {
		width: 100%;

		@include breakpoint.bp-up(md) {
			display: flex;
			flex-wrap: wrap;
			gap: func.rhythm(1);
		}
	}

	@include bem.e(option) {
		margin-bottom: func.rhythm(1);
		border: 1px solid colors.$color-concrete;
		border-radius: var.$border-radius;
		background-color: colors.$color-snow;
		box-shadow: none;
		transition: box-shadow 0.25s ease;

		&:last-child {
			margin-bottom: 0;
		}

		@include breakpoint.bp-up(md) {
			flex: 1 1 0;
			margin-bottom: 0;
		}

		&.is-checked {
			border-color: colors.$color-ocean-light;
			background-color: colors.$color-ocean-lighter;
			box-shadow: 0 0 0 2px colors.$color-ocean-light, 0 func.rhythm(0.5) func.rhythm(0.5) rgba(colors.$color-cyberspace, 0.1);

			> label {
				&:hover,
				&:focus {
					background-color: colors.$color-ocean-lighter;
				}
			}
		}

		> label {
			width: 100%;
			height: 100%;
			padding-left: func.rhythm(1);
			padding-right: func.rhythm(1);
			margin-bottom: 0;

			&:hover,
			&:focus {
				background-color: colors.$color-ash;
			}

			@include breakpoint.bp-up(md) {
				padding-left: func.rhythm(1.5);
				padding-right: func.rhythm(1.5);
				padding-top: func.rhythm(1) !important;
				padding-bottom: func.rhythm(1) !important;
			}
		}
	}

	@include bem.e(content) {
		display: block;
		flex-grow: 1;
	}

	@include bem.e(label) {
		display: block;
		font-family: var.$font-family-medium;
	}

	@include bem.e(description) {
		display: block;
		margin-top: func.rhythm(0.25);
		color: colors.$color-dark;
		font-size: var.$size-medium;
		line-height: 1.4;
	}

	@include bem.e(icon) {
		display: none;
		position: relative;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		flex-shrink: 0;
		gap: func.to_rem(3px);
		align-self: center;
		margin-left: func.rhythm(1);
		padding: func.rhythm(0.5);
		width: func.to_rem(28px);
		height: func.to_rem(28px);
		border-radius: 50%;
		background-color: colors.$color-snow;

		&::after {
			position: absolute;
			inset: 0;
			border-radius: 50%;
			box-shadow: 0 0 0 2px colors.$color-ocean;
			content: '';
			opacity: 0;
			pointer-events: none;
		}

		> span {
			width: func.to_rem(4px);
			height: func.to_rem(4px);
			border-radius: 50%;
			background-color: colors.$color-cyberspace;
		}
	}
}