@import 'wordpress-vars';
@import 'articles';
@import 'admin-variables';
@import 'colors';
@import 'modals';
@import 'admin-rtl';
@import 'components/confirmation';
@import 'components/tooltip';
@import 'components/pointer';
@import 'components/toggle';
@import 'components/forms';
@import 'components/ajax-loader';

.ac-settings-box {
	margin-bottom: 60px;
	max-width: 800px;

	&-pro-cta {
		p.description {
			font-weight: bold;
		}
	}
}


.ac-pro-list {
	margin-bottom: 20px;
	display: flex;
	flex-wrap: wrap;

	&__item {
		$l: &;
		margin-bottom: 14px;
		position: relative;
		z-index: 1;
		flex: 33%;

		&__label {
			color: #1D2327;
			margin-left: 8px;
			text-decoration: dotted;
			border-bottom: 1px dotted #000;
			text-decoration: none;
			cursor: pointer;
		}

		&__tooltip {
			display: none;
			background: #666;
			color: #fff;
			padding: 15px;
			font-size: 13px;
			line-height: 150%;
		}

		&:hover {
			z-index: 2;

			#{$l}__tooltip {
				display: block;
				position: absolute;
				left: 0;
				top: calc(100% + 5px);
			}
		}

		&.-feature {

			&:before {
				color: var(--ac-pink-color);
				content: "\f132";
				font: normal 16px/0.5 "dashicons";
				speak: none;
				display: inline-block;
				padding: 0;
				top: 5px;
				left: 0;
				position: relative;
				vertical-align: top;
				text-decoration: none !important;
			}
		}
	}
}

h2, h3 {
	&.ac-lined-header {
		display: flex;
		font-weight: normal;
		font-size: 20px;
		width: 100%;
		align-items: center;
		margin-bottom: 30px;

		&:after {
			content: '';

			flex: 100;
			height: 1px;
			background: #D8D8D8;
			margin-left: 23px;
		}
	}
}

/**
 * General
 * ----------------------------------------------------------------------------
 */
#cpac {
	a:focus,
	a:active {
		outline: none;
	}
}

.cpac-step-nav {
	display: flex;

	&__item {
		padding: 15px 45px 15px 0;
		margin: 0;
		margin-right: 30px;
		position: relative;
		background: no-repeat right center url("data:image/svg+xml,%0A%3Csvg width='12px' height='50px' viewBox='0 0 12 50' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='UI-2.0' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' stroke-linecap='square'%3E%3Cg id='Welkom' transform='translate(-175.000000, -101.000000)' stroke='%231D2327'%3E%3Cg id='Menu' transform='translate(0.000000, 93.000000)'%3E%3Cg id='Group-2' transform='translate(71.000000, 8.676440)'%3E%3Cpolyline id='Line-2' points='105.170704 -1.27167289e-16 115.170704 24.0763026 105.170704 49'%3E%3C/polyline%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
		font-weight: bold;
		color: #1D2327;
		font-size: 13px;
		text-transform: uppercase;
		opacity: .2;

		a {
			text-decoration: none;
			color: #1D2327;
		}

		&.-active {
			opacity: 1;
		}

		&:last-child {
			background: none;
		}
	}
}

body.settings_page_codepress-admin-columns,
body.toplevel_page_codepress-admin-columns {

	#wpbody {
		padding-top: 0;
	}

	.notice {
		display: none;
	}

	#cpac {
		.notice:not(.hidden) {
			display: block;
		}
	}


	#wpcontent {
		padding-left: 0;
	}

	.wrap {
		padding: 30px 10px 0 30px;

		.nav-tab-wrapper {
			margin-bottom: 24px;
		}

		.notice {
			margin-top: 16px;
			margin-bottom: 16px;
		}

	}

	@media only screen and (min-width: 1050px) {
		.wrap {
			padding: 30px 40px 0;
		}
		#screen-meta-links {
			margin-right: 20px;
		}
		#screen-meta {
			margin-left: 20px;
			margin-right: 20px;
		}
	}
	@media only screen and (min-width: 1450px) {
		.wrap {
			padding: 30px 70px 0;
		}
		#screen-meta-links {
			margin-right: 50px;
		}
		#screen-meta {
			margin-left: 50px;
			margin-right: 50px;
		}
	}
}

header.cpac-header {
	padding: 37px 32px;
	background: #3D4350;
	display: flex;

	@media only screen and (min-width: 1050px) {
		padding: 37px 42px;
	}

	@media only screen and (min-width: 1450px) {
		padding: 37px 72px;
	}
}

.cpac-admin-nav {
	background: #fff;
	display: flex;
	padding: 0 30px;
	border-bottom: 1px solid #ddd;

	.cpac-nav {
		display: flex;
		margin: 0;
		padding: 0;

		&__item {
			flex: 0 0 auto;
			padding: 0;
			margin: 0;
			margin-right: 40px;

			&.-active a {
				border-bottom: 4px solid #333;
				font-weight: bold;

				&:hover, &:focus {
					color: #333;
				}
			}

			&.-pro a {
				color: var(--ac-pink-color);

				&:hover, &:focus {
					color: var(--ac-pink-color);
				}

				img {
					margin-left: 4px;
				}
			}

			a {
				display: inline-block;
				padding: 30px 0 10px 0;
				text-transform: uppercase;
				text-decoration: none;
				border-bottom: 4px solid #fff;
				color: #333;

				&:hover, &:focus {
					box-shadow: none;
					outline: none !important;
					color: var(--ac-primary-color);
				}
			}
		}
	}

	@media only screen and (min-width: 1050px) {
		padding: 0 40px;
	}

	@media only screen and (min-width: 1450px) {
		padding: 0 70px;
	}
}

