.supt-button-country {
	display: inline-block;
	border-radius: 9999px;
	position: relative;
	outline: none;

	transition: background-color 0.3s;

	@media (min-width: $breakpoint-md) {
		padding: 6px 4px 4px 6px;
	}

	&::after {
		@media (min-width: $breakpoint-md) {
			content: '';
			position: absolute;
			inset: 0;
			border-radius: 9999px;
			box-shadow:
				8px 8px 16px 0px $color-grey-1,
				-8px -8px 16px 0px $color-white;

			opacity: 0;
			transition: opacity 0.5s;
		}
	}

	&__inner {
		display: flex;
		align-items: center;
		gap: $spacing-1-5;
		border-radius: 9999px;
		position: relative;

		transition: background-color 0.3s;

		@media (min-width: $breakpoint-md) {
			padding: 4px 10px 6px 8px;
		}

		&::after {
			@media (min-width: $breakpoint-md) {
				content: '';
				position: absolute;
				inset: 0;
				border-radius: 9999px;
				box-shadow:
					-1px -1px 0px 0px $color-white inset,
					-2px -2px 2px 0px $color-grey-2 inset,
					-1px -1px 0px 0px $color-white,
					-2px -2px 2px 0px $color-grey-2;

				opacity: 0;
				transition: opacity 0.5s;
			}
		}
	}

	&__name {
		@extend %t-body-s;
		color: $color-grey-5;
	}

	&__flag {
		width: 14px;
		height: 14px;
		border-radius: 50%;
		background-size: cover;
		background-position: center;
		flex-shrink: 0;
		overflow: hidden;

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

	&:hover,
	&:focus-visible {
		@media (min-width: $breakpoint-md) {
			background-color: $color-grey-background;

			&::after {
				opacity: 1;
			}

			.supt-button-country__inner {
				background-color: $color-grey-background;

				&::after {
					opacity: 1;
				}
			}
		}
	}
}