@use 'sass:meta';
@use '../../../node_modules/sass-basis/src/css/core';
@use '../../css/core/variable/variable' as *;

.editor-styles-wrapper,
.customize-control-sidebar_block_editor {
	@include meta.load-css('app');

	.sme-br {
		&::before {
			content: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.21154 11.9216V10.6731L12.2308 10.6731C13.0698 10.6731 13.75 9.99289 13.75 9.15385V3.76923C13.75 2.93018 13.0698 2.25 12.2308 2.25C11.3917 2.25 10.7115 2.93018 10.7115 3.76923V7.63461L7.21154 7.63461V6.3861V4.82615L5.99317 5.80032L2.53163 8.56807L1.79902 9.15385L2.53163 9.73962L5.99317 12.5074L7.21154 13.4815V11.9216Z" fill="#{ $color-accent }" stroke="#fff" stroke-width="1.5"/></svg>');
			position: absolute;
			line-height: 0;
			top: calc(50% - 6px);
			transition: opacity .2s;
		}

		@include core.media-min(lg) {
			&--disable\:desktop::before {
				opacity: 0;
			}

			&--disable\:desktop:hover::before,
			&--disable\:desktop[data-rich-text-format-boundary="true"]::before {
				opacity: 1;
			}
		}

		@include core.media-only(md) {
			&--disable\:tablet::before {
				opacity: 0;
			}

			&--disable\:tablet:hover::before,
			&--disable\:tablet[data-rich-text-format-boundary="true"]::before {
				opacity: 1;
			}
		}

		@include core.media-max(sm) {
			&--disable\:mobile::before {
				opacity: 0;
			}

			&--disable\:mobile:hover::before,
			&--disable\:mobile[data-rich-text-format-boundary="true"]::before {
				opacity: 1;
			}
		}
	}
}