@use "../variables" as *;

/**
 * WP-Admin elements
 */
body.teydeastudio-admin-page {
	#wpcontent {
		padding-left: 0;
	}

	// Core notices & third-party plugin notices.
	#wpbody-content > .notice,
	.tutor-user-registration-notice-wrapper {
		display: none;
	}

	@media (max-width: 782px) {
		--tsc-admin-menu-width: 0px;
	}

	@media (min-width: 783px) and (max-width: 960px) {
		&:not(.auto-fold):not(.folded) {
			--tsc-admin-menu-width: 160px;
		}

		&.auto-fold:not(.folded),
		&.folded {
			--tsc-admin-menu-width: 36px;
		}
	}

	@media (min-width: 961px) {
		&:not(.folded) {
			--tsc-admin-menu-width: 160px;
		}

		&.folded {
			--tsc-admin-menu-width: 36px;
		}
	}
}

/**
 * Settings container
 */
.tsc-settings-container {
	/**
	 * Header section
	 */
	&__header {
		align-items: center;
		background-color: #fff;
		border-bottom: 1px solid $border-color;
		box-sizing: border-box;
		display: flex;
		flex-direction: row;
		gap: 16px;
		height: 65px;
		padding: 12px 16px;
		position: fixed;
		right: 0;
		top: var(--wp-admin--admin-bar--height);
		width: calc(100% - var(--tsc-admin-menu-width));
		z-index: 9500;

		h1 {
			display: none;
			margin: 0;
			padding: 0;
			line-height: 1;
			font-size: 20px;

			@media (min-width: 769px) {
				display: block;
			}
		}
	}

	/**
	 * Actions
	 */
	&__actions {
		align-items: center;
		display: flex;
		flex: 1;
		gap: 1rem;
		justify-content: flex-end;
	}

	/**
	 * Container section
	 */
	&__container {
		padding-top: 65px;
		position: relative;

		&--wide-width {
			display: flex;
			flex-direction: column;
			gap: 16px;
			max-width: 966px;
			padding: 81px 16px 16px;
			margin: 0 auto;

			@media (min-width: 769px) {
				flex-direction: row;
			}
		}
	}

	/**
	 * Table
	 */
	&__table {
		border-collapse: collapse;
		table-layout: fixed;
		width: 100%;

		code {
			color: $text-color--black;
			font-size: 11px;
			padding: 1px 4px 0;
		}

		th {
			text-align: left;
		}

		td {
			border-top: 1px solid #eee;
		}

		th,
		td {
			padding: 6px 0 5px;

			&:not(:last-child) {
				padding-right: 1em;
			}
		}

		em {
			color: $text-color--gray;
			font-style: italic;
		}
	}

	/**
	 * Code element in panel title
	 */
	.components-panel__body-title code {
		color: $text-color--black;
		font-size: 11px;
		margin: 0 0 0 0.5rem;
		padding: 1px 4px 0;
	}

	/**
	 * Adjustments - needs review from time to time
	 */
	.components-panel {
		box-sizing: border-box;
	}

	.components-panel,
	.components-panel__row > div {
		width: 100%;
	}

	.components-panel__body {
		border-bottom: none;
	}

	.components-notice {
		margin: 0;

		&.is-info {
			background-color: $background-color--info;
		}

		p {
			margin: 0;
		}

		p + p {
			margin-top: 0.5rem;
		}
	}

	.components-button.is-tertiary {
		border: 1px solid $border-color;
		justify-content: center;
	}
}