@import "../element/checkbox";
@import "../element/radio";

html,
body {
	height: 100%;
	font-family: var(--font-stack);
	font-variation-settings: "opsz" 24;
}

/* checkbox */
.checkbox {
	label {
		display: inline-flex;
		align-items: start;
		margin-bottom: 0;
		padding-top: 2.5px;
	}
	--checkbox-right-margin: 8px;

	.label-area {
		@include get_textstyle("sm", "medium");
		color: var(--text-color);
	}

	.input-area,
	.disp-area {
		display: flex;
		align-items: center;
		height: 20px;
	}

	.help-box {
		padding-left: 22px;
		margin-top: 0px;

		@media (max-width: map-get($grid-breakpoints, "lg")) {
			padding-left: 26px;
		}
	}
}

.frappe-card {
	@include card();
	box-shadow: none;
	border: 1px solid var(--border-color);
}

.frappe-control[data-fieldtype="Select"].frappe-control[data-fieldname="color"] {
	.color-select {
		padding-left: 40px;
	}

	.color-box {
		position: absolute;
		top: calc(50% - 11px);
		left: 8px;
		width: 22px;
		height: 22px;
		border-radius: 5px;
		z-index: 1;
	}
}

.frappe-control[data-fieldtype="Select"] .control-input,
.frappe-control[data-fieldtype="Select"].form-group {
	position: relative;

	select {
		/* for Firefox */
		-moz-appearance: none;
		/* for Chrome */
		-webkit-appearance: none;

		padding-right: 28px;
	}

	.select-icon {
		padding-left: inherit;
		padding-right: inherit;
		position: absolute;
		pointer-events: none;
		top: 3px;
		right: 12px;

		&.xs {
			top: 3px;
			right: 10px;
		}

		.icon {
			use {
				stroke: var(--text-muted);
			}
		}
	}

	.placeholder {
		padding-left: inherit;
		padding-right: inherit;
		position: absolute;
		pointer-events: none;
		top: 3px;
		left: 12px;
		max-width: 80%;

		&.xs {
			top: 3px;
		}
	}
}

.no-border {
	border: none !important;
}

.whitespace-nowrap {
	white-space: nowrap;
}

.app-change-log-body {
	h1 {
		font-size: var(--text-2xl);
	}
}

.new-version-log {
	.new-version-links {
		padding: var(--padding-xs) 0px;
	}

	&:not(:last-child) {
		margin-bottom: 1em;
	}
}

.centered {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
}

.btn-link {
	box-shadow: none !important;
	outline: none;
	.icon,
	&:hover {
		text-decoration: none !important;
	}
}

.hidden {
	@extend .d-none;
}

.hide {
	@extend .d-none;
}

.margin {
	margin: var(--margin-sm);
}
.margin-top {
	margin-top: var(--margin-sm);
}
.margin-bottom {
	margin-bottom: var(--margin-sm);
}
.margin-left {
	margin-left: var(--margin-sm);
}
.margin-right {
	margin-right: var(--margin-sm);
}
.info-card {
	display: none;
}

.info-card[data-show] {
	display: block;
	z-index: 1;
	.sidebar-card {
		box-shadow: 0px 18px 22px -6px rgba(0, 0, 0, 0.1), 0px 0px 6px 3px rgba(0, 0, 0, 0.03),
			0px 0px 1.5px 0px rgba(0, 0, 0, 0.18);
	}
	min-width: calc(var(--sm-width) - 360px);
}
