/* FILE: _custom-properties.scss */

//
// Custom properties (CSS variables).
//
// @package    Eimear
// @copyright  WebMan Design, Oliver Juhas
//
// @since  1.0.0
//

:root {

	// Theme/customize options.

		// `$value + ''` is converting values to string to prevent any issues.

		@each $option, $value in $customize_options {
			--#{ $option }: #{ $value + '' };
		}

		// RGBA colors:
		// As all of the RGBA options use the same alpha value,
		// we just set it here directly.
		$alpha: 20;
		@each $option_rgba in $customize_options_rgba {
			$value: rgba( map_get( $customize_options, $option_rgba ), $alpha / 100 );
			--#{ $option_rgba }--a#{ $alpha }: #{ $value + '' };
		}

	// Typography.

		// @link  https://www.modularscale.com/?1&em&1.2
		$heading_sizes : ( 2.488, 2.074, 1.728, 1.44, 1.2, 1 );
		@each $size in $heading_sizes {
			--typography_heading_size_#{ index( $heading_sizes, $size ) }: #{ $size +em };
		}

		--typography_heading_size_multiplier: .75;
		@include media( map_get( $breakpoint, 'm' ) ) {
			--typography_heading_size_multiplier: .875;
		}
		@include media( map_get( $breakpoint, 'l' ) ) {
			--typography_heading_size_multiplier: 1;
		}

		--typography_font_size_huge: 3.583em;

		--typography_heading_size_posts: 1.2em;
		@include media( map_get( $breakpoint, 'xxl' ) ) {
			--typography_heading_size_posts: 1.44em;
		}

	// Spacing and size.

		// Unit is required in `calc()`.
		// A non-zero value is required for minification process not to strip the unit.
		--zero: 0.001px;

		--scrollbar_width: var(--zero);

		--white_space: 60px;
		@include media( map_get( $breakpoint, 'l' ) ) {
			--white_space: 90px;
		}
		@include media( map_get( $breakpoint, 'xl' ) ) {
			--white_space: 120px;
		}

		--posts_list_gap: 2em;
		@include media( map_get( $breakpoint, 'xl' ) ) {
			--posts_list_gap: 3em;
		}

		--button_toggle_sub_menu_size: 10px;
		// Touch enabled devices.
		@media (hover: none) {
			--button_toggle_sub_menu_size: 24px;
		}

		--max_width_header_content: 1920px;
		--max_width_footer_content: 1920px;

		--content_padding:          calc(  1 * var(--white_space) );
		--content_padding_negative: calc( -1 * var(--white_space) );

		--sidebar_width: .33;

		--letter_spacing: .05em;
		@include media( map_get( $breakpoint, 'xl' ) ) {
			--letter_spacing: .075em;
		}

		--hr_zigzag_height: 10px;
		--hr_zigzag_segments: 3;
		@include media( map_get( $breakpoint, 'm' ) ) {
			--hr_zigzag_segments: 5;
		}

	// Others.

		--pseudo_background_opacity: .05;

}

.has-navigation-mobile {
	@include media( ( map_get( $breakpoint, $mobile_menu_breakpoint ), 'max-width' ) ) {
		--button_toggle_sub_menu_size: 32px;
	}
}