@use "../common.scss" as default;
@import "../constants";

.logo-showcase {
    &.logo-maker-container {
		@include default.logo-maker-container;
	}
    .top-section {
		@include default.top-section;
    }
    .content-section {
        @include default.content-section-titles;
		.content {
			margin: 50px auto 100px;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			.logos-container {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;

				.content-loader {
					border: 16px solid #f3f3f3;
					border-radius: 50%;
					border-top: 16px solid #3498db;
					border-bottom: 16px solid #3498db;
					width: 120px;
					height: 120px;
					-webkit-animation: spin 2s linear infinite; /* Safari */
					animation: spin 2s linear infinite;
				}

				/* Safari */
				@-webkit-keyframes spin {
					0% { -webkit-transform: rotate(0deg); }
					100% { -webkit-transform: rotate(360deg); }
				}
				
				@keyframes spin {
					0% { transform: rotate(0deg); }
					100% { transform: rotate(360deg); }
				}

				.logo {
					padding: 0;
					margin: 10px;
					border: none;
					background: transparent;
					transition: all .2s ease-in-out;
					.logo-svg {
						border-radius: 10px;
						border: 4px solid transparent;

						@media (max-width: 600px) {
							border-radius: 1.8px;
						}

						&.active,
						&:hover {
							border-color: $light-blue;
						}
					}
					&:focus {
						outline: none;
					}
					&.active,
					&:hover {
						transform: scale(1.03);
					}
				}
			}
		}
    }
	.next {
		@include default.next;
		position: fixed;
		bottom: 0;
		width: 100%;
		left: 0;
		background: #fff;
		padding: 25px 0;
		z-index: 100;
		@media (max-width: 600px) {
			padding: 25px 30px;
		}
	}
}

@media (max-width: 811px) {
	.logo-showcase .content-section .content .logos-container .logo svg  {
		max-width: 250px;
		height: auto;
	}
}

@media (max-width: 600px) {
	.logo-showcase .content-section .content {
		margin-top: 20px;
		.logos-container .logo {
			margin: 5px;
			svg {
				max-width: 200px;
				height: auto;
			}
		}
	}
}

@media (max-width: 480px) {
	.logo-showcase .content-section .content .logos-container .logo svg  {
		max-width: 300px;
		height: auto;
	}
}
