/**
 * Editor Styles
 *
 * NOTE: `!important` is used in this stylesheet to enforce specific styles
 * for components that need to override default or inherited styles from 
 * external sources, such as WordPress block editor.
 */

/* stylelint-disable-next-line selector-class-pattern */
.block-editor-block-list__layout {
	.wp-block-smart-social-media-buttons-main {
		&.is-highlighted {
			&::after {
				outline-style: dotted;
			}
		}
	}
}

.wp-block-smart-social-media-buttons-main {
	margin: 0;

	/* stylelint-disable-next-line selector-class-pattern */
	.block-editor-block-list__layout {
		display: flex;
	}

	/* Horizontal alignment */
	&.horizontal-align {
		/* stylelint-disable-next-line selector-class-pattern */
		.block-editor-block-list__layout {
			/* stylelint-disable-next-line selector-class-pattern */
			.block-editor-block-list__block {
				margin: 0;
			}
		}
	}

	/* Vertical alignment */
	&.vertical-align {
		/* stylelint-disable-next-line selector-class-pattern */
		.block-editor-block-list__layout {
			flex-flow: column wrap;
			align-items: flex-start;
	
			/* stylelint-disable-next-line selector-class-pattern */
			.block-editor-block-list__block {
				margin: 0;
			}
		}
	}

	/* Flex wrap */
	.ssmb-block-wrapper {
		.block-list-appender.wp-block {
			position: absolute;
			bottom: 0;
			padding: 0;
			right: 0;
			z-index: 2;
		}
	}
}

