.burger {
	position: relative;

	display: none;
	visibility: hidden;

	cursor: pointer;
	transition: transform 0.2s ease-out 0.1s;
	will-change: transform;

	& .burger__line {
		display: block;

		width: 20px;
		height: 2px;
		margin: 5px 0;

		transition: transform 0.2s ease-out;

		opacity: 0.8;

		background-color: var(--rc-color-primary);
	}

	/* TODO: unread-burger-alert -> burger__unread-badge */
	& .unread-burger-alert {
		position: absolute;
		z-index: 3;
		bottom: 13px;
		left: 10px;

		min-width: 18px;
		height: 18px;
		padding: 0 4px;

		text-align: center;

		color: var(--rc-color-content);

		border-radius: 20px;
		background-color: var(--rc-color-error-light);

		font-size: 12px;
		font-weight: bold;
		line-height: 18px;
	}

	/* TODO: .menu-opened -> .burger--open */
	&.menu-opened .burger__line {
		&:nth-child(1),
		&:nth-child(3) {
			transform-origin: 50%, 50%, 0;

			opacity: 1;
		}

		&:nth-child(1) {
			transform: translate(-25%, 3px) rotate(-45deg) scale(0.5, 1);
		}

		&:nth-child(3) {
			transform: translate(-25%, -3px) rotate(45deg) scale(0.5, 1);
		}
	}

	.rtl & {
		right: 0;
		left: auto;

		margin-right: 7px;
		margin-left: auto;

		& .unread-burger-alert {
			right: auto;
			left: 4px;
		}

		&.menu-opened .burger__line {
			&:nth-child(1) {
				transform: translate(25%, 3px) rotate(45deg) scale(0.5, 1);
			}

			&:nth-child(3) {
				transform: translate(25%, -3px) rotate(-45deg) scale(0.5, 1);
			}
		}
	}
}

@media (max-width: 780px) {
	.burger {
		display: inline-block;
		visibility: visible;
	}
}