@import "../button.less";

.btn {
	font-family: var(--brand-default-buttons);

	&:active {
		border: 3px solid var(--brand-secondary);
	}
	
	&.btn-primary {
		&:active {
			box-shadow: none;
		}

		&:hover {
			background-color: @brand-primary;
		}

		&.btn-bank-id {
			& i.bank-id {
				background-color: @white;
			}
		}

		&.loading {
			&:after {
				border-left-color: @white;
			}
		}
	}

	&.btn-secondary {
		border: 1px solid var(--brand-secondary-light-3);

		&:focus {
			box-shadow: none;
		}

		&:active {
			border: 3px solid var(--brand-secondary);
		}  
		
		&:hover {
			background-color: var(--light-gray) !important;
			color: var(--brand-secondary) !important;
		}
	}

 	&.btn-tertiary {
		&:hover {
			background-color: var(--soft-brown) !important;
			border: 3px solid var(--soft-brown);
		}
	} 

	&.btn-guiding-destructive {
		background: var(--btn-destructive-color);
		border-color: var(--btn-destructive-bg);
		color: var(--btn-destructive-bg);

		&:hover {
			background: var(--btn-destructive-bg);
			color: var(--btn-destructive-color);
		}

		&:active {
			border: 2px solid @btn-destructive-hover;
			box-shadow: none;
		}

		&:focus {
			border: 2px solid @brand-secondary;
		}

		&.disabled,
		&[disabled],
		fieldset[disabled] & {
			&,
			&:hover,
			&:focus,
			&.focus,
			&[active],
			&:active,
			&.active {
				background: var(--btn-destructive-disabled-color);
				color: var(--btn-destructive-disabled-bg);
				outline: none;
				border: 1px solid var(--btn-destructive-disabled-bg);
			}
		}
	}

	&.btn-link-destructive {
		border: none;
		border-bottom: none;

		&:hover {
			border: 1px solid @btn-destructive-hover;
		}

		&:focus {
			border: 1px solid @btn-destructive-hover;
			box-shadow: 0 0 0 0.1rem @btn-destructive-hover;
		}

		&.disabled,
		&[disabled],
		fieldset[disabled] & {
			&,
			&:hover,
			&:focus,
			&.focus,
			&[active],
			&:active,
			&.active {
				background: var(--btn-destructive-disabled-color);
				color: var(--btn-destructive-disabled-bg);
				border: none;
			}
		}
	}

	&.btn-executive-destructive {
		background: var(--btn-destructive-bg);
		color: var(--btn-destructive-color);

		&:hover {
			background: var(--btn-destructive-hover);
			color: var(--btn-destructive-color);
		}

		&:active {
			border: 2px solid @btn-destructive-hover;
			box-shadow: none;
		}

		&:focus {
			background-color: @btn-destructive-hover;
		}

		&.disabled,
		&[disabled],
		fieldset[disabled] & {
			&,
			&:hover,
			&:focus,
			&.focus,
			&[active],
			&:active,
			&.active {
				background: var(--btn-destructive-disabled-bg);
				color: var(--btn-destructive-disabled-color);
				outline: none;
			}
		}
	}
}

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