.gkit-popup{
	&-toggle{
		.components-base-control__field{
			justify-content: space-between;
		}
		&-button{
			border: 1px solid #ebebeb;
			border-radius: 50%;
			transition: all .3s;
			height: 25px;
			min-width: 25px !important;
			margin-left: auto;
			svg{
				color: #1d2327;
				width: 20px;
			}

			&--active {
				border-color: $primary-color;
				svg{
					color: $primary-color;
				}
			}

			&:not(.gkit-popup-toggle-button-reset) {
				padding: 0 !important;
			}

			&:hover{
				border-color: $primary-color;

				svg{
					color: $primary-color;
				}
			}

			&:focus:not(:disabled){
				box-shadow: none;
				outline: none;
			}

			&:focus-visible{
				outline: none;
				box-shadow: none;

			}

			&-open{
				border-color: $primary-color;
				svg{
					color: $primary-color;
				}
			}

			&-reset{
				border: none;

				svg{
					width: 16px;
				}
			}
		}
	}

	&-content{
		position: relative;
		background-color: #fff;
		border: 1px solid #ebebeb;
		border-radius: 4px;
		box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
		padding: 20px;
		max-width: 500px;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		margin: 10px auto;
		&::-webkit-scrollbar{
			width: 8px;
			height: 8px;
			background-color: #f5f5f5;
			border-radius: 4px;
		}

		.gutenkit-range{
			.components-base-control__field{
				margin-bottom: 0;
			}
		}
	}
}