#ssp-episode-meta-sidebar\:ssp-episode-meta-sidebar {
	.interface-complementary-area-header__title {
		font-size: 12px;
	}
}

.ssp-episode-meta-sidebar, .ssp-sidebar-panel {
	.ssp-accordion {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		cursor: pointer;
		padding: 16px;
		font-weight: 500;
		margin: 0;
		background: lighten($clr_gray_100, 2%);
		
	
		transition: 0.4s;

		&:hover {
			background: $clr_gray_100;
		}

		&:after {
			content: '';
			display: inline-block;
			position: relative;
			width: 10px;
			height: 10px;
			border-right: 2px solid #383838;
			border-bottom: 2px solid #383838;
			transform: rotate(45deg);
		}

		&.open {
			&:after {
				transform: rotate(-135deg);
				top: 3px;
			}
			border-bottom: 1px solid #ddd;
		}
	}

	.ssp-sync-label {
		margin-top: 8px;
	}

	.ssp-sync-message {
		margin-top: 8px;
	}
}

.ssp-sidebar-panel {
	width: 100%;

	.ssp-accordion {
		background: none;
		width: calc(100% + 32px);
		margin-left: -16px;
		margin-bottom: -16px;
		border-top: 1px solid #ddd;
		padding: 8px 16px;

		svg {
			transform: rotate(180deg);
		}

		&:hover {
			background: #f0f0f0;
		}
		&.open {
			border-bottom: none;
			margin-bottom: 0;

			svg {
				transform: rotate(0);
			}
		}
		&:after {
			display: none;
		}
	}

	.ssp-file-info {
		display: flex;
		margin-top: 8px;
		align-items: center;
		gap: 4px;

		img {
			position: relative;
			top: -2px;
		}

		span {
			color: #555555;
		}
	}

	.ssp-open-meta-btn {
		margin: 16px 0 4px;
		color: #555555;
		font-weight: 500;
		height: 100%;
		padding: 4px 0;
		text-align: center;;
		display: flex;
		justify-content: center;
		min-height: 32px;
		overflow: hidden;
		transition: .4s;
		width: 100%;
		background: #F7F7F7;

		border-radius: 3px;
		border-width: 1px 1px 2px 1px;
		border-style: solid;
		border-color: #CCCCCC;
		box-shadow: none;

		&:hover {
			box-shadow: none;
			color: $clr_purple_600;
			opacity: 0.8;
		}
	}

	
}

.ssp-episode-meta-sidebar {
	.interface-complementary-area-header  {
		background: #f8fafb;
	}

	.components-panel__body {
		padding: 0;
		&:last-child {
			border-bottom: 1px solid #ddd;
		}
	}

	input[type=text] {
		border-radius: 3px;
	}

	input[type=checkbox] {
		border: 1px solid #CBD5E1;
		border-radius: 5px;
	}

	.components-checkbox-control__label {
		color: #334155;
	}


	.components-radio-control .components-base-control__field > div {
		flex-direction: row;
		gap: 0.5rem;
		justify-content: start;
	}

	h3 {
		text-transform: none;
		font-size: 13px;
		font-weight: 500;
		margin: 8px 0;
	}

	.description {
		margin: 12px 0;
		font-size: 11px;
		line-height: 13px;
		color: #64748B;
	}

	.ssp-sidebar-content {
		padding: 8px 16px;
	}

	.ssp-sidebar-field-section {
		margin-bottom: 16px;
	}

	.flex {
		display: flex;
	}

	.gap-2 {
		gap: 0.5rem;
	}

	.w-full {
		width: 100%;
	}

	.mb-2 {
		margin-bottom: 0.5rem;
	}

	.ssp-image-uploader {
		margin-top: 8px;

		img {
			transition:0.4s;
			box-shadow: 1px 1px 6px 0 rgba(0, 0, 20, 0.2);

			&:hover {
				box-shadow: 1px 1px 8px 0 rgba(0, 0, 20, 0.3);
			}
		}

		.no-image {
			height: 230px;
			width: 100%;
			background: $clr_blue_50;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			color: #555;
			box-shadow:1px 1px 6px 0 rgba(0, 0, 20, 0.2);
			transition:0.4s;

			&:hover {
				box-shadow: 1px 1px 8px 0 rgba(0, 0, 20, 0.3);
			}
		}

		.remove-image {
			position: absolute;
			top: 4px;
			right: 4px;
			background: white;
			border-radius: 50%;
			width: 24px;
			height: 24px;
			min-width: 24px;
			box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
		}
	}

	.ssp-promo-sidebar {
		margin-right: -16px;
		margin-left: -16px;
		background: lighten( $clr_purple_600, 40% );
		padding: 16px;
		margin-bottom: -24px;

		&__description {
			color: $clr_purple_600;
		}

		&__description-row {
			display: flex;
			gap: 12px;
			margin-bottom: 12px;
		}

		&__bell {
			width: 40px;
			min-width: 40px;
			height: 40px;
			background: lighten( $clr_purple_600, 30% );
			border-radius: 4px;
			img {
				padding: 8px;
			}
		}

		&__btn {
			display: block;
			border: 1px solid $clr_purple_600;
			border-radius: 3px;
			padding: 8px;
			width: 100%;
			text-decoration: none;
			text-align: center;
			transition: .4s;
			box-shadow: 0 0 4px 0 rgba(0, 0, 20, 0.2);
			color: $clr_purple_700;

			&:hover {
				background: lighten( $clr_purple_600, 40% );
				box-shadow: 1px 1px 8px 0 rgba(0, 0, 20, 0.3);
			}

			img {
				position: relative;
				top: 3px;
				left: 4px;
			}
		}
	}

}

.ssp-date-input {
	.components-popover__content {
		padding: 8px;
	}

}

.ssp-calendar-icon {
	position: relative;
	&:after {
		content: '';
		display: inline-block;
		position: absolute;
		right: 6px;
		background: url(../img/calendar.svg) no-repeat;
		background-size: contain;
		width: 17px;
		height: 16px;
		top: 7px;
	}
}

.ssp-gut-sidebar-notice {
	margin-top: 8px;
}

