@import "../global.less";

.dropdown {
	position: relative;
	display: inline-flex;
	flex-direction: column;

	&.has-error {
		.dropdown-toggle {
			border: 2px solid var(--brand-error);

			&:hover,
			&:focus,
			&:active {
				background-color: var(--brand-error-light);
				color: var(--brand-secondary);
				border: 2px solid var(--brand-error);
			}

			&:focus {
				outline: 1px solid var(--brand-secondary);
			}

			i {
				color: var(--brand-error);
			}
		}
	}

	&.disabled {
		.dropdown-toggle {
			background-color: var(--white);
			color: var(--secondary-disabled-bg);
			border-color: var(--secondary-disabled-bg);
			border-width: 1px;
			box-shadow: none;

			&:hover,
			&:active {
				cursor: not-allowed;
				background-color: var(--white);
				color: var(--secondary-disabled-bg);
				border-color: var(--secondary-disabled-bg);
				border-width: 1px;
				box-shadow: none;
			}
		}
	}

	&:focus-within .dropdown-toggle {
		background-color: var(--brand-secondary);
		color: var(--white);
	}

	.toggle-menu-container {
		position: relative;
		max-width: max-content;

		.dropdown-toggle {
			& span + i {
				margin-left: 0.5rem;
			}

			& i + span {
				margin-left: 0.5rem;
			}
		}
	}

	.dropdown-menu {
		position: absolute;
		right: 0;
		z-index: var(--dropdown-z-index, 150);
		overflow: hidden;
		box-shadow: 1px 2px 10px rgba(0, 0, 0, 15%);
		border-radius: 4px;
		background-color: var(--white);
		display: none;
		width: max-content;
		padding: 5px;

		& fieldset {
			margin-bottom: 0;
		}

		&.full-width {
			min-width: 100%;
		}

		.dropdown-option {
			border: none;
			background: transparent;
			width: 100%;
		}

		> a,
		.dropdown-option {
			display: flex;
			padding: 0.5rem 1rem 0.3rem 0.5rem;
			position: relative;
			text-decoration: none;
			white-space: nowrap;
			align-items: center;
			color: var(--brand-secondary);
			border-radius: 4px;
			cursor: pointer;

			> .material-icons,
			> :is(
					i[class^="at-"],
					i[class*=" at-"],
					i[class^="swepay-icon-"],
					i[class*=" swepay-icon-"]
				) {
				margin-right: 0.5rem;
			}

			&:hover {
				text-decoration: none;
				background-color: var(--light-gray);
			}

			&:focus {
				text-decoration: none;
				outline: 2px solid var(--brand-secondary);
			}
		}
	}

	.dropdown-toggle {
		display: inline-flex;
		align-items: center;
		position: relative;
		font-weight: var(--font-weight-normal);
		font-family: var(--brand-headline);
		text-align: center;
		text-decoration: none;
		vertical-align: middle;
		touch-action: manipulation;
		cursor: pointer;
		line-height: 1rem;
		border: 1px solid var(--brand-secondary);
		white-space: nowrap;
		height: 60px;
		border-radius: var(--border-radius);
		font-size: 1.125rem;
		padding: 12px 16px;
		user-select: none;
		background-color: var(--white);
		color: var(--brand-secondary);

		&:hover:not(:active) {
			background-color: var(--btn-hover);
			color: var(--white);
			border-color: transparent;
		}

		&:not(.disabled):focus-visible {
			outline: 3px solid var(--btn-active-color);
			outline-offset: 0.25rem;
			border-radius: 0.125rem;
		}

		& i {
			transition: transform 0.3s ease-in-out;
		}
	}

	.dropdown-toggle-icon {
		position: relative;
		line-height: 1.1;
		user-select: none;
		border-radius: 2px;
		background-color: transparent;
		color: var(--brand-secondary);
		display: flex;
		padding: 0;
		border: 0;
		outline: 0 solid var(--brand-secondary);

		&:not(
				.material-icons,
				i[class^="at-"],
				i[class*=" at-"],
				i[class^="swepay-icon-"],
				i[class*=" swepay-icon-"]
			) {
			padding: 0.7rem;
		}

		&:hover,
		&:focus {
			cursor: pointer;
			outline-width: 2px;
		}
	}

	&.active {
		.dropdown-toggle {
			background: var(--brand-secondary);
			color: var(--white);

			&:not(.no-rotation) i {
				transform: rotate(180deg);
				transition: transform 0.3s ease;
			}
		}

		.dropdown-menu {
			display: table;

			> a {
				visibility: visible;
			}
		}
	}

	&.anchor-top-left {
		.dropdown-menu {
			left: 0;
			top: 4rem;
		}
	}

	&.anchor-top-right {
		.dropdown-menu {
			top: 4rem;
		}
	}

	&.has-error .help-block {
		color: var(--brand-error);
		border-color: var(--brand-error);
	}
}

@media (prefers-reduced-motion: reduce) {
	.dropdown {
		& i,
		&.active .dropdown-toggle i {
			transition: none;
		}
	}
}

@media (forced-colors: active) {
	.dropdown {
		border: 3px solid;

		&.has-error {
			border: none;
		}

		> a,
		.dropdown-option {
			&:hover,
			&:focus {
				outline: 2px solid;
			}
		}

		.dropdown-toggle-icon {
			border: 3px solid;
		}

		.dropdown-menu {
			outline: 10px solid;

			> a,
			.dropdown-option {
				&:hover,
				&:focus {
					outline: 2px solid;
				}
			}
		}
	}
}