.mind-admin-content-settings {
	max-width: 700px;
}

.mind-admin-settings-card {
	display: flex;
	flex-direction: column;
	gap: 20px;

	+ .mind-admin-settings-card {
		margin-top: 35px;
	}

	.mind-admin-settings-card-name {
		flex: 1;
		max-width: 250px;

		label {
			display: block;
			font-size: 18px;
			font-weight: 300;
		}
	}
	.mind-admin-settings-card-description {
		font-size: 12px;
		margin-top: -10px;
		color: #646464;
	}

	.mind-admin-settings-card-button-group {
		display: flex;
		gap: 3px;
		border: 1px solid #d0d0d0;
		border-radius: 10px;
		padding: 3px;

		button {
			padding: 14px 18px;
			background: none;
			border: none;
			color: #000;
			font-weight: 500;
			font-size: 14px;
			cursor: pointer;
			margin: 0;
			text-align: left;
			align-items: start;
			display: flex;
			flex-direction: column;
			flex-wrap: wrap;
			flex: auto;
			border-radius: 7px;
			gap: 3px;
			transition: 0.2s background-color;

			&:hover,
			&:focus-visible {
				background-color: #eee;
				outline: 2px solid transparent;
			}

			&.mind-admin-settings-card-button-active {
				color: #fff;
				background-color: #000;
			}

			span {
				opacity: 0.5;
				font-weight: 400;
				font-size: 12px;
			}
		}
	}

	.mind-admin-settings-card-input {
		flex: 1;

		input {
			width: 100%;
			padding: 6px 15px;
			font-size: 1em;
			border: 1px solid #d0d0d0;
			border-radius: 7px;

			&:focus {
				border-color: #222;
				box-shadow: none;
				outline: none;
			}
		}
	}
	.mind-admin-settings-card-input-error input {
		border-color: var(--mind-error-color);
	}
}

.mind-admin-settings-error {
	padding: 20px;
	margin-top: 20px;
	margin-bottom: -20px;
	background-color: var(--mind-error-light-color);
	color: var(--mind-error-color);
	border-left: 3px solid var(--mind-error-color);
}
.mind-admin-setting-error {
	font-size: 12px;
	margin-top: 2px;
	color: var(--mind-error-color);
}

.mind-admin-settings-actions {
	margin-top: 35px;

	button {
		display: inline-flex;
		align-items: center;
		gap: 10px;
		padding: 10px 18px;
		border-radius: 7px;
		background-color: #000;
		border: 1px solid #000;
		color: #fff;
		cursor: pointer;

		&:hover,
		&:focus-visible {
			background-color: #303030;
		}

		&:focus-visible {
			box-shadow: 0 0 0 3px rgba(#000, 30%);
			outline: 2px solid transparent;
		}

		&:disabled {
			border: 1px solid #bfbfbf;
			background-color: #dcdcdc;
			color: #000;
			opacity: 0.3;
			pointer-events: none;
		}

		svg {
			width: 20px;
			height: auto;
			margin: -5px;
			margin-left: 0;
			animation: 1s mind-settings-loading-icon infinite linear;
		}
	}
}

@keyframes mind-settings-loading-icon {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}
