#elementor-icons-manager {

	&-modal {

		.dialog-message {
			padding: 0;
			height: 700px;
		}

		.dialog-content {
			display: flex;
		}
	}

	&__wrapper {
		display: flex;
	}

	&__sidebar {

		@media (max-width: $editor-screen-xs-max) {
			display: none;
		}
	}

	&__tab-links {
		margin-block-start: 30px;
	}

	&__upload {
		margin: 20px 45px;
		padding-block-start: 35px;
		border-block-start: var(--e-a-border);
		display: flex;
		align-items: center;
		justify-content: space-between;

		@media (max-width: $editor-screen-lg-max) {
			margin: 20px 25px;
		}
	}

	&__main {
		display: flex;
		flex-direction: column;
		padding: 30px 80px 0;

		@media (max-width: $editor-screen-lg-max) {
			padding: 30px 50px 0;
		}

		@media (max-width: $editor-screen-xs-max) {
			width: 100%;
		}
	}

	&__search {
		position: relative;

		input {
			padding: 8px 15px;
			background-color: transparent;
		}

		i {
			position: absolute;
			inset-block-start: 50%;
			inset-inline-end: 15px;
			transform: translateY(-50%);
		}
	}

	&__tab {

		&__wrapper {
			overflow: auto;
			margin: 25px -15px 0;
			padding: 0 15px 15px;
		}

		&__title {
			color: var(--e-a-color-txt);
			font-size: 16px;
			font-weight: 500;
			text-align: start;

			@media (max-width: $editor-screen-xs-max) {
				display: none;
			}
		}

		&__content {
			display: grid;
			grid-template-columns: repeat(7, 1fr);
			grid-gap: 20px;
			margin: 20px 0;

			@media (max-width: $editor-screen-lg-max) {
				grid-template-columns: repeat(6, 1fr);
			}

			@media (max-width: $editor-screen-md-max) {
				grid-template-columns: repeat(5, 1fr);

			}

			@media (max-width: $editor-screen-sm-max) {
				grid-template-columns: repeat(4, 1fr);
			}

			@media (max-width: $editor-screen-xs-max) {
				grid-template-columns: repeat(3, 1fr);
			}
		}
	}

	&__promotion {
		display: flex;
		align-items: center;
		flex-direction: column;
		padding-block-start: 70px;

		&__icon {
			font-size: 60px;
		}

		&__text {
			width: 300px;
			font-size: 16px;
			padding-block-start: 25px;
		}

		&__link {
			margin-block-start: 20px;
		}
	}
}

.elementor-icons-manager {

	&__tab-link {
		padding-block: 15px;
		padding-inline: 45px 0;
		font-size: 12px;
		text-align: start;
		cursor: pointer;
		position: relative;

		i {
			font-size: 20px;
			padding-inline-end: 15px;
		}

		@media (max-width: $editor-screen-md-max) {

			i {
				display: none;
			}
		}

		&:hover {
			background-color: var(--e-a-bg-hover);
		}

		&.elementor-active {
			background-color: var(--e-a-bg-active);
			color: var(--e-a-color-txt-accent);

			&:after {
				content: '';
				position: absolute;
				height: 100%;
				width: 3px;
				inset-block-start: 0;
				inset-inline-start: 0;
				background-color: var(--e-a-border-color-accent);
			}
		}
	}

	&__tab__item {
		position: relative;
		height: 0;
		padding-block-end: 100%;
		border: var(--e-a-border);
		border-radius: 3px;
		cursor: pointer;
		transition: var(--e-a-transition-hover);
		overflow: hidden;

		&:hover {
			background-color: var(--e-a-bg-hover);
		}

		&.elementor-selected {
			background-color: var(--e-a-bg-active);
			border-color: var(--e-a-border-color-accent);
			color: var(--e-a-color-txt-accent);
		}

		&__content {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			@include absolute-center;
			padding: 1px;
		}

		&__icon {
			font-size: 25px;
		}

		&__name {
			font-size: 11px;
			padding: 13px 20px 0;
			max-width: 100%;
			@include ellipsis;
		}
	}
}
