@import "~scss/_mixins";

.icon { 
	display: inline-block; vertical-align: middle; background-size: 100% 100%; background-repeat: no-repeat;
	background-position: center center; transition: $transitionAllCommon; position: relative;
}
.icon.withBackground { width: 28px !important; height: 28px !important; background-size: 20px !important; border-radius: 6px; }
.icon.withBackground { 
	&:hover, &.hover { background-color: var(--color-shape-highlight-medium) !important; }
};

.arrow { background-position: center center; transition: $transitionAllCommon; background-repeat: no-repeat; background-size: 100% 100%; }

.icon.back, .icon.forward { background-image: url('~img/icon/back.svg'); }
.icon.forward { transform: rotateZ(180deg); }

.icon.lock { width: 8px !important; height: 20px !important; background-image: url('~img/icon/lock.svg'); }

.icon.checkbox { width: 24px; height: 24px; background-image: url('~img/icon/checkbox0.svg'); }
.icon.checkbox.active { background-image: url('~img/icon/checkbox1.svg'); }

.icon.tex { width: 32px; height: 16px; background-image: url('~img/icon/tex.svg'); }
.icon.ghost { background-image: url('~img/icon/ghost.svg'); }

.icon.relation.default { background-image: url('~img/icon/menu/action/block/relation0.svg'); }
.icon.relation.c-longText { background-image: url('~img/icon/relation/longText.svg'); }
.icon.relation.c-shortText { background-image: url('~img/icon/relation/shortText.svg'); }
.icon.relation.c-number { background-image: url('~img/icon/relation/number.svg'); }
.icon.relation.c-date { background-image: url('~img/icon/relation/date.svg'); }
.icon.relation.c-select.isMultiSelect { background-image: url('~img/icon/relation/multiSelect.svg'); }
.icon.relation.c-select.isSelect { background-image: url('~img/icon/relation/select.svg'); }
.icon.relation.c-object { background-image: url('~img/icon/relation/object.svg'); }
.icon.relation.c-file { background-image: url('~img/icon/relation/file.svg'); }
.icon.relation.c-checkbox { background-image: url('~img/icon/relation/checkbox.svg'); }
.icon.relation.c-url { background-image: url('~img/icon/relation/url.svg'); }
.icon.relation.c-email { background-image: url('~img/icon/relation/email.svg'); }
.icon.relation.c-phone { background-image: url('~img/icon/relation/phone.svg'); }

.icon.layout.c-page { background-image: url('~img/icon/object/page.svg'); }
.icon.layout.c-human { background-image: url('~img/icon/object/human.svg'); }
.icon.layout.c-task { background-image: url('~img/icon/object/task.svg'); }
.icon.layout.c-set { background-image: url('~img/icon/object/set.svg'); }
.icon.layout.c-file { background-image: url('~img/icon/object/file.svg'); }
.icon.layout.c-image { background-image: url('~img/icon/object/image.svg'); }
.icon.layout.c-type { background-image: url('~img/icon/object/type.svg'); }
.icon.layout.c-relation { background-image: url('~img/icon/object/relation.svg'); }
.icon.layout.c-note { background-image: url('~img/icon/object/note.svg'); }

.icon.settings-personal { background-image: url('~img/icon/settings/personal.svg'); }
.icon.settings-storage { background-image: url('~img/icon/settings/storage.svg'); }
.icon.settings-phrase { background-image: url('~img/icon/settings/phrase.svg'); }
.icon.settings-pin { background-image: url('~img/icon/settings/pin.svg'); }
.icon.settings-spaces { background-image: url('~img/icon/settings/spaces.svg'); }
.icon.settings-membership { background-image: url('~img/icon/settings/membership.svg'); }
.icon.settings-language { background-image: url('~img/icon/settings/language.svg'); }

.icon.settings-space { background-image: url('~img/icon/settings/space/overview.svg'); }
.icon.settings-members { background-image: url('~img/icon/settings/space/members.svg'); }
.icon.settings-import { background-image: url('~img/icon/settings/space/import.svg'); }
.icon.settings-export { background-image: url('~img/icon/settings/space/export.svg'); }

.icon.settings-logout { background-image: url('~img/icon/popup/settings/logout.svg'); }

.icon.import-notion { background-image: url('~img/icon/import/notion.svg'); }
.icon.import-markdown { background-image: url('~img/icon/import/markdown.svg'); }
.icon.import-html { background-image: url('~img/icon/import/html.svg'); }
.icon.import-text { background-image: url('~img/icon/import/text.svg'); }
.icon.import-csv { background-image: url('~img/icon/import/csv.svg'); }
.icon.import-protobuf { background-image: url('~img/icon/import/protobuf.svg'); }
