@import (reference) '~jodit/src/styles/variables';
@import (reference) '~jodit/src/styles/mixins';

.jodit-ui-sidebar {
	position: relative;
	display: flex;
	width: 200px;
	min-width: 200px;
	height: 100%;
	min-height: 200px;

	flex-direction: column;
	flex-shrink: 0;

	&__box {
		overflow: auto;
		max-height: 100%;

		.scrollbarSlim();
	}

	@media (max-width: @screen-xs) {
		width: 100%;
		height: 200px;
	}

	border-right: 1px solid var(--sidebar-border-color);
	background-color: var(--sidebar-bg);

	&__hide-btn {
		position: absolute;
		z-index: 1;
		right: 0;

		@media (max-width: @screen-xs) {
			right: auto;
			bottom: 2px;
			left: 2px;
			transform: rotate(90deg);
		}

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

		padding: 0;

		background: var(--sidebar-hide-btn-bg);
		border-radius: 0;
		cursor: w-resize;

		svg {
			width: var(--icon-size);
			height: var(--icon-size);
			fill: var(--color-border-dark);
		}
	}

	&_theme_dark &__hide-btn {
		svg {
			fill: var(--color-white);
		}
	}

	&_hidden_true {
		width: 0 !important;
		min-width: auto;
		height: 0 !important;
		min-height: auto;
	}

	&_hidden_true &__box {
		display: none;
	}

	&_hidden_true &__hide-btn {
		right: calc(-1 * var(--icon-size));
		cursor: e-resize;
		transform: rotate(180deg);

		@media (max-width: @screen-xs) {
			bottom: calc(-1 * var(--icon-size));
			transform: rotate(-90deg);
		}
	}

	&__favorites {
		display: flex;
		align-items: center;
		padding: calc(var(--padding-default)) calc(var(--padding-default) * 1.5);
		color: var(--sidebar-color);
		cursor: pointer;

		svg {
			margin-right: calc(var(--padding-default) / 2);
			fill: currentColor;
			.size(var(--fb-icon-size));
		}
	}

	&_show-favorites_false &__favorites,
	&_has-favorites_false &__favorites {
		display: none;
	}
}