.supt-country-picker {
	position: fixed;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;

	pointer-events: none;

	padding: 16px;

	z-index: $z-index-country-picker;

	&__wrapper {
		background-color: $color-grey-background;

		width: 100%;
		height: 100%;
		max-width: 826px;
		max-height: 100%;
		overflow-y: auto;
		z-index: 1;

		opacity: 0;
		transform: translateY(20px);

		@media (min-width: $breakpoint-md) {
			height: auto;
		}
	}

	&__header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: $spacing-4 $spacing-6;
		background-color: $color-grey-background;
		border-bottom: 1px solid $color-grey-2;

		position: sticky;
		top: 0;
		z-index: 1;
	}

	&__title {
		@extend %t-body-sm;
		font-weight: 500;
	}

	&__close-btn {
		@extend %reset-button;
		color: $color-grey-5;

		svg {
			display: block;
			width: 12px;
			height: 12px;
		}

		&:hover,
		&:focus-visible {
			color: $color-black;
		}
	}

	&__content {
		display: flex;
		flex-direction: column;

		@media (min-width: $breakpoint-md) {
			flex-direction: row;
			justify-content: space-between;
			padding: $spacing-10 $spacing-6;
		}

		&::after {
			content: '';
			display: none;
			background-color: $color-grey-2;
			flex-shrink: 0;
			order: 1;
			width: 100%;
			height: 1px;

			@media (min-width: $breakpoint-md) {
				display: block;
				width: 1px;
				height: auto;
				margin: calc(22px + $spacing-4) $spacing-6 0;
			}
		}
	}

	&__region {
		padding: $spacing-6 $spacing-6 $spacing-8;
		border-bottom: 1px solid $color-grey-2;

		@media (min-width: $breakpoint-md) {
			padding: 0;
			border-bottom: none;
		}

		&__title {
			@extend %t-body-s;
			font-weight: 500;

			@media (min-width: $breakpoint-md) {
				padding-left: $spacing-3-5;
			}
		}

		&.-europe {
			order: 0;

			@media (min-width: $breakpoint-md) {
				width: 495px;
			}

			.supt-country-picker__countries {
				@media (min-width: $breakpoint-md) {
					columns: 3;
				}
			}
		}
		&.-latin-america {
			order: 2;
			padding-bottom: $spacing-4;

			@media (min-width: $breakpoint-md) {
				width: 175px;
				padding-bottom: 0;
			}

			.supt-country-picker__countries {
				@media (min-width: $breakpoint-md) {
					columns: 1;
				}
			}
		}
	}

	&__countries {
		columns: 2;
		margin-top: $spacing-6;
		column-gap: $spacing-3;

		@media (min-width: $breakpoint-md) {
			margin-top: $spacing-4;
			column-gap: 87px;
		}
	}

	/* Country Button */
	&__country {
		margin-bottom: $spacing-4;
		@media (min-width: $breakpoint-md) {
			margin-bottom: 0;
		}
	}

	&__overlay {
		position: absolute;
		inset: 0;
		background-color: rgba(0, 0, 0, 0.5);

		opacity: 0;
		transition: opacity 0.3s ease-in-out 0.1s;
	}

	&.-is-visible {
		pointer-events: auto;

		.supt-country-picker__overlay {
			opacity: 1;
			transition-delay: 0s;
		}
		.supt-country-picker__wrapper {
			opacity: 1;
			transform: translateY(0);
			transition-delay: 0.1s;
		}
	}

	body.-is-loaded & {
		&__wrapper {
			transition:
				opacity 0.3s ease-in-out,
				transform 0.3s ease-in-out;
		}
	}
}