@import '../../../scss/index.scss';

$border-radius: 3px;
$list-padding: 4px;
$sqrt-2: 1.41421356;

// Контекстное меню
@mixin context-menu () {
	@include flex-col-auto();

	// Фикс
	&,
	& * {
		@include fix();
	}

	// Меню
	.menu {
		@include flex-col-auto();
		position: relative;
		border-radius: $border-radius;
		background: $menu-bg;
	}
	.menu__back {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: -1;
		box-shadow: 0 2px 4px 0 $shadow-color;
		border-radius: $border-radius;
	}
	.menu__arrow {
		position: absolute;
		width: var(--arrow-size);
		height: var(--arrow-size);
		z-index: -1;
		&:after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			background: $menu-bg;
			transform: scale($sqrt-2 / 2) rotate(45deg);
			box-shadow: 2px 2px 4px 0 $shadow-color;
		}
	}

	// Варианты отображения стрелки
	&[overlay-y='top'][origin-y='bottom'] {
		.list {
			padding-top: $list-padding;
		}
		.menu {
			margin-top: calc(var(--arrow-size) / 2);
		}
		.menu__arrow {
			top: calc(var(--arrow-size) / -2);
		}
	}
	&[overlay-y='bottom'][origin-y='top'] {
		.list {
			padding-bottom: $list-padding;
		}
		.menu {
			margin-bottom: calc(var(--arrow-size) / 2);
		}
		.menu__arrow {
			bottom: calc(var(--arrow-size) / -2);
		}
	}

	&[overlay-y='top'][origin-y='bottom'],
	&[overlay-y='bottom'][origin-y='top'] {
		&[overlay-x='start'] {
			.menu__arrow {
				left: var(--arrow-offset);
			}
		}
		&[overlay-x='center'] {
			.menu__arrow {
				left: calc(50% - var(--arrow-size) / 2);
			}
		}
		&[overlay-x='end'] {
			.menu__arrow {
				right: var(--arrow-offset);
			}
		}
	}

	&[overlay-x='start'][origin-x='end'] {
		.list {
			padding-left: $list-padding;
		}
		.menu {
			margin-left: calc(var(--arrow-size) / 2);
		}
		.menu__arrow {
			left: calc(var(--arrow-size) / -2);
		}
	}
	&[overlay-x='end'][origin-x='start'] {
		.list {
			padding-right: $list-padding;
		}
		.menu {
			margin-right: calc(var(--arrow-size) / 2);
		}
		.menu__arrow {
			right: calc(var(--arrow-size) / -2);
		}
	}

	&[overlay-x='start'][origin-x='end'],
	&[overlay-x='end'][origin-x='start'] {
		&[overlay-y='top'] {
			.menu__arrow {
				top: var(--arrow-offset);
			}
		}
		&[overlay-y='center'] {
			.menu__arrow {
				top: calc(50% - var(--arrow-size) / 2);
			}
		}
		&[overlay-y='bottom'] {
			.menu__arrow {
				bottom: var(--arrow-offset);
			}
		}
	}

	// Список
	.list {
		@include flex-col-auto();
		min-width: 200px;
		max-width: 300px;
		border-radius: $border-radius;
		overflow: hidden;
	}

	.item {
		@include flex-row-auto();
		align-items: center;
		height: 36px;
		background: $item-bg;
		transition: background 0.3s ease;

		&:not(:last-child) {
			border-bottom: solid 1px $border-color;
		}
		&,
		& * {
			cursor: pointer;
		}
		&:hover {
			background: $item-hover-bg;
		}
		&:active {
			background: $item-active-bg;
			.item__title {
				color: $item-active-color;
			}
		}
	}
	.item--remove {
		.item__title {
			color: $item-remove-color;
		}
	}
	.item__title {
		@include font-family();
		@include text-single-line();
		padding: 0 12px;
		font-size: 14px;
		user-select: none;
		color: $title-color;
		transition: color 0.3s ease;
	}
}