.ct-custom-fonts-modal {

	// [data-state="new"] h2 {
	// 	margin-bottom: 20px;
	// }

	// [data-state="edit"] h2 {
	// 	margin-bottom: 0;
	// }

	h2 {
		margin-bottom: 20px;
	}

	.ct-tabs-scroll {

		.ct-tabs {
			--tabs-container-margin: 0;
		}

		.ct-current-tab {
			--tabs-content-padding: 35px var(--modal-padding);
		}
	}

	.ct-font-name {
		margin-bottom: 20px;
	}
}

.ct-upload-fonts {
	margin: 20px 0 0 0;

	li {
		display: flex;
		align-items: center;
		gap: 12px;
		position: relative;
		margin: 0;
		padding: 20px 0;
		border-top: 1px dashed #eee;

		&:last-child {
			padding-bottom: 0;
		}
	}

	.ct-select-input {
		max-width: 150px;

		&:before {
			content: 'ref-width';
		}
	}

	.ct-variation-name {
		width: 60px;
		height: 20px;
		font-size: 13px;
		font-weight: 500;
		box-sizing: border-box;
		border-inline-end: 1px solid #eee;
	}

	.ct-font-preview {
		font-size: 13px;
	}

	.ct-upload-edit-font-button {
		width: 100px;
		margin-inline-start: auto;
	}

	.ct-remove {
		position: absolute;
		inset-inline-end: -28px;
		width: 24px;
		height: 24px;
		padding: 0;
		appearance: none;
		border: none;
		cursor: pointer;
		background: transparent;
		color: rgba(94, 109, 128, 0.7);

		&:hover {
			color: #e05757;
		}

		&:focus {
			outline: none;
		}
	}

	.ct-add-variation {

		.button {
			width: 100px;
			margin-inline-start: auto;
		}
	}
}