.ac-message {
	background: #fff;
	padding: 1px 12px;
	border: 1px solid #ccd0d4;
	border-left-width: 4px;
	margin-bottom: 15px;

	p {
		margin: 0.7em 0;
	}

	&.notice-warning {
		border-left-color: var(--ac-notification-yellow);
	}

	&.notice-error {
		border-left-color: var(--ac-notification-red);
	}

	&.notice-info {
		border-left: 4px solid var(--ac-notification-blue);
	}

	.dashicons {
		color: #8d8d8d;
		margin-right: 5px;
		transform: translateY(-2px);
	}
}


.ac-badge {
	display: inline-block;
	background: var(--ac-notification-orange);
	border-radius: 10px;
	font-size: 9px;
	line-height: 17px;
	padding: 0 6px;
	margin: -2px 0 0 4px;
	vertical-align: middle;
	color: #fff;
	font-weight: 600;
}

a.external {
	&:after {
		content: "\f504";
		display: inline-block;
		margin-left: 4px;
		font-size: 17px;
		color: #797979;
		line-height: 1;
		font-family: dashicons, serif;
		text-decoration: none;
		font-weight: normal;
		font-style: normal;
		vertical-align: top;
		text-align: center;
	}
}

span.dashicons {
	&.flip {
		&:before {
			transform: scale(-1, 1);
			display: inline-block;
		}
	}

	&.yellow {
		color: var(--ac-notification-yellow);
	}

	&.orange {
		color: var(--ac-notification-orange);
	}

	&.red {
		color: #dc3232;
	}

	&.green {
		color: #46b450;
	}

	&.light-gray {
		color: #bbb;
	}

	&.gray {
		color: #8a8a8a;
	}

	&.blue {
		color: #0073aa;
	}

	&.light-blue {
		color: #00a0d2;
	}
}

/**
 * Button
 * ----------------------------------------------------------------------------
 */
.button.loading {
	padding-right: 25px;
	position: relative;
}

.wp-core-ui .button-primary.-pink {
	background: $ac-pink;
	border-color: darken($ac-pink, 3);
}

/**
 * Menu
 * ----------------------------------------------------------------------------
 */
div.menu {
	position: relative;
	padding: 0;
	margin-top: 16px;
	margin-bottom: 16px;

	select {
		display: inline-block;
		margin: 0;
	}

	.spinner {
		display: none;
		float: none;
		visibility: visible;
		margin: 0 0 0 14px;
	}

	.view-link,
	.view-link:active {
		display: inline-block;
		margin: 0 0 0 12px;
		top: 2px;
	}
}

/**
 * Table
 * ----------------------------------------------------------------------------
 */
table.ac-form-table {
	max-width: 1100px;
	margin-top: 20px;

	> tbody > tr > td,
	> tbody > tr > th {
		vertical-align: top;
	}

	&.settings {
		tr {
			th {
				h2 {
					margin: 0;
				}

				font-weight: normal;
			}

			td {
				padding-top: 58px;
			}
		}
	}

	.general {
		form {
			div.checkbox-labels {
				margin-bottom: 6px;
			}

			p.save-button {
				margin-top: 10px;
			}
		}

	}
}

.ac-section-group {
	&.-start {
		max-width: 600px;
	}
}

.ac-section {
	$e: &;
	background: #F5F5F5;
	margin-bottom: 28px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);

	&__header {
		background: #fff;
		padding: 13px 14px;
		border-bottom: 1px solid var(--ac-border-grey);
		position: relative;

		&__title {
			font-size: 15px;
			margin: 0;
			font-weight: bold;
		}
	}

	&__body {
		padding: 16px 16px;
	}

	p {
		margin: 0 0 1em 0;
		max-width: 800px;
	}

	&.-closable {
		#{$e}__header {
			padding-right: 30px;
			cursor: pointer;

			&:after {
				content: "";
				position: absolute;
				right: 20px;
				top: 50%;
				border-left: 4px solid transparent;
				border-right: 4px solid transparent;
				border-bottom: 6px solid #000;
				transition: all .2s;
				margin-top: -4px;

			}
		}

		&.-closed {
			#{$e}__header {
				&:after {
					transform: rotate(180deg);
				}
			}

			#{$e}__body {
				display: none;
			}
		}

	}
}


.ac-general-setting-row {
	margin-bottom: 30px;

	.ac-ajax-loading {
		position: relative;
	}
	.ac-toggle-v2 .ac-ajax-loading{
		position: absolute;
	}

	p {
		margin-top: 5px;
	}
}

.ac-general-setting-row__layout {
	display: flex;
	align-items: center;


}