#ap-list {
	column-count: 3;
	column-gap: 0;

	@include media($tablet) {
		column-count: 2;
	}

	@include media($phone) {
		column-count: 1;
	}

	margin: 0 (- dist(-3));
}

#ap-loader, #ap-noscan, #ap-scan {
	background: rgba(white, .1);
	border-radius: 5px;
	padding: dist(-2);
	margin-bottom: dist(-2);
	margin-top: dist(-2);
	font-size: 110%;
}

#ap-noscan {
	font-weight: bold;
}

#ap-box {
	padding-top: dist(-2);

	label {
		display: block;
		color: white;
		font-weight: bold;
		margin-bottom: dist(-3);
	}
}

#psk-modal form {
	@extend %form-row-spacing;
	display: flex;
	align-items: center;
	margin: dist(-2);

	input[type=password] {
		min-width: 5rem;
	}
}

#wificonfbox form {
	@extend %form-row-spacing;
}

%ap-inner {
	cursor: pointer;
	@include noselect;

	position: relative;
	&:active {
		left: 0;
		top: 1px;
	}

	border-radius: 3px;
	color: #222;

	background: #afafaf;
	transition: background-color 0.5s;
	&:hover { background: white }

	display: flex;

	.rssi {
		min-width: 2.5rem;
		flex: 0 0 15%;
		text-align: right;

		&:after {
			padding-left: dist(-5);
			content: '%';
			font-size: fsize(-1);
		}
	}

	.essid {
		flex: 1 1 70%;
		min-width: 0;
		text-overflow: ellipsis;
		overflow: hidden;
		font-weight: bold;
	}

	.auth {
		flex: 0 0 15%;
	}
}

.AP {
	// can't use margins inside a column

	break-inside: avoid-column;
	max-width: 500px;
	padding: dist(-3);

	&.selected .inner {//#70dfa3
		background: #42a6f9 !important; // override the hover effect #43de81
		cursor: default;
		top: 0 !important; // no click effect
	}

	.inner {
		@extend %ap-inner;

		& > * {
			padding: dist(-1);
			@include nowrap;
		}
	}
}

.AP-preview-nil {
	padding: 8px;
	border-radius: 5px;
	border: 1px dashed #ddd;
	width: 250px;
	height: 94px;
}

.AP-preview {
	.wrap {
		@extend %ap-inner;

		flex-direction: row;
		background: #ddd !important; // override the hover effect #43de81
		cursor: default;
		top: 0 !important; // no click effect
		overflow: hidden;

		.inner {
			display: flex;
			flex-direction: column;

			& > * {
				padding: dist(-1);
				@include nowrap;
			}
		}
		.forget {
			align-self: stretch;
			line-height: 100%;
			padding: dist(-1);
			border-left: 1px solid  #bbb;
			display: flex;
			align-items: center;

			&, &:hover {
				color: black;
				text-decoration: none;
			}

			font-size: 28px;

			&:hover {
				background: #dc4a6a;
				color: white;
				border-left: 1px solid  #666;
				border-bottom-right-radius: 3px;
				border-top-right-radius: 3px;
			}

			&:active {
				position: relative;
				padding-top: calc(#{dist(-1)} + 1px);
			}
		}

		.essid, .passwd, .nopasswd {
			padding-bottom: 0;
		}

		.x-passwd {
			font-family: monospace;
		}
	}
}