/* Sidebar */
.block-editor-block-inspector {
	/* Panel Body - Changes Indicator */
	/* stylelint-disable-next-line selector-class-pattern */
	.components-panel__body {
		/* stylelint-disable-next-line selector-class-pattern */
		.components-panel__body-title {
			&.ssmb-panel-changed {
				button {
					&::after {
						content: '';
						background-image: url('data:image/svg+xml,%3Csvg%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20role%3D%22img%22%20aria-label%3D%22Indicator-Icon%22%3E%3Cpath%20d%3D%22M6.30766%2019.2713C5.9672%2019.3548%205.64872%2019.0712%205.69241%2018.7234L6.34864%2013.4997C6.36126%2013.3993%206.40405%2013.3051%206.47135%2013.2295L15.807%202.74679C16.1743%202.33435%2016.8064%202.29776%2017.2188%202.66507L20.9289%205.96916C21.3413%206.33647%2021.3779%206.96858%2021.0106%207.38101L11.675%2017.8637C11.6077%2017.9393%2011.519%2017.9927%2011.4207%2018.0168L6.30766%2019.2713Z%22%20fill%3D%22%234F4ED7%22/%3E%3C/svg%3E');
						background-size: cover;
						background-repeat: no-repeat;
						background-position: center;
						width: 20px;
						height: 20px;
						margin-left: 10px;
						margin-bottom: -5px;
						margin-top: -4px;
					}
				}
			}
		}

		.ssmb-changed-indicator {
			display: flex;
			align-items: center;
			justify-content: center;
			padding-left: 5px;

			svg {
				width: 20px;
				height: 20px;
			}
		}
	}

	/* Layout Panel - Tabs */
	/* stylelint-disable-next-line selector-class-pattern */
	.ssmb-panel-tabs > .components-tab-panel__tabs {
		position: sticky;
		top: 47px;
		display: flex;
		flex-wrap: nowrap;
		border-bottom: 1px solid #ddd;
		z-index: 5;

		/* stylelint-disable-next-line selector-class-pattern */
		.components-tab-panel__tabs-item {
			justify-content: center;
			background-color: #fff;
			width: 100%;

			&.active-tab {
				border-bottom: 1px solid #4F4ED7;
			}
		}
	}

	/* Alignment mode */
	.ssmb-alignment-mode {
		.alignment-mode-controls {
			display: flex;
			flex-wrap: nowrap;
	
			button {
				justify-content: center;
				width: 100%;
				margin: 0;
			}
		}
	}

	.ssmb-alignment-controls {
		display: flex;
		flex-wrap: nowrap;

		button {
			width: 100%;

			svg {
				width: 22px;
			}
		}
	}

	/* Flex wrap */
	.ssmb-flex-wrap {
		.ssmb-select {
			width: 100%;
		}
	}

	/* Mode Controls - Background Panel */
	.ssmb-background-mode-toggle {
		.background-mode-controls {
			display: flex;
			flex-wrap: nowrap;

			button {
				justify-content: center;
				width: 100%;
				margin: 0;
			}
		}
	}

	/* Border - Borders Panel */
	.ssmb-border-style-control {
		.ssmb-border-style {
			display: flex;
			flex-wrap: nowrap;

			button {
				width: 100%;
			}
		}
	}

	/* Other */
	[class*="ssmb-"] {
		--wp-admin-theme-color: #4F4ED7;
		--wp-admin-theme-color-darker-10: #4140b7;
	}

	/* stylelint-disable-next-line selector-class-pattern */
	.components-base-control__label {
		text-transform: capitalize;
	}

	/* Range control */
	.ssmb-control-wrapper {
		display: flex;
		align-items: center;
		justify-content: space-between;

		/* stylelint-disable-next-line selector-class-pattern */
		.components-base-control__field {
			margin-bottom: 0;
		}

		.components-range-control {
			width: 100%;

			/* stylelint-disable-next-line selector-class-pattern */
			.components-range-control__root {
				.components-input-control {
					display: none;
				}
			}
		}

		.ssmb-input-control {
			height: 32px;
			min-height: 32px;
			margin-left: 16px;
			border-radius: 2px;
		}

		/* stylelint-disable-next-line selector-class-pattern */
		.components-text-control__input {
			border-color: #ccc;

			&:focus {
				box-shadow: none;
				border-color: #4f4ed7;
			}
		}

		.ssmb-select {
			width: 100%;
		}

		select {
			border-color: #ccc;

			&:focus {
				outline: transparent solid 2px;
				outline-offset: -2px;
				box-shadow: none;
				border-color: #4F4ED7;
			}
		}
	}

	/* Range control (with icons) */
	.ssmb-range-control {
		display: flex;
		align-items: center;

		.components-range-control {
			width: 100%;
			
			.components-input-control {
				display: none;
			}
		}

		/* stylelint-disable-next-line selector-class-pattern */
		.components-base-control__field {
			margin-bottom: 0;
		}

		.components-base-control {
			/* stylelint-disable-next-line selector-class-pattern */
			.components-base-control__field {
				display: flex;
				align-items: center;
				justify-content: space-between;

				/* stylelint-disable-next-line selector-class-pattern */
				.components-base-control__label {
					width: 30px;
					margin-top: 4px;
					margin-right: 10px;
					margin-bottom: 0;
				}

				.ssmb-control-wrapper {
					width: 100%;
				}
			}
		}

		.ssmb-control-wrapper {
			&.ssmb-sync-all {
				/* stylelint-disable-next-line selector-class-pattern */
				.components-base-control__label {
					margin-right: 12px;
				}
			}
		}

		&.separated > .components-base-control {
			width: 100%;
		}
	}

	/* Color control */
	.ssmb-color-palette-control {
		.ssmb-control-wrapper {
			align-items: flex-start;
		}

		/* stylelint-disable-next-line selector-class-pattern */
		.components-circular-option-picker__custom-clear-wrapper {
			display: none;
		}

		/* stylelint-disable-next-line selector-class-pattern */
		.components-color-palette__custom-color-wrapper {
			/* stylelint-disable-next-line selector-class-pattern */
			.components-color-palette__custom-color-button {
				height: 30px;
				border-radius: 2px;
				outline: none;

				&::after {
					background-image: none;
				}
			}

			/* stylelint-disable-next-line selector-class-pattern */
			.components-color-palette__custom-color-text-wrapper {
				box-shadow: none;
				padding: 8px 4px;
			}
		}
	}

	/* Background Image control */
	.ssmb-background-image-control {
		.ssmb-upload-button {
			justify-content: center;
			border: 1px solid #ddd;
			width: 100%;
		}

		.ssmb-control-wrapper {
			&.ssmb-background-image {
				margin: 10px 0;
				align-items: flex-start;
	
				img {
					flex: 1 1 100px;
					height: auto;
					margin: 0;
					min-width: 100px;
					object-fit: contain;
					border-radius: 2px;
				}

				.ssmb-reset-button {
					margin-top: 0;
				}
			}

			.ssmb-reset-button {
				margin-top: -32px;
			}
		}
	}

	.ssmb-background-custom-image-control {
		.ssmb-custom-image {
			align-items: flex-start;
			
			.ssmb-reset-button {
				margin-top: -0;
			}
		}
	}

	/* Reset button */
	.ssmb-reset-all-shadow {
		text-align: right;

		.ssmb-reset-button {
			margin: 0;
		}
	}

	/* Range field */
	.ssmb-input-control {
		/* stylelint-disable-next-line property-no-vendor-prefix */
		-moz-appearance: textfield;

		/* stylelint-disable-next-line property-no-vendor-prefix */
		-webkit-appearance: none;
		appearance: none;
		border-color: #ccc;

		&:focus {
			outline: transparent solid 2px;
			outline-offset: -2px;
			box-shadow: none;
			border-color: #4F4ED7;
		}
	}

	/* For Chrome, Safari, Edge, and Opera */
	.ssmb-input-control::-webkit-inner-spin-button,
	.ssmb-input-control::-webkit-outer-spin-button {
		/* stylelint-disable-next-line property-no-vendor-prefix */
		-webkit-appearance: none;
		margin: 0;
	}

	/* For Firefox */
	.ssmb-input-control[type="number"] {
		/* stylelint-disable-next-line property-no-vendor-prefix */
		-moz-appearance: textfield;
	}

	/* Buttons */
	/* stylelint-disable-next-line selector-class-pattern */
	.components-base-control {
		.components-button {
			box-shadow: inset 0 0 0 1px #4F4ED7;
	
			&.is-pressed {
				background-color: #f0f8ff;
	
				&:hover {
					background-color: #f4f7fb;
				}
			}
	
			&.ssmb-preview-icon {
				background: #f0f8ff;
				border-radius: 4px;
				padding: 6px;
				height: 42px;

				.uploaded-svg {
					display: flex;
					align-items: center;
					justify-content: center;
				}

				svg {
					width: 32px;
					height: 32px;
				}
	
				&:hover {
					color: inherit;
					background-color: #f4f7fb;
				}
			}

			/* stylelint-disable-next-line selector-class-pattern */
			&.components-circular-option-picker__option {
				box-shadow: inset 0 0 0 14px;
			}

			&.ssmb-upload-button {
				box-shadow: none;
				margin-bottom: 10px;
			}
		}

		button.ssmb-reset-button {
			max-width: 24px;
			min-width: 24px;
			width: 24px;
			padding: 2px 0;
			margin-left: 4px;
			opacity: 0 ;
			box-shadow: none ;
	
			&.has-changed {
				opacity: 1;
			}
	
			svg {
				fill: coral;
			}
		}

		&.ssmb-button-link {
			.ssmb-control-wrapper {
				align-items: flex-start;

				.components-base-control {
					width: 100%;
				}

				.ssmb-reset-button {
					margin-top: -2px;
				}
			}
		}

		/* stylelint-disable-next-line selector-class-pattern */
		&.ssmb-button-linkRel {
			.ssmb-reset-button {
				margin-top: -35px;
			}
		}

		/* stylelint-disable-next-line selector-class-pattern */
		&.ssmb-button-linkTitle {
			.ssmb-reset-button {
				margin-top: -15px;
			}
		}

		&:not(div[class*="ssmb"]) {
			margin-bottom: 0;
		}
	}

	.ssmb-toggle-state-controls {
		display: flex;
		flex-wrap: nowrap;
		margin-bottom: calc(8px);
		width: 89%;

		.components-button {
			justify-content: center;
			height: 26px;
			width: 100%;
			margin: 0;
			box-shadow: inset 0 0 0 1px #4F4ED7;
	
			&.is-primary {
				background-color: #f0f8ff;
				color: #000;

				svg {
					path:last-child {
						fill: #f0f8ff;
					}
				}
	
				&:hover {
					background-color: #f4f7fb;
				}
			}

			&.is-secondary {
				color: #4F4ED7;
			}

			&:last-child {
				margin-left: -1px;
			}
		}
	}
}

