@mixin select-logo {
	height: auto;
	width: auto;
	h1 {
		color: #939393;
		font-size: 16px;
		line-height: 22px;
		font-weight: 400;
		margin: 0 0 15px;
	}

	p {
		font-size: 14px;
		font-weight: 600;
		line-height: 19px;
		margin: 0 0 12px;
	}

	.size-range {
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 5px 0px;
		
		.slider {
			min-width: 230px;
			-webkit-appearance: none;  /* Override default CSS styles */
			appearance: none;
			width: 100%; /* Full-width */
			height: 15px; /* Specified height */
			background: #d3d3d3; /* Grey background */
			outline: none; /* Remove outline */
			opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */
			-webkit-transition: .2s; /* 0.2 seconds transition on hover */
			transition: opacity .2s;
			border-radius: 10px;
		}

		.slider:hover {
			opacity: 1;
		  }
		  
		  .slider::-webkit-slider-thumb {
			-webkit-appearance: none;
			appearance: none;
			width: 26px;
			height: 26px;
			background: #43C2D1;
			cursor: pointer;
			border-radius: 50%;
		  }
		  
		  .slider::-moz-range-thumb {
			width: 26px;
			height: 26px;
			background: #43C2D1;
			cursor: pointer;
			border-radius: 50%;
		  }

		label {
			font-family: 'Courier New', Courier, monospace;
			margin: 4px;
			padding: 5px 10px;
			background-color: #43C2D1;
			color: white;
			border-radius: 5px;
			text-align: center;
			font-size: 18px;
			line-height: 1;
			font-weight: 500;
		}
	}

	.logo-list {
		//max-height: 690px;
		max-height: 200px;
		overflow-y: scroll;
		border: 1px solid #E7E7E7;
		border-radius: 14px;
		padding: 15px;
		scrollbar-width: thin;
		display: flex;
		flex-wrap: wrap;
		
		button {
			flex-grow: 1;
			background: transparent;
			border: none;
			padding: 5px;
			color: black;
			&:focus {
				outline: none;
			}
			svg {
				border: 2px solid #F1F1F1;
				padding: 10px;
				background: transparent;
				border-radius: 20px;
				transition: .3s ease all;
				&:hover,

				&.active {
					border: 2px solid #43C2D1;
				}
			}
		}

		@media(min-width: 1024px) {
			max-height: 596px;

			.size-range {
				display: flex;
				justify-content: inherit;
			}
		}
	}
}
