@import "~scss/_mixins";

.menus {

    /* Common */

    .menu { background: var(--color-bg-primary); box-shadow: 0px 4px 16px rgb(0 0 0 / 20%), 0px 0px 0px 1px var(--color-shape-primary) inset; }

    .menu {
        .icon.textParagraph { background-image: url('#{$themePath}/icon/menu/action/block/text/paragraph0.svg'); }
		
		.icon.textHeader1 { background-image: url('#{$themePath}/icon/menu/action/block/text/header10.svg'); }
		.icon.textHeader2 { background-image: url('#{$themePath}/icon/menu/action/block/text/header20.svg'); }
		.icon.textHeader3 { background-image: url('#{$themePath}/icon/menu/action/block/text/header30.svg'); }
		.icon.textQuote { background-image: url('#{$themePath}/icon/menu/action/block/text/quote0.svg'); }
		
        .icon.textBulleted { background-image: url('#{$themePath}/icon/menu/action/block/text/bulleted0.svg'); }
		.icon.textNumbered { background-image: url('#{$themePath}/icon/menu/action/block/text/numbered0.svg'); }
		.icon.textToggle { background-image: url('#{$themePath}/icon/menu/action/block/text/toggle0.svg'); }

        .icon.more { background-image: url('#{$themePath}/icon/menu/action/more0.svg'); }

        .icon.color {
            .inner.bgColor-default { background: transparent; }
        }

        .arrowDirection { background-image: url('#{$themePath}/arrow/menuDirection.svg'); }
    }

    /* Vertical */

    .menu.vertical {
        .titleWrapper {
            .icon.back { background-image: url('#{$themePath}/arrow/menu.svg'); }
        }

        .item { background: none; }
		.item::before { background: rgba(238, 238, 238, 0); }

        .item {
            .icon.arrow { background-image: url('#{$themePath}/arrow/menu.svg'); }
			.icon.chk { background-image: url('#{$themePath}/icon/menu/chk.svg'); }
			.icon.sortArrow { background-image: url('#{$themePath}/icon/menu/sortArrow.svg'); }
        }

        .loaderWrapper { background: var(--color-bg-secondary); }
    }

    /* BlockAdd */

    .menu.menuBlockAdd {
        .item.isBig {
            .icon.textParagraph { background-image: url('#{$themePath}/icon/menu/action/block/text/paragraph1.svg'); }
            
            .icon.textHeader1 { background-image: url('#{$themePath}/icon/menu/action/block/text/header11.svg'); }
            .icon.textHeader2 { background-image: url('#{$themePath}/icon/menu/action/block/text/header21.svg'); }
            .icon.textHeader3 { background-image: url('#{$themePath}/icon/menu/action/block/text/header31.svg'); }
            .icon.textQuote { background-image: url('#{$themePath}/icon/menu/action/block/text/quote1.svg'); }
            
            .icon.textBulleted { background-image: url('#{$themePath}/icon/menu/action/block/text/bulleted1.svg'); }
            .icon.textNumbered { background-image: url('#{$themePath}/icon/menu/action/block/text/numbered1.svg'); }
            .icon.textToggle { background-image: url('#{$themePath}/icon/menu/action/block/text/toggle1.svg'); }

			.icon.textCallout { background-image: url('#{$themePath}/icon/menu/action/block/text/callout1.svg'); }
        }
    }

	/* BlockBackground */

	.menu.menuBlockBackground.fromContext {
		.icon.color {
			.inner {
				&.bgColor-grey { background: #3c3c3c !important; }
				&.bgColor-yellow { background: #55500d !important; }
				&.bgColor-orange { background: #5f430a !important; }
				&.bgColor-red { background: #74321e !important; }
				&.bgColor-pink { background: #712055 !important; }
				&.bgColor-purple { background: #542663 !important; }
				&.bgColor-blue { background: #2b3368 !important; }
				&.bgColor-ice { background: #19465f !important; }
				&.bgColor-teal { background: #16534e !important; }
				&.bgColor-lime { background: #36551d !important; }
			}
		}
	}

    /* Smile */

    .menu.menuSmile {
		.body.tabSmile {
			.foot {
				.icon.recent.active { background-image: url('#{$themePath}/icon/emoji/recent1.svg'); }
				.icon.people.active { background-image: url('#{$themePath}/icon/emoji/people1.svg'); }
				.icon.nature.active { background-image: url('#{$themePath}/icon/emoji/nature1.svg'); }
				.icon.foods.active { background-image: url('#{$themePath}/icon/emoji/foods1.svg'); }
				.icon.activity.active { background-image: url('#{$themePath}/icon/emoji/activity1.svg'); }
				.icon.places.active { background-image: url('#{$themePath}/icon/emoji/places1.svg'); }
				.icon.objects.active { background-image: url('#{$themePath}/icon/emoji/objects1.svg'); }
				.icon.symbols.active { background-image: url('#{$themePath}/icon/emoji/symbols1.svg'); }
				.icon.flags.active { background-image: url('#{$themePath}/icon/emoji/flags1.svg'); }
			}
		}
    }

	/* BlockRelationEdit */

	.menu.menuBlockRelationEdit {
		.item:hover { background: var(--color-shape-highlight-medium); }
	}

	/* DataviewRelationEdit */

	.menu.menuDataviewRelationEdit {
		.item:hover { background: var(--color-shape-highlight-medium); }
	}

	/* DataviewFilterValues */

    .menu.menuDataviewFilterValues {
		.select {
            .icon.arrow { background-image: url('#{$themePath}/arrow/menu.svg') !important; }
        }
    }

	/* DataviewFileValues */

	.menu.menuDataviewFileValues {
		.item:hover::before { background: var(--color-shape-highlight-medium); }
    }

    /* Calendar */

    .menu.menuCalendar {
		.head {
			.side.right {
				.btn { background-image: url('#{$themePath}/arrow/calendarNav.svg'); }
			}
		}

        .select {
			.icon.arrow { background-image: url('#{$themePath}/arrow/select/big.svg'); }
		}
        .select:hover { background-color: var(--color-shape-highlight-medium); }
    }

    /* BlockContext */

    .menu.menuBlockContext {
        .icon.active.bold { background-image: url('#{$themePath}/icon/menu/action/mark/bold1.svg'); }
		.icon.active.kbd { background-image: url('#{$themePath}/icon/menu/action/mark/code1.svg'); }
		.icon.active.italic { background-image: url('#{$themePath}/icon/menu/action/mark/italic1.svg'); }
		.icon.active.link { background-image: url('#{$themePath}/icon/menu/action/mark/link1.svg'); }
		.icon.active.strike { background-image: url('#{$themePath}/icon/menu/action/mark/strike1.svg'); }
		.icon.active.underline { background-image: url('#{$themePath}/icon/menu/action/mark/underline1.svg'); }
    }

    /* BlockLinkSettings */

    .menu.menuBlockLinkSettings {
        .section.card {
            .item {
                .icon.style-text { background-image: url('#{$themePath}/icon/menu/linkSettings/text0.svg'); }
			    .icon.style-card { background-image: url('#{$themePath}/icon/menu/linkSettings/card0.svg'); }
            }

            .item:hover {
				.icon.style-text { background-image: url('#{$themePath}/icon/menu/linkSettings/text1.svg'); }		
				.icon.style-card { background-image: url('#{$themePath}/icon/menu/linkSettings/card1.svg'); }
			}

			.item.active {
				.icon.style-text { background-image: url('#{$themePath}/icon/menu/linkSettings/text2.svg'); }		
				.icon.style-card { background-image: url('#{$themePath}/icon/menu/linkSettings/card2.svg'); }
			}
        }
    }

    /* Onboarding */

	.menu.menuOnboarding { box-shadow: inset 0px 0px 0px 1px var(--color-shape-secondary); background: var(--color-shape-tertiary); }
	.menu.menuOnboarding {
		a { color: var(--color-bg-primary); }
		.highlight { color: var(--color-system-accent-100); }

        .icon.close:hover { background-image: url('#{$themePath}/icon/menu/onboarding/close1.svg'); }

        .bottom {
            .round {
                .icon.arrow { background-image: url('#{$themePath}/arrow/onboarding.svg'); }
                .icon.tick { background-image: url('#{$themePath}/icon/menu/onboarding/tick.svg'); }
            }

            .category { color: #5c5a54; }
        }
	}

	/* DataviewCreateBookmark */

	.menu.menuDataviewCreateBookmark {
		.loaderWrapper { background: rgba(39, 39, 35, 0.9); }
	}

    /* DataviewViewLayout */

    .menu.menuDataviewViewLayout {
        .layouts {
            .layout {
                .icon.view.c0 { background-image: url('#{$themePath}/icon/dataview/layout/grid0.svg'); }
                .icon.view.c1 { background-image: url('#{$themePath}/icon/dataview/layout/list0.svg'); }
                .icon.view.c2 { background-image: url('#{$themePath}/icon/dataview/layout/gallery0.svg'); }
                .icon.view.c3 { background-image: url('#{$themePath}/icon/dataview/layout/kanban0.svg'); }
				.icon.view.c4 { background-image: url('#{$themePath}/icon/dataview/layout/calendar0.svg'); }
            }
			.layout.active {
                .icon.view.c0 { background-image: url('#{$themePath}/icon/dataview/layout/grid1.svg'); }
                .icon.view.c1 { background-image: url('#{$themePath}/icon/dataview/layout/list1.svg'); }
                .icon.view.c2 { background-image: url('#{$themePath}/icon/dataview/layout/gallery1.svg'); }
                .icon.view.c3 { background-image: url('#{$themePath}/icon/dataview/layout/kanban1.svg'); }
				.icon.view.c4 { background-image: url('#{$themePath}/icon/dataview/layout/calendar1.svg'); }
            }

            .layout:not(.isReadonly):hover { background-color: rgba(238, 238, 238, 0.06); }
        }
    }

    /* DataviewTemplateList */

    .menu.menuDataviewTemplateList {
		.items {
			.item {
				.icon.more:hover { background-color: unset; }
			}
		}
    }
    .menu.menuDataviewTemplateList.objectCreate {
		.items {
			.item {
				.previewObject { box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.07); }
			}
		}
    }

    /* DataviewFilterList */

    .menu.menuDataviewFilterList {
        .item {
            .txt {
                .name::after { background-image: url('#{$themePath}/arrow/select/dark.svg'); }
            }
        }
    }

    /* DataviewSort */

    .menu.menuDataviewSort {
        .item {
            .txt {
                .label::after { background-image: url('#{$themePath}/arrow/select/dark.svg'); }
            }
        }
    }

    /* SyncStatus */

    .menu.menuSyncStatus {
        .icons {
            .iconWrapper.connected::before { background: #294b0e; }
            .iconWrapper.error::before { background: #581f0c; }
        }

		.incentiveBanner { background: linear-gradient(180deg, #74321e 30%, #9c492f 100%); }

		.items {
            .sides {
                .side.right {
                    .icon.syncing { background-image: url('#{$themePath}/icon/menu/syncStatus/loading.svg'); }
					.icon.more:hover { background-image: url('#{$themePath}/icon/menu/action/more1.svg'); }
                }
            }
		}
    }

	/* GraphSettings */

	.menu.menuGraphSettings {
		.input-drag-horizontal {
			.icon { background-color: var(--color-bg-secondary); }
		}
	}

    /* Widget */

	.menu.menuWidget {
		.options {
			.option {
				.icon.widget-0 { background-image: url('#{$themePath}/icon/menu/widget/link.svg'); }
				.icon.widget-1 { background-image: url('#{$themePath}/icon/menu/widget/tree.svg'); }
				.icon.widget-2 { background-image: url('#{$themePath}/icon/menu/widget/list.svg'); }
				.icon.widget-3 { background-image: url('#{$themePath}/icon/menu/widget/compact.svg'); }
				.icon.widget-4 { background-image: url('#{$themePath}/icon/menu/widget/view.svg'); }
			}
		}
	}

	/* Publish */

	.menu.menuPublish {
		.input.isReadonly { background: rgba(255, 255, 255, 0.03); }

		.incentiveBanner { background-color: rgba(55, 122, 255, 0.15); }
		.incentiveBanner {
			.button { color: var(--color-text-primary); }
		}

		.outer {
			.icon.space { background-image: url('#{$themePath}/icon/publish/member.svg'); }
			.icon.export { background-image: url('#{$themePath}/icon/publish/export.svg'); }
		}
	}

	/* Identity */

	.menu.menuIdentity {
		.content {
			.icon { background-image: url('#{$themePath}/icon/header/anyName.svg'); }
		}
	}

	/* Space Create */

	.menu.menuSelect.spaceCreate {
		.item {
			.icon.join { background-image: url('#{$themePath}/icon/menu/spaceCreate/join.svg'); }
		}
	}

	/* Invite Link */

	.menu.menuSelect.inviteLinkType {
		.item {
			.icon.editor { background-image: url('#{$themePath}/icon/menu/inviteLink/editor.svg'); }
			.icon.viewer { background-image: url('#{$themePath}/icon/menu/inviteLink/viewer.svg'); }
			.icon.manual { background-image: url('#{$themePath}/icon/menu/inviteLink/manual.svg'); }
			.icon.none { background-image: url('#{$themePath}/icon/menu/inviteLink/none.svg'); }
		}
	}
}