/* Icon Picker */
.ssmb-icon-picker-popover {
	margin-top: 20px;

	.ssmb-icon-picker {
		width: 260px;
		padding: 8px;

		input {
			&:focus {
				border-color: #4f4ed7;
				box-shadow: 0 0 0 .5px #4f4ed7;
			}
		}
	}

	.ssmb-icon-list {
		/* stylelint-disable-next-line declaration-block-no-redundant-longhand-properties */
		display: flex;
		place-content: center flex-start;
		align-items: flex-start;
		flex-wrap: wrap;
		height: 200px;
		margin-top: 5px;
		overflow: auto;
	}

	.ssmb-icon-button {
		display: flex;
		align-items: center;
		justify-content: center;
		background: none;
		border-color: #0000;
		padding: 8px;
		height: 40px;
		width: 40px;
		border-radius: 4px;
		box-shadow: none;

		svg {
			width: 24px;
			height: 24px;
		}

		&:focus {
			box-shadow: none;
			border: 1px solid #4F4ED7;
		}
	}

	.ssmb-icon-button:hover {
		background-color: #f0f0f0;
	}

	.ssmb-icon-actions {
		display: flex;
		justify-content: space-between;
		margin-top: 10px;

		.components-button {
			width: 48%;
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 12px;
			font-weight: 500;
			color: #4f4ed7;
			border: 1px solid #4f4ed7;
			background: #f0f8ff;
			box-shadow: none;

			&:hover {
				box-shadow: none;
				background: #f4f7fb;
			}
		}

		input[type="file"] {
			display: none;
		}
	}
}

