@use 'colors' as *;
@use 'mixins' as *;
@use '../base/merlin' as *;

.primary-color {
	color: var(--primary-color);
}

.secondary-color {
	color: var(--secondary-color);
}

.scroll-hidden {
	scrollbar-width: none;
	/* Firefox */
	-ms-overflow-style: none;

	/* IE 10+ */
	&::-webkit-scrollbar {
		width: 0;
		/* Tamaño del scroll en vertical */
		height: 0;
		/* Tamaño del scroll en horizontal */
	}
}

.arrows-clean {
	padding: 0;
	width: 50px;
	height: 50px;
	color: #FFF;
	background-color: transparent;

	&:before {
		@extend .font-27;
	}

	&.slick-disabled {
		cursor: inherit;
		pointer-events: none;
		opacity: 0;
	}

	&:hover {
		background-color: transparent;
	}
}

.image-cover {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	@extend .transition;
}

.flex-column-3 {
	display: flex;
	flex-wrap: wrap;

	&>div {
		flex: 0 0 calc(33% - 30px);

		@include bp-down(xl) {
			flex: 0 0 calc(50% - 30px);
		}
		@include bp-down(lg) {
			flex: 0 0 100%;
		}
	}
}

.image-before-veil {
	@extend .relative;

	&:before {
		content: "";
		position: absolute;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 50%;
		background: linear-gradient(to top, rgba($black, .8), transparent);
		z-index: 1;
	}
}

.image-content {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center center;
	padding: 8px;
	@extend .transition;
}

.justify-self-start {
	justify-self: flex-start;
}

.img-fluid {
	max-width: 100%;
	height: auto;
}

.d-flex {
	display: flex;
}

.slider-controls {
	$root: '.controls';
	display: flex;
	gap: 1rem;

	button {
		margin-top: auto;
		display: grid;
		padding: 0;
		width: 35px;
		height: 35px;
		place-content: center;
		position: initial;
		background-color: var(--secondary-color);

		img {
			filter: invert(1);
			max-width: 20px;
		}

		&:hover {
			background-color: #fff;

			img {
				filter: none;
			}
		}

	}

	#{$root}__prev {
		img {
			transform: rotate(180deg);
		}
	}
}

.custom-scrollbar {
	&::-webkit-scrollbar {
		width: 12px;
	}

	&::-webkit-scrollbar-thumb {
		background: #CFE3F7;
		border-radius: 35px;
	}

	&::-webkit-scrollbar-track {
		background: rgba(#CFE3F7, .5);
		border-radius: 35px;
		margin: 1rem;
	}
}

ul.rrss-list {
	@include bp-down(md) {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
	}

	li {
		margin-bottom: 1rem;

		a {
			display: inline-grid;
			grid-template-columns: 40px 1fr;
			align-items: center;
			gap: 1rem;

			@include bp-down(sm) {
				gap: 0;
			}

			[class^="icon-"] {
				width: 40px;
				height: 40px;
				border-radius: 50%;
				display: grid;
				place-content: center;
				color: #FFF;
				@extend .font-18;
				@extend .transition;

				~span {
					@extend .semi-bold;

					@include bp-down(md) {
						display: none;
					}
				}

				&.icon-facebook {
					background-color: #167CDF;

					~span {
						color: #167CDF;
					}
				}

				&.icon-linkedin {
					background-color: #318ACD;

					~span {
						color: #318ACD;
					}
				}

				&.icon-twitter {
					background-color: #52AAFA;

					~span {
						color: #52AAFA;
					}
				}

				&.icon-instagram {
					background-color: #E8478C;

					~span {
						color: #E8478C;
					}

				}

				&.icon-youtube-isotipo {
					background-color: #F44943;

					~span {
						color: #F44943;
					}
				}
			}

			&:hover {
				[class^="icon-"] {
					background-color: var(--secondary-color);
				}
			}
		}
	}
}

.cover-audio {
	audio {
		width: 100%;
		background: #FFF;
		border-radius: 35px;
		box-shadow: 0 5px 20px 0 rgba($primary-color-light, .15);

		&::-webkit-media-controls-timeline {
			width: 50%;
		}

		&::-webkit-media-controls-enclosure,
		&::-webkit-media-controls-panel {
			background: none;
		}

		&::-webkit-media-controls-enclosure {
			//filter: brightness(0.9) invert(1);
		}

		&::-webkit-media-controls-current-time-display,
		&::-webkit-media-controls-time-remaining-display {
			text-shadow: none;
			font-weight: 500;
		}
	}

	.audio-player {
		/* height: 60px;
		width: 350px;
		background: var(--primary-color);
		box-shadow: 0 0 20px 0 #000a;
		overflow: hidden;
		border-radius: 35px;
		width: 100%;
		font-family: arial;
		color: white;
		font-size: 0.75em;
		overflow: hidden;
		display: grid;
		grid-template-rows: 6px auto; */
	}
}