:root {
	--gc-btn-primary-bg: #409eff;
	--gc-readable-width: 50ch;
	--gc-header-color: #303133;
	--gc-text-color: #606266;
	--gc-link-color: #409eff;
}

html:has(dialog[open]) {
	overflow: hidden;
}

dialog {
	padding: 0;

	&::backdrop {
		background-color: rgba(0, 0, 0, 0.6);
	}

	&.gc {
		border: 1px solid lightgray;
		border-radius: 3px;
		animation: gc-dialog-fade-out 0.25s ease forwards;
		&[open] {
			animation: gc-dialog-fade-in 0.25s ease forwards;
		}
		> article {
			padding: 1rem;
			max-width: var(--gc-readable-width);
			> header {
				font-size: large;
				margin-bottom: 1rem;
				color: var(--gc-header-color);
			}
			> section {
				line-height: 1.5;
				color: var(--gc-text-color);
				b {
					font-weight: 600;
					color: #333;
				}
			}
			> footer {
				margin-top: 2rem;
			}
		}

		&.tip {
			overflow: visible;
			> article {
				max-width: 500px;
				width: 500px;
				> header {
					padding-left: 60px;
					> .icon {
						position: absolute;
						top: -15px;
						left: -10px;
						height: 80px;
						width: 80px;
						display: block;
						background-color: white;
						border-radius: 50%;
						> img {
							height: 62px;
							width: 62px;
							margin: 9px;
						}
					}
				}
				> section {
					margin-top: 40px;
					> .illustration {
						display: block;
						margin: 0 auto 20px;
					}
				}
				> footer > form {
					margin: 0;
					> label {
						color: var(--gc-text-color);
						display: flex;
						align-items: center;
						font-weight: normal;
						gap: 5px;
					}
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
			}
		}
	}
}

@keyframes gc-dialog-fade-in {
	from {
		opacity: 0;
		transform: translateY(-8px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes gc-dialog-fade-out {
	from {
		opacity: 1;
		transform: translateY(0);
	}
	to {
		opacity: 0;
		transform: translateY(-8px);
	}
}

a.gc.button,
button.gc {
	display: inline-block;
	text-decoration: none;
	text-align: center;
	background: white;
	border-radius: 4px;
	border: 1px solid rgb(220, 223, 230);
	color: rgb(96, 98, 102);
	cursor: pointer;
	font-family: "open sans", sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	padding: 12px 20px;
	transition: all 0.3s ease-out;

	&:focus,
	&:hover {
		color: var(--gc-btn-primary-bg);
		background: rgb(236, 245, 255);
		border-color: rgb(198, 226, 255);
	}

	&[disabled],
	&[disabled]:focus,
	&[disabled]:hover {
		color: rgb(192, 196, 204);
		cursor: not-allowed;
		background-image: none;
		background: rgb(255, 255, 255);
		border-color: rgb(235, 238, 245);
	}

	&.-primary {
		color: white;
		background: var(--gc-btn-primary-bg);
		border-color: var(--gc-btn-primary-bg);

		&:focus,
		&:hover {
			background: rgb(102, 177, 255);
			border-color: rgb(102, 177, 255);
		}

		&[disabled] {
			color: white;
			background-color: rgb(160, 207, 255);
			border-color: rgb(160, 207, 255);
		}
	}

	&.-warning {
		color: white;
		background: #f7ba2a;
		border-color: #f7ba2a;

		&:focus,
		&:hover {
			background: #f9c855;
			border-color: #f9c855;
		}

		&[disabled] {
			color: white;
			background: #f9c855;
			border-color: #f9c855;
		}
	}

	&.-danger {
		color: white;
		background-color: #f56c6c;
		border-color: #f56c6c;

		&:focus,
		&:hover {
			background: #f78989;
			border-color: #f78989;
			color: #fff;
		}

		&[disabled] {
			color: white;
			background-color: #fab6b6;
			border-color: #fab6b6;
		}
	}

	&.-link {
		color: var(--gc-link-color);
		background: transparent;
		border: 0;
		font-weight: normal;
		padding: 0;
		marign: 0;
	}

	&.-medium {
		font-size: 14px;
		padding: 10px 20px;
		border-radius: 4px;
	}

	&.-small {
		font-size: 12px;
		padding: 9px 15px;
		border-radius: 3px;
	}

	&.-mini {
		font-size: 12px;
		padding: 7px 15px;
		border-radius: 3px;
	}

	&.-loading:not(.-link),
	&.htmx-request:not(.-link) {
		cursor: progress;
		display: inline-flex;
		align-items: center;
		vertical-align: middle;
		justify-content: center;
		gap: 0.5em;

		&:before {
			content: "";

			width: 1em;
			height: 1em;

			border-radius: 100%;
			border: 2px solid currentColor;
			border-top-color: transparent;
			box-sizing: border-box;

			animation: button-loading-spin 0.8s infinite linear;
		}
	}
}

@keyframes button-loading-spin {
	to {
		transform: rotate(359deg);
	}
}

i.fa.htmx-request {
	cursor: progress;
	&::before {
		content: "\f1ce";
	}
	animation: fa-spin 2s infinite linear;
}

a.htmx-request,
button.gc.-link.htmx-request,
button.gc.-link.-loading {
	cursor: progress;
	color: transparent;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.1) 20%,
		rgba(0, 0, 0, 0.6) 50%,
		rgba(0, 0, 0, 0.1) 80%
	);
	background-size: 200% 100%;
	background-clip: text;

	animation: a-htmx-request 1.5s ease-in-out infinite;
}

@keyframes a-htmx-request {
	0% {
		background-position: 200% 0;
	}
	100% {
		background-position: -200% 0;
	}
}

input.gc[type="text"] {
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	font-size: inherit;
	height: 40px;
	line-height: 40px;
	outline: 0;
	padding: 0 15px;
	width: 100%;
	&:focus {
		border-color: #409eff;
	}
	&::placeholder {
		color: #bbb;
	}
}

label.gc {
	font-size: inherit;
	font-weight: normal;
	width: 100%;
	display: flex;
	align-items: center;
	gap: 5px;

	> input[type="radio"] {
		margin-top: 2px;
	}
}

select.gc {
	background: white;
	border-radius: 4px;
	border: 1px solid #dcdfe6;
	font-size: inherit;
	height: 40px;
	line-height: 40px;
	padding: 0 5px;
	width: 100%;
	color: var(--gc-text-color);

	&:focus {
		border-color: #409eff;
	}

	&.-small {
		font-size: 13px;
		height: 32px;
	}
}

article.card {
	border: 1px solid #dbdee4;
	color: #555;
	box-shadow: 0 8px 16px rgba(0, 0, 0, 0.16);
	border-radius: 8px;

	> header {
		border-bottom: 1px solid #dbdee4;
		height: 58px;
		line-height: 25px;
		padding: 15px 20px;

		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 1em;
	}

	> div {
		padding: 20px;
	}

	> footer {
		border-top: 1px solid #dbdee4;
		height: 58px;
		line-height: 25px;
		padding: 15px 20px;

		display: flex;
		align-items: center;
	}
}

table.table,
table.gc {
	width: 100%;
	> thead {
		> tr {
			border-bottom: 1px solid #eee;
			> th {
				color: gray;
				padding: 1em;
				text-align: left;
			}
		}
	}
	> tbody {
		> tr {
			&:not(:last-child) {
				border-bottom: 1px solid #eee;
			}
			&:hover {
				background: ghostwhite;
			}
			> td {
				padding: 1em;
			}
		}
	}
}

[popovertarget] + [popover]:empty {
	position: relative;
	width: 40px;
	height: 40px;
	background: linear-gradient(to right, white 50%, #f0f0f0 75%, white 100%);
	background-size: 200% 100%;
	animation: data-popover-empty-loading 1.5s infinite linear;
}

@keyframes data-popover-empty-loading {
	0% {
		background-position: 100% 0;
	}
	100% {
		background-position: 0% 0;
	}
}

.fm-ftp-info {
	display: grid;
	grid-template-columns: auto max-content;
	gap: 1em;
	width: 500px;

	> .left > h2,
	> .right > h2 {
		font-size: 1em;
		font-weight: 600;
		margin-top: 0;
		text-align: center;
		color: darkslategray;
	}

	> .left {
		border-right: 1px solid lightgray;
		padding-right: 1em;
	}

	> .right {
		> table {
			margin: 0px auto;

			tr > td:nth-child(1) {
				text-align: right;
			}
			tr > td:nth-child(2) {
				padding-left: 10px;
			}
			tr > td:nth-child(3) {
				padding-left: 5px;
				padding-bottom: 3px;
			}

			input {
				width: 160px;
			}
		}
	}
}

.storage-info-kind-popover {
	max-width: 350px;
	text-align: left;
	word-break: break-word;
	table {
		width: 100%;
		td {
			border: 1px solid lightgray;
			padding: 0.5rem 1rem;
		}
		th {
			padding: 0.3rem 1rem;
			text-align: center;
		}
	}
}