@import "mixins";

body.ssp-admin {
	--wp-admin-theme-color: #{$clr_purple_600};

	// Select2 4.1.0-rc.0 renders the chip list as `display: inline` with a
	// scrolling parent, so chips spill outside the box and align to the bottom.
	// Make the list a wrapping flexbox so the box grows with its content and
	// the chips + search cursor stay vertically centered.
	.select2-container--default .select2-selection--multiple {
		overflow: visible;
		min-height: 2.5rem;

		.select2-selection__rendered {
			display: flex;
			flex-wrap: wrap;
			align-items: center;
			line-height: 1.5rem;
		}

		.select2-selection__choice {
			padding-right: 8px;
		}
	}
}

.ssp-admin {
	background-color: $clr_gray_100;
	font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

	h1.wp-heading-inline {
		color: $clr_gray_700;
		font-weight: 600;
		font-size: 20px;
		margin-right: 15px;
	}

	.page-title-action {
		color: $clr_white;
		background: $clr_purple_600;
		border-color: $clr_purple_600;
		transition: 0.3s;
		font-weight: bold;
		border-radius: 6px;
		font-size: 14px;

		&:hover, &:active, &:focus {
			background: lighten($clr_purple_600, 5%);
			border-color: lighten($clr_purple_600, 5%);
			color: $clr_white;
			font-weight: bold;
		}
	}

	a,
	.button-link {
		color: $clr_purple_600;
		transition: 0.2s;

		&:hover {
			color: lighten($clr_purple_600, 10%);
		}
	}

	.wp-list-table {
		th {
			color: $clr_gray_700;
			font-weight: 500;
			font-size: 14px;
		}
	}

	th.sorted.desc .sorting-indicator.desc:before {
		color: $clr_gray_700;
	}

	ul.subsubsub {
		li {
			font-family: Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

			a {
				font-weight: 700;
				font-size: 13px;

				.count {
					font-weight: 500;
					font-size: 13px;
					color: #51575D;
				}
			}
		}
	}

	.tablenav-pages {

		.displaying-num,
		.tablenav-paging-text,
		.current-page {
			font-weight: 500;
			font-size: 13px;
			color: $clr_gray_700;
		}
	}

	.button,
	.button-secondary {
		color: $clr_purple_600;
		border-radius: 6px;
		border-color: $clr_purple_600;
		background: $clr_white;
		vertical-align: top;
		transition: .3s;
		font-weight: 600;

		&:hover, &:focus {
			color: lighten($clr_purple_600, 5%);
			border-color: lighten($clr_purple_600, 5%);
			background: lighten($clr_purple_600, 40%);
		}

		&:focus {
			box-shadow: 0 0 0 1px lighten($clr_purple_600, 10%);
		}
	}

	.button-secondary {
		font-weight: 500;
	}


	.striped>tbody> :nth-child(odd),
	ul.striped> :nth-child(odd),
	.alternate {
		background-color: $clr_gray_100;

		.check-column label:hover,
		.check-column input:hover+label {
			background: darken($clr_gray_100, 2%);
		}
	}

	.widefat .check-column {
		width: 3em;
	}

	.check-column label:hover,
	.check-column input:hover+label {
		background: lighten($clr_gray_100, 1%);
		transition: .3s;
	}

	.notice-info {
		border-left-color: $clr_purple_600;
	}

	select {
		appearance: none;
		-webkit-appearance: none;
		-moz-appearance: none;

		background-color: white;
		/* this sets the background color */
		background-image: url('../img/select-arrow.svg');
		background-repeat: no-repeat;
		background-position: right 0.75rem center;
		background-size: 1rem;
		padding-right: 2rem;
		border-color: $clr_gray_300;
		border-radius: 6px;

		font-family: Roboto,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		Roboto,
		Oxygen-Sans,
		Ubuntu,
		Cantarell,
		"Helvetica Neue",
		sans-serif;
		font-size: 13px;
		font-weight: 500;

		&:hover, &:focus, option {
			color: $clr_purple_600;
		}
	}

	input[type="checkbox"]:checked {
		background: $clr_purple_600;
		border-color: $clr_purple_600;

		&::before {
			content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23ffffff%27%2F%3E%3C%2Fsvg%3E");
		}
	}

	input[type="radio"]:checked {
		background: $clr_purple_600;
		border-color: $clr_purple_600;

		&::before {
			background-color: $clr_white;
		}
	}

	select {
		&:focus {
			border-color: $clr_purple_600;
			box-shadow: 0 0 0 1px lighten($clr_purple_600, 10%);
			outline: 1px solid transparent;
		}
	}

	input,
	table.widefat,
	.widefat thead td,
	.widefat thead th {
		border-color: $clr_gray_300;
	}

	.no-image {
		background: url('../img/no-image.svg') no-repeat center center;
		background-size: contain;
		width: 40px;
		height: 40px;
		display: inline-block;
	}

	.wrap {
		margin-right: 80px;
		@include smaller(md) {
			margin-right: 20px;
		}
	}

	#screen-meta-links {
		margin-right: 80px;
	}

	.nav-tab {
		background: #eaedf1;
		color: $clr_purple_600;

		&-active, &:hover, &:focus {
			background: #f1f5f9;
			color: $clr_purple_600;
		}

		&:focus {
			box-shadow: 0px -2px 0px -1px #853AED;
		}
	}

	#ssp-settings-submit {
		color: $clr_white;
		background: $clr_purple_700;
		border-color: $clr_purple_700;
		transition: 0.3s;
		font-weight: bold;
		border-radius: 6px;
		font-size: 14px;
		padding: 2px 18px;

		&:hover {
			color: $clr_white;
			background: lighten($clr_purple_700, 5%);
		}

		&:focus {
			box-shadow: 0 0 0 1px $clr_white, 0 0 0 3px $clr_purple_600;
		}
	}

	.trigger-sync {
		background: $clr_purple_600;
		color: $clr_white;
		border-color: $clr_purple_600;
		border-radius: 6px;

		&:hover, &:focus {
			background: lighten($clr_purple_600, 5%);
			border-color: lighten($clr_purple_600, 5%);
		}

		&:focus {
			box-shadow: 0 0 0 1px $clr_white, 0 0 0 3px $clr_purple_600;
		}
	}

	.wp-color-result-text {
		border-radius: 0 4px 4px 0;
	}

	.wp-color-result {
    	border-color: #ccc;
		&:hover {
			border-color: #ccc;
			box-shadow: 0px 0px 6px -1px lighten( $clr_purple_600, 20% );
		}
	}

	&.post-type-podcast {

		.button,
		.button-secondary {
			font-weight: 500;
		}

		.components {
			&-button.is-tertiary,
			&-button.is-link {
				color: $clr_purple_700;

				&:hover:not(:disabled) {
					color: lighten($clr_purple_700, 5%);
					background-color: lighten($clr_purple_600, 40%);
				}
			}

			&-button.is-primary {
				background-color: $clr_purple_600;
				transition: 0.3s;

				&:hover:not(:disabled) {
					background-color: lighten($clr_purple_600, 5%);
				}

				&[aria-disabled=true] {
					background-color: lighten($clr_purple_600, 10%);

					&:hover {
						background-color: lighten($clr_purple_600, 10%);
					}
				}
			}

			&-button[aria-expanded=true] {
				color: $clr_purple_700;
			}

			&-button.is-secondary {
				&:hover {
					color: $clr_purple_600;
					background-color: lighten( $clr_purple_600, 40% );
				}
			}

			&-button.is-destructive {
				background: #0000;
				box-shadow: inset 0 0 0 1px $clr_red_400;
				color: $clr_red_400;
				outline: 1px solid #0000;
				white-space: nowrap;
				transition: 0.3s;

				&:hover {
					color: $clr_red_500;
				}
			}

			&-button.is-pressed:not(:disabled) {
				background: #ffffff;
				&:focus {
					box-shadow: 0 0 0 2px lighten( $clr_purple_600, 10% );
				}
			}

			&-form-toggle.is-checked &-form-toggle__track {
				background-color: $clr_purple_600;
				border-color: $clr_purple_600;
			}

			.components-panel__body-toggle.components-button:focus {
				border-radius: 0;
				box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) $clr_purple_600;
			}

			&-button.editor-post-featured-image__toggle {
				&:hover {
					color: $clr_purple_600;
				}
			}
		}

		.editor-preview-dropdown .components-button {
			transition: 0.3s;
			&:hover {
				color: $clr_purple_600;
			}
		}

		div[role="tablist"][aria-orientation="horizontal"] {
			&:before {
				border-bottom: var(--wp-admin-border-width-focus) solid $clr_purple_700;
			}
		}

		button[role="tab"]:not([aria-disabled="true"]):is(:hover, [data-focus-visible]) {
			color: $clr_purple_700;
		}

		.ssp-episode-meta-sidebar {
			.button {
				color: $clr_purple_700;
				&:hover {
					color: $clr_purple_700;
				}
				border-color: $clr_purple_600;
			}
		}
		

		.block-editor-block-list__empty-block-inserter 
		.block-editor-inserter__toggle.components-button.has-icon:hover,
		.block-editor-block-list__insertion-point-indicator,
		.block-editor-block-list__insertion-point-inserter {
			background: $clr_purple_600;

			&:focus {
				box-shadow: 0 0 0 2px lighten( $clr_purple_600, 10% );
			}
		}

		.upsell-field__btn, .ssp-dynamo__btn {
			border-color: $clr_purple_600;
			background: $clr_white;
		}

		.ssp-dynamo__arrow-up {

			&::after {
				background: url("../img/arrow-up.svg");
			}
		}

	}

	&.podcast_page_podcast_settings {
		.ssp-dynamo,
		.upsell-field {
			&__container {
				background: #F5F0FF;

				&::before {
					background: url('../img/stars-purple.svg');
				}
			}

			&__btn {
				border-color: $clr_purple_600;
				color: $clr_purple_600;
			}
		}

		.ssp-dynamo__arrow-up::after {
			background: url('../img/arrow-up-purple.svg');
		}
	}

	#footer-left {
		font-size: 16px;
		margin-bottom: 20px;
	}

	#wpfooter {
		margin-right: 60px;
	}

	.ssp-admin-header {
		&__container {
			margin: 0 80px 0 20px;
			@include smaller(md) {
				margin: 0 20px;
			}
			@include smaller(sm) {
				flex-direction: column;
				align-items: flex-start;
				gap: 10px;
				padding: 20px 0;
			}
		}
	}
}

