@import "./mixins.scss";

.jet_filter {
	&-title {
		margin: 0 50px 0 0;
		font-size: 24px;
		line-height: 36px;
		font-weight: 500;
		color: #000;

		&-wrapper {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin: 20px 0 15px;
		}
	}

	&-content {
		display: flex;
		align-items: flex-start;
	}

	&-settings {
		width: 100%;
		margin-right: 20px;

		> * + * {
			margin-top: 20px;
		}
	}

	// Sidebar
	&-sidebar {
		position: sticky;
		top: 40px;
		width: 290px;
		flex-shrink: 0;

		> * + * {
			margin-top: 20px;
		}
	}

	// Sidebar blocks
	&-publishing,
	&-help-block {
		border-radius: $radius;
		background-color: $bg-panel;
		box-shadow: $box-shadow;

		&-title {
			margin: 0;
			padding: 8px 12px;
			font-size: 18px;
			line-height: 28px;
			font-weight: 500;
			color: $color-text-heading;
			border-bottom: $border-width solid $border-color;
		}
	}

	// Publishing block
	&-publishing {
		&-date,
		&-actions {
			padding: 12px;
		}

		&-actions {
			display: flex;
			justify-content: space-between;
			background: #f0f0f1;
		}

		.jet-ui_select {
			&-panel {
				padding-top: 0;
				padding-bottom: 0;
				font-size: 13px;
			}
		}
	}

	// Help block
	&-help-block {
		&-list {
			&-item {
				position: relative;
				display: block;
				padding: 12px 12px 12px 38px;
				line-height: 16px;
				text-decoration: none;
				transition: background-color 0.15s ease-in-out;

				svg {
					position: absolute;
					top: 10px;
					left: 10px;
					margin-right: 8px;
					vertical-align: text-bottom;

					path {
						fill: $color-accent;
					}
				}

				&:focus {
					outline: none;
					box-shadow: none;
				}

				&:hover {
					background-color: lighten($color-accent, 60%);
				}
			}

			&-item + &-item {
				border-top: $border-width solid $border-color;
			}
		}
	}

	// Back to list button
	&-back-to-list {
		margin: 8px 3px;
		@include active-transparent-button();
		font-size: 14px;
	}

	// Remove filter button
	&-remove {
		@include remove-transparent-button();
		font-size: 14px;
	}

	// Update filter button
	&-update {
		margin-left: auto;
		width: 135px;
	}

	// color image filter
	.jet-ui_controls-list-item[name="_source_color_image_input"] {
		.jet-ui_repeater {
			&-items {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				align-items: flex-start;
			}

			&-item {
				box-sizing: border-box;
				flex: 0 1 100%;

				@media (min-width: 1220px) {
					flex: 0 1 calc(50% - 20px);
				}
				@media (min-width: 1535px) {
					flex: 0 1 calc(33.3% - 20px);
				}
				@media (min-width: 1850px) {
					flex: 0 1 calc(25% - 20px);
				}
			}

			&-actions {
				padding: 0 20px 20px 20px;
			}
		}
	}
}
