@import (reference) '../../../styles/variables';
@import (reference) '../../../styles/mixins';
@import (reference) 'jodit/core/ui/button/button/button';

.trigger-size(@size) {
	width: @size;

	svg {
		width: @size - 4px;
	}
}

.jodit-toolbar-button {
	display: flex;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	border: 1px solid transparent;
	border-radius: var(--border-radius-default);

	.jodit-ui-button-icon-text();
	.jodit-ui-button-sizes();

	&__icon:empty + &__text:not(:empty) {
		padding: 0;
	}

	&__button {
		.jodit-ui-button-interaction();
		.jodit-ui-button_clear();
		.jodit-ui-button-style();
	}

	&__trigger-arrow {
		display: flex;
		height: 100%;
		align-items: center;
	}

	&__trigger {
		display: flex;
		height: 100%;
		align-items: center;
		justify-content: center;
		border-radius: 0 var(--border-radius-default)
			var(--border-radius-default) 0;
		opacity: 0.4;

		.jodit-ui-button-interaction();
		.trigger-size(@icon-middle-size);
	}

	&_size_tiny &__trigger {
		.trigger-size(@icon-tiny-size);
	}

	&_size_xsmall &__trigger {
		.trigger-size(@icon-xsmall-size);
	}

	&_size_small &__trigger {
		.trigger-size(@icon-small-size);
	}

	&_size_large &__trigger {
		.trigger-size(@icon-large-size);
	}

	&_with-trigger_true {
		.jodit-toolbar-button__button {
			border-radius: var(--border-radius-default) 0 0
				var(--border-radius-default);
		}

		&:hover:not([disabled]) {
			border-color: var(--color-border);
		}
	}

	&_stroke_false svg {
		stroke: none;
	}
}

.button-media-size(@size) {
	@plus: (@size * 1.4);
	min-width: @size + @plus;
	height: @size * 2;

	button {
		min-width: @size + @plus;
		height: @size * 2;
	}

	.jodit-icon {
		width: @size;
		height: @size;
	}

	&__text {
		margin-top: @size * 0.05;
	}
}

.jodit-media-button-sizes {
	.button-media-size(@icon-media-middle-size);

	&_size {
		&_tiny {
			.button-media-size(@icon-media-tiny-size);
		}

		&_xsmall {
			.button-media-size(@icon-media-xsmall-size);
		}

		&_small {
			.button-media-size(@icon-media-small-size);
		}

		&_large {
			.button-media-size(@icon-media-large-size);
		}
	}
}

.jodit-media-toolbar {
	.jodit-toolbar-button {
		// ui/button.less function
		.jodit-media-button-sizes();

		&__button {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}

		&__text {
			margin-left: 0 !important;
			flex-grow: 0;
		}
	}
}