@import "~scss/_mixins";

.iconObject { display: inline-block; vertical-align: top; position: relative; width: 20px; height: 20px; }
.iconObject {
	img { pointer-events: none; }

	.iconEmoji, .iconImage, .iconFile, .iconCheckbox { width: inherit; height: inherit; transition: none; vertical-align: top; }
	.iconImage, .iconCheckbox { background-size: cover; object-fit: cover; }
	.iconImage { border-radius: inherit; }

	.iconCommon, .smileImage, .iconImage, .iconFile, .iconCheckbox, .iconError {
		&.c14 { @include pos-abs-mid; width: 14px; height: 14px; margin: -7px 0px 0px -7px; }
		&.c16 { @include pos-abs-mid; width: 16px; height: 16px; margin: -8px 0px 0px -8px; }
		&.c18 { @include pos-abs-mid; width: 18px; height: 18px; margin: -9px 0px 0px -9px; }
		&.c20 { @include pos-abs-mid; width: 20px; height: 20px; margin: -10px 0px 0px -10px; }
		&.c22 { @include pos-abs-mid; width: 22px; height: 22px; margin: -11px 0px 0px -11px; }
		&.c24 { @include pos-abs-mid; width: 24px; height: 24px; margin: -12px 0px 0px -12px; }
		&.c26 { @include pos-abs-mid; width: 26px; height: 26px; margin: -13px 0px 0px -13px; }
		&.c28 { @include pos-abs-mid; width: 28px; height: 28px; margin: -14px 0px 0px -14px; }
		&.c30 { @include pos-abs-mid; width: 30px; height: 30px; margin: -15px 0px 0px -15px; }
		&.c32 { @include pos-abs-mid; width: 32px; height: 32px; margin: -16px 0px 0px -16px; }
		&.c36 { @include pos-abs-mid; width: 36px; height: 36px; margin: -18px 0px 0px -18px; }
		&.c40 { @include pos-abs-mid; width: 40px; height: 40px; margin: -20px 0px 0px -20px; }
		&.c48 { @include pos-abs-mid; width: 48px; height: 48px; margin: -24px 0px 0px -24px; }
		&.c56 { @include pos-abs-mid; width: 56px; height: 56px; margin: -28px 0px 0px -28px; }
		&.c64 { @include pos-abs-mid; width: 64px; height: 64px; margin: -32px 0px 0px -32px; }
	}

	.iconCommon.c14, .smileImage.c14, .iconImage.c14, .iconFile.c14, .iconCheckbox.c14 { @include pos-abs-mid; width: 14px; height: 14px; margin: -7px 0px 0px -7px; }
	.iconCommon.c16, .smileImage.c16, .iconImage.c16, .iconFile.c16, .iconCheckbox.c16 { @include pos-abs-mid; width: 16px; height: 16px; margin: -8px 0px 0px -8px; }
	.iconCommon.c18, .smileImage.c18, .iconImage.c18, .iconFile.c18, .iconCheckbox.c18 { @include pos-abs-mid; width: 18px; height: 18px; margin: -9px 0px 0px -9px; }
	.iconCommon.c20, .smileImage.c20, .iconImage.c20, .iconFile.c20, .iconCheckbox.c20 { @include pos-abs-mid; width: 20px; height: 20px; margin: -10px 0px 0px -10px; }
	.iconCommon.c22, .smileImage.c22, .iconImage.c22, .iconFile.c22, .iconCheckbox.c22 { @include pos-abs-mid; width: 22px; height: 22px; margin: -11px 0px 0px -11px; }
	.iconCommon.c24, .smileImage.c24, .iconImage.c24, .iconFile.c24, .iconCheckbox.c24 { @include pos-abs-mid; width: 24px; height: 24px; margin: -12px 0px 0px -12px; }
	.iconCommon.c26, .smileImage.c26, .iconImage.c26, .iconFile.c26, .iconCheckbox.c26 { @include pos-abs-mid; width: 26px; height: 26px; margin: -13px 0px 0px -13px; }
	.iconCommon.c28, .smileImage.c28, .iconImage.c28, .iconFile.c28, .iconCheckbox.c28 { @include pos-abs-mid; width: 28px; height: 28px; margin: -14px 0px 0px -14px; }
	.iconCommon.c30, .smileImage.c30, .iconImage.c30, .iconFile.c30, .iconCheckbox.c30 { @include pos-abs-mid; width: 30px; height: 30px; margin: -15px 0px 0px -15px; }
	.iconCommon.c32, .smileImage.c32, .iconImage.c32, .iconFile.c32, .iconCheckbox.c32 { @include pos-abs-mid; width: 32px; height: 32px; margin: -16px 0px 0px -16px; }
	.iconCommon.c36, .smileImage.c36, .iconImage.c36, .iconFile.c36, .iconCheckbox.c36 { @include pos-abs-mid; width: 36px; height: 36px; margin: -18px 0px 0px -18px; }
	.iconCommon.c40, .smileImage.c40, .iconImage.c40, .iconFile.c40, .iconCheckbox.c40 { @include pos-abs-mid; width: 40px; height: 40px; margin: -20px 0px 0px -20px; }
	.iconCommon.c48, .smileImage.c48, .iconImage.c48, .iconFile.c48, .iconCheckbox.c48 { @include pos-abs-mid; width: 48px; height: 48px; margin: -24px 0px 0px -24px; }
	.iconCommon.c56, .smileImage.c56, .iconImage.c56, .iconFile.c56, .iconCheckbox.c56 { @include pos-abs-mid; width: 56px; height: 56px; margin: -28px 0px 0px -28px; }
	.iconCommon.c64, .smileImage.c64, .iconImage.c64, .iconFile.c64, .iconCheckbox.c64 { @include pos-abs-mid; width: 64px; height: 64px; margin: -32px 0px 0px -32px; }

	.iconEmoji { display: inline-block; vertical-align: top; text-align: center; position: relative; border-radius: inherit; }
}
.iconObject.c14 { width: 14px; height: 14px; }
.iconObject.c16 { width: 16px; height: 16px; }
.iconObject.c18 { width: 18px; height: 18px; }
.iconObject.c22 { width: 22px; height: 22px; }
.iconObject.c24 { width: 24px; height: 24px; }
.iconObject.c26 { width: 26px; height: 26px; }
.iconObject.c28 { width: 28px; height: 28px; }
.iconObject.c30 { width: 30px; height: 30px; }
.iconObject.c32 { width: 32px; height: 32px; }
.iconObject.c36 { width: 36px; height: 36px; }
.iconObject.c40 { width: 40px; height: 40px; }
.iconObject.c42 { width: 42px; height: 42px; }
.iconObject.c44 { width: 44px; height: 44px; }
.iconObject.c48 { width: 48px; height: 48px; }
.iconObject.c56 { width: 56px; height: 56px; }
.iconObject.c64 { width: 64px; height: 64px; }
.iconObject.c80 { width: 80px; height: 80px; }
.iconObject.c96 { width: 96px; height: 96px; }
.iconObject.c108 { width: 108px; height: 108px; }
.iconObject.c112 { width: 112px; height: 112px; }
.iconObject.c128 { width: 128px; height: 128px; }
.iconObject.c160 { width: 160px; height: 160px; }

