@charset "utf-8";

/* --------------------------------------------------------------------------
   Custom Select
-------------------------------------------------------------------------- */

	.custom-select {

		position: relative;
		width: 100%;
		min-width: 0;


		/* Position: Top */
		&.Top {

			.select {
				bottom: calc(100% + var(--space-8));
				left: 0;
				flex-direction: column-reverse;
			}

		}


		/* Position: Bottom */
		&.Bottom {

			.select {
				top: calc(100% + var(--space-8));
				left: 0;
				flex-direction: column;
			}

		}


		/* Data */
		.data {

			[data-role="value"] {

					.container {

						display: block;
						position: relative;
						width: 100%;

						input:not([type="hidden"]) {
							width: 100%;
							padding-right: var(--space-48);
						}

						> svg {

							position: absolute;
							z-index: 2;
							top: 0;
							right: var(--space-16);
							bottom: 0;
							width: var(--space-24);
							height: var(--space-24);
							margin: auto 0;
							fill: none;
							stroke: var(--color-brand-content-medium);
							opacity: .4;
							transform-origin: center;

							&.arrow {

								display: block;
								pointer-events: none;
								transform: rotate(180deg);
								transition: transform var(--transition-default);

								&.rotate {
									transform: rotate(0deg);
								}

							}

							&.close {

								display: none;
								cursor: pointer;
								pointer-events: auto;

								&.visible {
									display: block;

									~ .arrow {
										display: none;
									}

								}

							}

						}

					}

				}

			/* Error */
			&.input-error {

				[data-role="value"] {

					input:not([type="hidden"]) {
						color: var(--color-negative-border-medium);
						border-color: var(--color-negative-border-medium);

						&::placeholder {
							color: var(--color-negative-content-low);
							opacity: 1;
						}

						&:hover {
							border-color: var(--color-negative-border-medium);
						}

						&:focus {
							border-color: var(--color-negative-border-medium);
							box-shadow: 0 0 0 var(--border-width) var(--color-negative-border-medium);
						}
					}

				}

			}

		}


		/* Select */
		.select {

			display: none;
			position: absolute;
			z-index: 33;
			width: 100%;
			min-width: 0;
			min-height: 0;
			box-sizing: border-box;
			gap: var(--space-8);
			padding: var(--space-8);
			overflow: hidden;
			background: var(--color-brand-surface-low);
			border: var(--border-width) solid var(--color-neutral-border-low);
			border-radius: var(--radius-400);


			/* Search */
			[data-role="search"] {

				position: relative;
				width: 100%;
				flex: none;
				box-sizing: border-box;

				input {
					width: 100%;
					padding-left: var(--space-48);
				}

				> svg {
					position: absolute;
					z-index: 2;
					top: 50%;
					left: var(--space-16);
					width: var(--space-24);
					height: var(--space-24);
					fill: none;
					stroke: var(--color-brand-content-medium);
					opacity: .4;
					pointer-events: none;
					transform: translateY(-50%);
				}

			}


			/* List */
			div[data-view="list"] {

				display: flex;
				width: 100%;
				max-height: 16.25rem;
				min-width: 0;
				min-height: 0;
				flex: 1 1 auto;
				flex-direction: column;
				gap: var(--space-4);
				overflow-x: hidden;
				overflow-y: auto;
				box-sizing: border-box;
				overscroll-behavior: contain;
				scrollbar-width: none;

				&::-webkit-scrollbar {
					display: none;
				}


				/* Empty */
				[data-role="empty"] {

					display: none;
					min-height: 10rem;
					flex: none;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					gap: var(--space-8);
					box-sizing: border-box;
					padding: var(--space-16);
					color: var(--color-neutral-content-low);
					font-size: var(--font-size-body-s);
					font-weight: var(--font-weight-regular);
					line-height: var(--line-height-body-s);
					text-align: center;

					> span {

						display: flex;
						align-items: center;
						justify-content: center;

						svg {
							display: block;
							width: 2.5rem;
							height: 2.5rem;
							fill: none;
							stroke: var(--color-brand-content-medium);
							opacity: .4;
						}

					}

					&.visible {
						display: flex;
					}

				}


				/* Item */
				span[data-id] {

					display: flex;
					min-height: var(--space-48);
					flex: none;
					align-items: center;
					gap: var(--space-8);
					box-sizing: border-box;
					padding: var(--space-8);
					color: var(--color-neutral-content-high);
					background: transparent;
					border-radius: var(--radius-300);
					font-size: var(--font-size-body-m);
					font-weight: var(--font-weight-regular);
					line-height: var(--line-height-body-m);
					cursor: pointer;

					&:hover,
					&.hovered {
						background: var(--color-neutral-white);
					}

					> span:first-of-type {
						min-width: 0;
						flex: 1;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					svg.tick {
						display: block;
						width: var(--space-24);
						height: var(--space-24);
						flex: none;
						fill: none;
						stroke: var(--color-brand-primary);
						opacity: 0;
					}

					&.selected {

						svg.tick {
							opacity: 1;
						}

					}

				}

			}

		}


		/* -----------------------------------------------------------------------
		   Country
		----------------------------------------------------------------------- */

			&[data-template="country"] {

				/* Data */
				.data {

					[data-role="value"] {

						.container {

							display: flex;
							width: 100%;
							height: var(--space-56);
							flex-direction: row;
							overflow: hidden;
							box-sizing: border-box;
							background: var(--color-neutral-white);
							border: var(--border-width) solid var(--color-brand-surface-high);
							border-radius: var(--radius-400);

							transition:
									background-color var(--transition-default),
									border-color var(--transition-default);

							/* Hover */
							&:has(> input:not(:disabled)):not(:focus-within):hover {
								background: var(--color-neutral-surface-low);
								border-color: var(--color-neutral-border-low);
							}

							/* Focus */
							&:has(> input:not(:disabled)):focus-within {
								background: var(--color-neutral-white);
								border-color: var(--color-brand-primary);
							}

							/* Disabled */
							&:has(> input:disabled) {
								background: var(--color-neutral-surface-medium);
								border-color: var(--color-neutral-border-low);
								cursor: default;
							}

							> svg.close, > svg.arrow {
								display: none !important;
							}

						}


						/* Country */
						span[data-role="country"] {

							display: flex;
							height: 100%;
							flex: none;
							align-items: center;
							gap: var(--space-8);
							padding-left: var(--space-16);
							cursor: pointer;

							img {
								display: block;
								width: 1.75rem;
								height: 1.25rem;
								flex: none;
								object-fit: cover;
								border-radius: var(--radius-50);
							}

							svg.arrow {

								display: block;
								position: static;
								width: var(--space-24);
								height: var(--space-24);
								flex: none;
								fill: none;
								stroke: var(--color-brand-content-medium);
								opacity: .4;
								rotate: 180deg;
								transform: none;
								transform-box: view-box;
								transform-origin: center;
								transition: rotate var(--transition-default);

								&.rotate {
									rotate: 0deg;
								}

							}

							span[data-role="code"] {
								flex: none;
								color: var(--color-neutral-content-high);
								font-size: var(--font-size-body-m);
								font-weight: var(--font-weight-regular);
								line-height: var(--line-height-body-m);
								pointer-events: none;
							}

							svg[data-role="email"] {
								display: block;
								width: var(--space-24);
								height: var(--space-24);
								flex: none;
								fill: none;
								stroke: var(--color-neutral-content-low);
							}

						}


						/* Phone and Email */
						.container > input:not([type="hidden"]) {

							width: auto;
							min-width: 0;
							height: auto;
							min-height: 0;
							align-self: stretch;
							flex: 1;
							padding: 0 var(--space-16) 0 var(--space-10);
							background: transparent;
							border: 0;
							border-radius: 0;
							outline: 0;
							box-shadow: none;

							&:hover,
							&:focus,
							&:disabled {
								background: transparent;
								border: 0;
								box-shadow: none;
							}

						}

					}

					/* Error */
					&.input-error {

						[data-role="value"] {

							.container {
								border-color: var(--color-negative-border-medium);

								&:has(> input:not(:disabled)):not(:focus-within):hover {
									background: var(--color-neutral-surface-low);
									border-color: var(--color-negative-border-medium);
								}

								&:has(> input:not(:disabled)):focus-within {
									background: var(--color-neutral-white);
									border-color: var(--color-negative-border-medium);
									box-shadow: 0 0 0 var(--border-width) var(--color-negative-border-medium);
								}
							}

							span[data-role="code"] {
								color: var(--color-negative-border-medium);
							}

							.container > input[type="tel"] {

								color: var(--color-negative-border-medium);
								border: 0;
								box-shadow: none;

								&::placeholder {
									color: var(--color-negative-content-low);
									opacity: 1;
								}

								&:hover,
								&:focus {
									border: 0;
									box-shadow: none;
								}

							}

						}

					}

				}


				/* Select */
				.select {

					width: 17.5rem;

					div[data-view="list"] {

						span[data-id] {

							> img {
								display: block;
								width: 1.75rem;
								height: 1.25rem;
								flex: none;
								object-fit: cover;
								border-radius: var(--radius-50);
							}

							span[data-role="title"] {
								min-width: 0;
								flex: 1;
								overflow: hidden;
								text-overflow: ellipsis;
								white-space: nowrap;
							}

							span[data-role="code"] {
								flex: none;
								color: var(--color-neutral-content-low);
								font-size: var(--font-size-body-s);
								line-height: var(--line-height-body-s);
							}

							svg[data-role="email"] {
								display: block;
								width: var(--space-24);
								height: var(--space-24);
								flex: none;
								fill: none;
								stroke: var(--color-brand-content-medium);
							}

						}

					}

				}

			}

	}