@import (reference) '../../styles/variables';

:root {
	--color-new-line: var(--color-border);
	--width-icon: 30px;
	--height-icon: 30px;
	--offset-handle: calc(100% - var(--width-icon));
}

.jodit-add-new-line {
	position: fixed;
	z-index: 1;
	top: 0;

	display: block;
	height: 1px;

	box-sizing: border-box;
	outline: none;

	* {
		box-sizing: border-box;
	}

	&::after {
		display: block;
		width: 100%;
		height: 1px;
		background-color: var(--color-new-line);
		content: '';
	}

	span {
		position: absolute;
		left: var(--offset-handle);

		display: flex;
		width: var(--width-icon);
		height: var(--height-icon);
		align-items: center;
		justify-content: center;

		border: 1px solid var(--color-new-line);
		background: var(--color-background-button-hover-opacity30);
		cursor: pointer;

		&:hover {
			background: var(--color-background-button-hover);
		}
	}

	&_after span {
		bottom: 0;
	}

	svg {
		width: 16px;
		fill: var(--color-new-line);
	}
}

.jodit-source__mode {
	.jodit-add-new-line {
		display: none !important;
	}
}