<?php
/**
 * This file adds block styles to the Strakture WordPress theme.
 *
 * @since     1.0
 * @package Strakture
 * @link    https://strakture.aleksandrsamokhin.com/
 */

/*
--------------------------------------------------------------
Block Styles.
--------------------------------------------------------------
 */
if ( ! function_exists( 'strakture_register_block_styles' ) ) {
	/**
	 * Register custom block styles.
	 */
	function strakture_register_block_styles() {
		if ( function_exists( 'register_block_style' ) ) {

			register_block_style(
				'core/group',
				array(
					'name'         => 'strakture-hide-on-tablet',
					'label'        => esc_html__( 'Hide on Tablet', 'strakture' ),
					'inline_style' => '@media only screen and (max-width: 781px) { display: none; }',
				)
			);

			register_block_style(
				'core/column',
				array(
					'name'         => 'strakture-hide-on-tablet',
					'label'        => esc_html__( 'Hide on Tablet', 'strakture' ),
					'inline_style' => '@media only screen and (max-width: 781px) { display: none; }',
				)
			);

			register_block_style(
				'core/group',
				array(
					'name'         => 'strakture-hide-on-mobile',
					'label'        => esc_html__( 'Hide on Mobile', 'strakture' ),
					'inline_style' => '@media only screen and (max-width: 599px) { display: none; }',
				)
			);

			register_block_style(
				'core/column',
				array(
					'name'         => 'strakture-hide-on-mobile',
					'label'        => esc_html__( 'Hide on Mobile', 'strakture' ),
					'inline_style' => '@media only screen and (max-width: 599px) { display: none; }',
				)
			);

			register_block_style(
				'core/group',
				array(
					'name'         => 'strakture-stacked-card',
					'label'        => esc_html__( 'Stacked Card', 'strakture' ),
					'inline_style' => '@media only screen and (min-width: 1025px) {
						.is-style-strakture-stacked-card {
							position: sticky;
							top: calc(0px + var(--wp-admin--admin-bar--position-offset, 0px));
							z-index: 10;
						}
					}',
				)
			);

			register_block_style(
				'core/navigation',
				array(
					'name'         => 'strakture-tablet-justify-center',
					'label'        => esc_html__( 'Tablet align center', 'strakture' ),
					'inline_style' => '@media only screen and (max-width: 781px) {
						.is-style-strakture-tablet-justify-center {
							justify-content: center !important;
							align-items: center !important;
							--navigation-layout-justify: center !important;
							--navigation-layout-align: center !important;
							--navigation-layout-justification-setting: center !important;
						}
					}',
				)
			);

			register_block_style(
				'core/navigation',
				array(
					'name'         => 'strakture-tablet-justify-end',
					'label'        => esc_html__( 'Tablet align right', 'strakture' ),
					'inline_style' => '@media only screen and (max-width: 781px) {
						.is-style-strakture-tablet-justify-end {
							justify-content: flex-end !important;
							align-items: flex-end !important;
							--navigation-layout-justify: flex-end !important;
							--navigation-layout-align: flex-end !important;
							--navigation-layout-justification-setting: flex-end !important;
						}
					}',
				)
			);

			register_block_style(
				'core/navigation',
				array(
					'name'         => 'strakture-tablet-justify-start',
					'label'        => esc_html__( 'Tablet align left', 'strakture' ),
					'inline_style' => '@media only screen and (max-width: 781px) {
						.is-style-strakture-tablet-justify-start {
							justify-content: flex-start !important;
							align-items: flex-start !important;
							--navigation-layout-justify: flex-start !important;
							--navigation-layout-align: flex-start !important;
							--navigation-layout-justification-setting: flex-start !important;
						}
					}',
				)
			);

			register_block_style(
				'core/navigation',
				array(
					'name'         => 'strakture-mobile-justify-center',
					'label'        => esc_html__( 'Mobile align center', 'strakture' ),
					'inline_style' => '@media only screen and (max-width: 599px) {
						.is-style-strakture-mobile-justify-center {
							justify-content: center !important;
							align-items: center !important;
							--navigation-layout-justify: center !important;
							--navigation-layout-align: center !important;
							--navigation-layout-justification-setting: center !important;
						}
					}',
				)
			);

			register_block_style(
				'core/navigation',
				array(
					'name'         => 'strakture-mobile-justify-end',
					'label'        => esc_html__( 'Mobile align right', 'strakture' ),
					'inline_style' => '@media only screen and (max-width: 599px) {
						.is-style-strakture-mobile-justify-end {
							justify-content: flex-end !important;
							align-items: flex-end !important;
							--navigation-layout-justify: flex-end !important;
							--navigation-layout-align: flex-end !important;
							--navigation-layout-justification-setting: flex-end !important;
						}
					}',
				)
			);

			register_block_style(
				'core/navigation',
				array(
					'name'         => 'strakture-mobile-justify-start',
					'label'        => esc_html__( 'Mobile align left', 'strakture' ),
					'inline_style' => '@media only screen and (max-width: 599px) {
						.is-style-strakture-mobile-justify-start {
							justify-content: flex-start !important;
							align-items: flex-start !important;
							--navigation-layout-justify: flex-start !important;
							--navigation-layout-align: flex-start !important;
							--navigation-layout-justification-setting: flex-start !important;
						}
					}',
				)
			);

			register_block_style(
				'core/button',
				array(
					'name'         => 'gradient-stroke-button',
					'label'        => esc_html__( 'Gradient Stroke', 'strakture' ),
					'inline_style' => '
					.is-style-gradient-stroke-button .wp-block-button__link {
						color: var(--wp--preset--color--headings);
						position: relative;
						display: inline-block;
						white-space: nowrap;
						border: 0;
					}
					.is-style-gradient-stroke-button .wp-block-button__link::before {
						content: "";
						position: absolute;
						inset: 0;
						padding: 2px;
						background: linear-gradient(90deg, var(--wp--preset--color--primary), var(--wp--preset--color--secondary));
						-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
						mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
						-webkit-mask-composite: xor;
						mask-composite: exclude;
						border-radius: inherit;
						pointer-events: none;
					}
					.is-style-gradient-stroke-button .wp-block-button__link:hover {
						color: var(--wp--preset--color--primary) !important;
					}
				',
				)
			);

			register_block_style(
				'core/read-more',
				array(
					'name'         => 'strakture-read-more-full-link',
					'label'        => esc_html__( 'Full Link', 'strakture' ),
					'inline_style' => '
					.is-style-strakture-read-more-full-link {
						display: block;
						position: absolute;
						inset: 0;
						width: 100%;
						height: 100%;
						font-size: 0;
					}
				',
				)
			);

			register_block_style(
				'core/social-links',
				array(
					'name'  => 'strakture-md-down-justify-content-start',
					'label' => esc_html__( 'Tablet align left', 'strakture' ),
				)
			);

			register_block_style(
				'core/social-links',
				array(
					'name'  => 'strakture-md-down-justify-content-center',
					'label' => esc_html__( 'Tablet align center', 'strakture' ),
				)
			);

			register_block_style(
				'core/social-links',
				array(
					'name'  => 'strakture-md-down-justify-content-end',
					'label' => esc_html__( 'Tablet align right', 'strakture' ),
				)
			);

			register_block_style(
				'core/columns',
				array(
					'name'         => 'strakture-column-reverse-on-tablet',
					'label'        => esc_html__( 'Reverse on Tablet', 'strakture' ),
					'inline_style' => '@media only screen and (max-width: 781px) {
						.is-style-strakture-column-reverse-on-tablet {
							flex-direction: column-reverse;
						}
					}',
				)
			);

			register_block_style(
				'core/columns',
				array(
					'name'         => 'strakture-row-reverse-on-tablet',
					'label'        => esc_html__( 'Row Reverse on Tablet', 'strakture' ),
					'inline_style' => '@media only screen and (max-width: 781px) {
						.is-style-strakture-row-reverse-on-tablet {
							flex-direction: row-reverse;
						}
					}',
				)
			);

			register_block_style(
				'core/columns',
				array(
					'name'         => 'strakture-column-reverse-on-mobile',
					'label'        => esc_html__( 'Reverse on Mobile', 'strakture' ),
					'inline_style' => '@media only screen and (max-width: 599px) {
						.is-style-strakture-column-reverse-on-mobile {
							flex-direction: column-reverse;
						}
					}',
				)
			);

			register_block_style(
				'core/columns',
				array(
					'name'         => 'strakture-row-reverse-on-mobile',
					'label'        => esc_html__( 'Row Reverse on Mobile', 'strakture' ),
					'inline_style' => '@media only screen and (max-width: 599px) {
						.is-style-strakture-row-reverse-on-mobile {
							flex-direction: row-reverse;
						}
					}',
				)
			);

		}
	}
}
add_action( 'after_setup_theme', 'strakture_register_block_styles' );
