@import "../global.less";

.btn {
	display: inline-flex;
	justify-content: center;
	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: 23.72px;
	border: none;
	white-space: nowrap;
	user-select: none;
	height: 3.5rem;
	border-radius: var(--border-radius);
	font-size: 1.125rem;
	padding: 12px 16px;

	&.btn-icon:is(.btn-xs, .btn-sm, .btn-lg, .btn-xl) {
		height: fit-content;
	}

	&.btn-xl {
		height: 4.5rem;
		font-size: 1.25rem;
		line-height: 24px;
		padding: 24px;
	}

	&.btn-lg {
		height: 3.5rem;
		font-size: 1.125rem;
		line-height: 23.72px;
		padding: 12px 16px;

		&.btn-icon {
			padding: 15px;

			i {
				font-size: 1.5rem;
			}
		}
	}

	&.btn-sm {
		height: 3rem;
		font-size: 0.875rem;
		line-height: 1rem;
		padding: 1rem;

		&.btn-icon {
			padding: 11px;

			i {
				font-size: 1.5rem;
			}
		}
	}

	&.btn-xs {
		height: 2.375rem;
		font-size: 0.875rem;
		line-height: 16px;
		padding: 12px;

		&.btn-icon {
			border-radius: 6px;
			aspect-ratio: 1;
			display: inline-grid;
			place-content: center;
			place-items: center;
			padding: 9px;

			i {
				font-size: 1.125rem;
			}
		}
	}

	&:not(.loading, [disabled], .disabled, :active):hover {
		background-color: var(--btn-hover);
		color: var(--white);
	}

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

	&.btn-primary {
		background-color: var(--btn-primary-color);
		color: var(--btn-primary-text-color);

		&.btn-bank-id i.bank-id {
			background-color: var(--btn-primary-text-color);
		}
	}

	&.btn-secondary,
	&.btn-icon:not(.btn-primary, .btn-tertiary) {
		background-color: var(--btn-secondary-color);
		color: var(--btn-secondary-text-color);
		border: 1px solid var(--btn-secondary-border-color);

		&.disabled,
		&[disabled] {
			border-color: var(--btn-disabled-text);
		}

		&.btn-bank-id i.bank-id {
			background-color: var(--btn-secondary-text-color);
		}
	}

	&:is(.btn-primary, .btn-secondary).btn-bank-id {
		display: flex;
		justify-content: center;

		i.bank-id {
			height: 1.5rem;
			width: 1.5rem;
			display: inline-flex;
			background-image: none;
			margin-left: 0.5rem;

			&.bank-id-no,
			&.no {
				mask-image: url("../../icons/bank-id/bankid_no.svg");
			}

			&.bank-id-se,
			&.se {
				mask-image: url("../../icons/bank-id/bankid_se.svg");
			}

			&.bank-id-dk,
			&.mitid-dk,
			&.dk {
				mask-image: url("../../icons/bank-id/mitid_dk.svg");
				mask-repeat: no-repeat;
				mask-position: center;
			}
		}
	}

	&.btn-tertiary {
		background-color: var(--btn-tertiary-color);
		color: var(--btn-tertiary-text-color);
	}

	&.disabled:not(.loading),
	&[disabled]:not(.loading),
	fieldset[disabled] & {
		&,
		&:hover,
		&:focus,
		&.focus,
		&[active],
		&:active,
		&.active {
			color: var(--btn-disabled-text);
			outline: none;
			cursor: not-allowed;
			box-shadow: none;

			&.btn-secondary {
				outline-color: var(--btn-disabled-text);
			}

			&.btn-primary,
			&.btn-tertiary {
				background-color: var(--btn-bg-disabled);
			}

			&.btn-bank-id {
				i.bank-id {
					background-color: var(--btn-disabled-text);
				}
			}
		}
	}

	&[disabled],
	&.disabled {
		cursor: not-allowed;
	}

	.material-icons,
	.material-icons-outlined,
	:is(
			i[class^="at-"],
			i[class*=" at-"],
			i[class^="swepay-icon-"],
			i[class*=" swepay-icon-"]
		) {
		font-size: 1.25rem;
		position: relative;
		display: inline-block;
		line-height: 1;

		&:not(:last-child) {
			margin-right: 0.5rem;
		}
	}

	&.loading {
		&:after {
			content: "";
			border-radius: 50%;
			margin-left: 0.5rem;
			border: 0.15rem solid;
			width: 1rem;
			height: 1rem;
			aspect-ratio: 1;
			animation: loader-spin 0.8s linear infinite;
		}

		&.btn-primary {
			&:after {
				border-color: var(--gray);
				border-left-color: var(--btn-primary-text-color);
			}
		}

		&.btn-secondary {
			&:after {
				border-color: var(--gray);
				border-left-color: var(--btn-secondary-text-color);
			}
		}

		&.btn-tertiary {
			&:after {
				border-color: var(--gray);
				border-left-color: var(--btn-secondary-text-color);
			}
		}

		&.btn-sm,
		&.btn-xs {
			&:after {
				width: 0.75rem;
				height: $width;
			}
		}

		&.btn-bank-id {
			i.bank-id {
				display: none;
			}
		}
	}

	&.btn-block {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
	}

	/* Vertically space out multiple block buttons */
	&.btn-block + .btn-block {
		margin-top: var(--base-margin-sm);
	}

	/* Specificity overrides */
	&input[type="submit"],
	&input[type="reset"],
	&input[type="button"] {
		&.btn-block {
			width: 100%;
		}
	}
}

.button-group {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

@keyframes loader-spin {
	0% {
		transform: rotate(0deg);
	}

	100% {
		transform: rotate(360deg);
	}
}

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

		&:focus,
		&.focus {
			outline: 2px solid;
		}
	}
}