@import "~scss/_mixins";

.menus {
	.menu.menuSearchText { width: var(--menu-width-large); height: 44px; padding: 0px; position: fixed; top: 42px; }
	.menu.menuSearchText {
		.content { height: 100%; display: block; }
		.flex { width: 100%; flex-direction: row; align-items: center; padding: 0px 0px 0px 8px; }
		.input { height: 100%; padding: 13.5px 0px 13.5px 6px; flex-grow: 1; width: 100%; }
		.icon.search { flex-shrink: 0; margin: 0px; }

		.buttons { 
			flex-shrink: 0; color: var(--color-control-active); font-weight: 500; user-select: none; display: flex; gap: 0px 12px; height: 100%; 
			align-items: center; padding: 0px 12px;
		}
		.buttons {
			.switcher { display: none; flex-direction: row; align-items: center; gap: 0px 4px; }
			.switcher.active { display: flex; }

			.line { height: 20px; width: 1px; background: var(--color-shape-primary); }

			.icon.arrow { 
				width: 24px; height: 24px; border-radius: 4px; transition: $transitionAllCommon; margin: 0px; 	
				background-image: url('~img/arrow/search.svg'); transform: rotateZ(90deg);
			}
			.icon.arrow.right { transform: rotateZ(270deg); }
			.icon.arrow:hover { background-color: var(--color-shape-highlight-medium); }

			.icon.clear { width: 20px; height: 20px; background-image: url('~img/icon/clear0.svg') !important; }
			.icon.clear:hover { background-image: url('~img/icon/clear1.svg') !important; }
		}
	}
}