.iconObject.c48,
.iconObject.c56,
.iconObject.c64,
.iconObject.c80,
.iconObject.c96,
.iconObject.c108,
.iconObject.c112,
.iconObject.c128
.iconObject.c160 {
	display: block; overflow: hidden; background-color: var(--color-shape-tertiary);
}
.iconObject.isTask { background-color: unset; }

.iconObject.c14,
.iconObject.c16,
.iconObject.c18,
.iconObject.c20 {
	border-radius: 2px;
}

.iconObject.c22,
.iconObject.c24,
.iconObject.c25 {
	border-radius: 3px;
}

.iconObject.c28,
.iconObject.c30,
.iconObject.c32,
.iconObject.c36 {
	border-radius: 4px;
}

.iconObject.c40,
.iconObject.c42 {
	border-radius: 5px;
}

.iconObject.c44,
.iconObject.c48 {
	border-radius: 6px;
}

.iconObject.c56,
.iconObject.c64,
.iconObject.c80 {
	border-radius: 8px;
}

.iconObject.c96,
.iconObject.c108,
.iconObject.c112,
.iconObject.c128,
.iconObject.c160 {
	border-radius: 12px;

	&.isChat { border-radius: 100% !important; }	
}

.iconObject.c36, 
.iconObject.c40,
.iconObject.c48,
.iconObject.c56,
.iconObject.c64,
.iconObject.c80,
.iconObject.c96,
.iconObject.c108,
.iconObject.c112,
.iconObject.c128
.iconObject.c160 {
	.iconImage { width: 100%; height: 100%; left: 0px; top: 0px; margin: 0px; }

	&.isChat { border-radius: 100% !important; background-color: var(--color-shape-tertiary); }
}

.iconObject.isFile,
.iconObject.isImage {
	background-color: unset;
}

.iconObject.withImage { background-color: unset !important; }

.iconObject.isHuman, 
.iconObject.isParticipant, 
.iconObject.isSpaceView.uxType3 { border-radius: 100% !important; background-color: var(--color-shape-tertiary); }

.iconObject.withImageError {
	img:not(.iconError) { display: none; }
}