/* Responsive Toggle Buttons */
.ssmb-control-header {
	display: flex;
    align-items: center;
	margin-bottom: 5px;

	.ssmb-control-label {
		margin-right: 5px;
	}

	.ssmb-toggle-buttons-container {
		display: flex;
		align-items: center;
		position: relative;
	
		.components-button {
			cursor: pointer;
			width: 100%;
			min-width: 22px;
			max-width: 22px;
			height: 22px;
			padding: 2px;
			box-shadow: none;

			&:focus {
				box-shadow: inset 0 0 0 1px #4F4ED7;
			}
		}
	
		.ssmb-toggle-buttons-stack {
			position: absolute;
			display: flex;
			align-items: center;
			flex-direction: column;
			background: #fff;
			padding: 0 2px;
			left: 24px;
			border-radius: 2px;
			border: 1px solid #4F4ED7;
			z-index: 9;

			button {
				&:hover {
					background-color: #f0f8ff;
				}
			}
		}
	}
}

/* Toolbar */
.components-toolbar-group {
	.ssmb-disabled-icon {
		opacity: 0.4;
	}
}

.ssmb-url-input-popover {
	margin-top: 20px;

	/* stylelint-disable-next-line selector-class-pattern */
	.components-popover__content {
		width: fit-content;
		padding: 15px;

		.ssmb-url-input-wrapper {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;

			input {
				&:focus {
					border-color: #4f4ed7;
					box-shadow: 0 0 0 .5px #4f4ed7;
				}
			}

			.ssmb-apply-link-button {
				margin-top: 15px;
				margin-left: 4px;
				padding: 5px 15px;
				border-radius: 2px;
				font-size: 12px;
				font-weight: 500;
				color: #4f4ed7;
				border: 1px solid #4f4ed7;
				background: #f0f8ff;
				box-shadow: none;

				&:hover {
					box-shadow: none;
					background: #f4f7fb;
				}
			}
		}
	}
}