.ssp-admin-header {
	display: flex;
	width: calc(100% + 20px);
	height: 100px;
	background: linear-gradient(to bottom, #F6F3FF 0%, #EFE9FEC4 77%);
	margin-left: -20px;

	@include smaller(sm) {
		position: relative;
		top: 45px;
	}

	@include smaller(sm) {
		height: 140px;
	}

	@include smaller(xs) {
		height: 180px;
	}

	&__container {
		display: flex;
		margin: 0 20px 0 20px;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		@include smaller(md) {
			margin: 0 20px;
		}
		@include smaller(sm) {
			flex-direction: column;
			align-items: flex-start;
			gap: 10px;
			padding: 20px 0;
		}
	}

	&__logo {
		display: flex;
		align-items: center;

		&-text {
			margin-left: 10px;
			display: flex;
			flex-direction: column;
			height: 50px;
			justify-content: space-between;

			span {
				font-family: Inter, sans-serif;
				font-size: 20px;
				font-weight: 600;
				color: $clr_purple_900;

				@include smaller(xs) {
					font-size: 18px;
				}
			}

			a {
				font-family: Inter, sans-serif;
				font-size: 11px;
				font-weight: 500;
				color: $clr_white;
				text-decoration: none;
				transition: 0.2s;
				background-color: $clr_purple_900;
				letter-spacing: -2%;
				align-self: flex-start;
				text-transform: uppercase;
				padding: 3px 10px 3px 8px;
				border-radius: 4px;
				margin-top: 2px;

				@include smaller(sm) {
					font-size: 8px;
					padding: 2px 10px 1px 10px;
				}

				&:hover {
					color: lighten($clr_purple_600, 30%);
				}

				&:after {
					content: url('../img/logo-arrow-up.svg');
					display: inline-block;
					width: 10px;
					height: 10px;
					margin-left: 2px;
					position: relative;
					top: 2px;
				}
			}
		}

		svg {
			@include smaller(xs) {
				width: 50px;
			}
		}
	}

	&__info {
		display: flex;
		gap: 20px;
		align-items: center;

		@include smaller(xs) {
			flex-direction: column;
			align-items: flex-start;
			gap: 10px;
		}

		&-plan {
			font-family: Inter, sans-serif;
			font-weight: 500;
			font-size: 14px;
			line-height: 20px;
			color: $clr_purple_700;

			@include smaller(xs) {
				font-size: 12px;
			}
		}

		&-buttons {
			display: flex;
			gap: 6px;

			a {
				display: flex;
				font-family: Inter, sans-serif;
				font-weight: 600;
				font-size: 14px;
				border-radius: 8px;
				padding: 9px 17px;
				background: $clr_purple_700;
				color: $clr_white;
				text-decoration: none;
				transition: .3s;

				@include smaller(xs) {
					padding: 9px 10px;
					font-size: 10px;
				}

				&:hover {
					color: $clr_white;
					background: lighten($clr_purple_700, 5%);
				}
			}
		}
	}

	a:focus {
		box-shadow: 0 0 0 2px $clr_purple_600;
	}

}