// The Event Calendar CSS override
// See: https://theeventscalendar.com/knowledgebase/k/basic-font-and-color-changes-with-css/

// Import theme variables
@use "../sass/variables-style/variables-style";

// Import TEC baseline styles
@use "../../newspack-theme/sass/plugins/the-events-calendar";
@use "../../newspack-theme/sass/mixins/utilities";
@use "../../newspack-theme/sass/variables-site/structure";

// Theme-specific styles
.tribe_community_edit .button.mb-cta {
	border-radius: 0;
}

// Overlap styles
.tec-wrapper {
	background-color: var(--newspack-theme-color-bg-body);
	padding-top: structure.$size__spacing-unit 0;

	@include utilities.media( tablet ) {
		border-top: 4px solid var(--newspack-theme-color-primary-variation);
		padding: #{3 * structure.$size__spacing-unit} #{2 * structure.$size__spacing-unit} 0;
	}

	@include utilities.media( desktop ) {
		padding-left: #{3 * structure.$size__spacing-unit};
		padding-right: #{3 * structure.$size__spacing-unit};
	}

	#tribe-events-pg-template,
	.tribe-events-l-container {
		padding: structure.$size__spacing-unit 0 0;
	}

	@include utilities.media( tablet ) {
		#tribe-events-pg-template {
			padding: 0;
		}

		.tribe-events-back {
			margin-top: 0;
		}
	}
}

.single-tribe_events {
	.site-content {
		@include utilities.media( tablet ) {
			margin-top: #{-3.5 * structure.$size__spacing-unit};
		}

		@include utilities.media( desktop ) {
			margin-top: #{-6 * structure.$size__spacing-unit};
		}
	}
}
