<?php
/**
 * WeCodeArt Framework
 *
 * WARNING: This file is part of the core WeCodeArt Framework. DO NOT edit this file under any circumstances.
 * Please do all modifications in the form of a child theme.
 *
 * @package		WeCodeArt Framework
 * @subpackage  Styles\Components
 * @copyright   Copyright (c) 2025, WeCodeArt Framework
 * @since		6.1.5
 * @version		6.4.5
 */

namespace WeCodeArt\Support\Styles\Components;

defined( 'ABSPATH' ) || exit;

use function WeCodeArt\Functions\get_prop;

/**
 * Offcanvas Styles
 */
class OffCanvas extends Base {
	/**
     * Component's Style Deps.
     *
     * @var     array
     */
    static $deps = [ 'transition', 'close' ];
	
    /**
	 * Component styles.
	 *
	 * @return 	string
	 */
	public static function styles(): string {
		$breaks	= wecodeart_json( [ 'settings', 'custom', 'breakpoints' ], [] );

		$inline = <<<CSS
			.wp-offcanvas {
				--wp--offcanvas-zindex: 1045;
				--wp--offcanvas-width: 400px;
				--wp--offcanvas-height: 30vh;
				--wp--offcanvas-padding-x: 1rem;
				--wp--offcanvas-padding-y: 1rem;
				--wp--offcanvas-border-color: rgb(var(--wp--background--rgb, 255,255,255));
				--wp--offcanvas-color: ;
				--wp--offcanvas-bg: rgb(var(--wp--background--rgb, 255,255,255));
				--wp--offcanvas-transition: transform 0.3s ease-in-out;
				position: fixed;
				bottom: 0;
				display: flex;
				flex-direction: column;
				visibility: hidden;
				background-color: var(--wp--offcanvas-bg);
				background-clip: padding-box;
				color: var(--wp--offcanvas-color);
				transition: var(--wp--offcanvas-transition);
				z-index: var(--wp--offcanvas-zindex);
				margin: 0!important;
				max-width: 100%!important;
				outline: 0;
			}
			.wp-offcanvas:is(.showing,.show:not(.hiding)) {
				transform: none;
			}
			.wp-offcanvas:is(.showing,.hiding,.show) {
				visibility: visible;
			}
			.theme-is-dark .wp-offcanvas {
				--wp--offcanvas-border-color: rgb(var(--wp--background--rgb, 0,0,0));
				--wp--offcanvas-bg: rgb(var(--wp--background--rgb, 37,37,41));
			}
			.wp-offcanvas__header {
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: var(--wp--offcanvas-padding-y) var(--wp--offcanvas-padding-x);
			}
			.wp-offcanvas__header .wp-close {
				padding: calc(var(--wp--offcanvas-padding-y) * .5) calc(var(--wp--offcanvas-padding-x) * .5);
				margin-top: calc(-.5 * var(--wp--offcanvas-padding-y));
				margin-left: calc(-.5 * var(--wp--offcanvas-padding-x));
				margin-right: calc(-.5 * var(--wp--offcanvas-padding-x));
				margin-bottom: calc(-.5 * var(--wp--offcanvas-padding-y));
			}
			:is(.wp-offcanvas--start,.wp-offcanvas--top,.wp-offcanvas--bottom) .wp-close {
				margin-left: auto;
			}
			.wp-offcanvas__title {
				margin: 0;
				line-height: 1.5;
			} 
			.wp-offcanvas__body {
				flex-grow: 1;
				padding: var(--wp--offcanvas-padding-y) var(--wp--offcanvas-padding-x);
				overflow-y: auto;
			}
			.wp-offcanvas:where(.wp-offcanvas--start,.wp-offcanvas--end) {
				top: 0;
				width: var(--wp--offcanvas-width);
			}
			.wp-offcanvas:where(.wp-offcanvas--start) {
				left: 0;
				border-right: 1px solid var(--wp--offcanvas-border-color);
				transform: translateX(-100%);
			}
			.wp-offcanvas:where(.wp-offcanvas--end) {
				right: 0;
				border-left: 1px solid var(--wp--offcanvas-border-color);
				transform: translateX(100%);
			}
			.wp-offcanvas:where(.wp-offcanvas--top,.wp-offcanvas--bottom) {
				right: 0;
				left: 0;
				height: var(--wp--offcanvas-height);
				max-width: none!important;
				max-height: 100%;
			}
			.wp-offcanvas:where(.wp-offcanvas--top) {
				top: 0;
				bottom: auto;
				border-bottom: 1px solid var(--wp--offcanvas-border-color);
				transform: translateY(-100%);
			} 
			.wp-offcanvas:where(.wp-offcanvas--bottom) {
				border-top: 1px solid var(--wp--offcanvas-border-color);
				transform: translateY(100%);
			}
		CSS;

		foreach( $breaks as $key => $value ) {
			$inline .= <<<CSS
				@media (min-width: {$value}) {
					.wp-offcanvas.{$key}\:wp-offcanvas--expand,
					.wp-offcanvas.{$key}\:wp-offcanvas--expand .wp-offcanvas__body {
						all: inherit;
						padding: 0;
					}
					.wp-offcanvas.{$key}\:wp-offcanvas--expand .wp-offcanvas__header {
						display: none;
					}
				}
			CSS;
		}

		return $inline;
	}
}
