CORE PANEL

[ROOT] / home / salvufkx / public_html / wp-contentmmm / plugins / hello-plus / modules / template-parts / assets / scss

[ PARENT ]

EDIT :: hello-plus-header.scss

@use "../../../../dev/scss/variables";

.ehp-header {
	--header-logo-width: 68px;
	--header-logo-width-sticky: 34px;
	--header-site-title-color: #0052FF;
	--header-site-title-color-hover: #0052FF;
	--header-buttons-space-between: 16px;
	--header-logo-order: 0;
	--header-navigation-breakpoint: 767px;
	--header-menu-item-spacing: 32px;
	--header-title-size-sticky: 20px;
	--header-title-weight-sticky: 800;
	--header-align-menu: start;
	--header-element-spacing: 0;
	--header-blur-level: 7px;

--header-wp-admin-bar-height: 0;
	--header-float-offset: 0px;
	--header-floating-bars-height: 0px;
	--header-float-height: calc(var(--header-wp-admin-bar-height) + var(--header-float-offset) + var(--header-floating-bars-height));
	--header-float-width: 100%;
	--header-scroll-down: 0;

--header-button-primary-icon-spacing: 10px;
	--header-button-primary-text-color: #{variables.$global-colors-white};
	--header-button-primary-text-color-hover: #{variables.$global-colors-text};
	--header-button-primary-border-width: 0;
	--header-button-primary-border-color: transparent;
	--header-button-primary-border-radius-block-end: #{variables.$corners-shape-default};
	--header-button-primary-border-radius-block-start: #{variables.$corners-shape-default};
	--header-button-primary-border-radius-inline-end: #{variables.$corners-shape-default};
	--header-button-primary-border-radius-inline-start: #{variables.$corners-shape-default};

--header-button-secondary-icon-spacing: 10px;
	--header-button-secondary-text-color: #{variables.$global-colors-secondary};
	--header-button-secondary-text-color-hover: #{variables.$global-colors-secondary};
	--header-button-secondary-border-width: 2px;
	--header-button-secondary-border-color: #{variables.$global-colors-secondary};
	--header-button-secondary-border-radius-block-end: #{variables.$corners-shape-default};
	--header-button-secondary-border-radius-block-start: #{variables.$corners-shape-default};
	--header-button-secondary-border-radius-inline-end: #{variables.$corners-shape-default};
	--header-button-secondary-border-radius-inline-start: #{variables.$corners-shape-default};

--header-toggle-icon-color: #555963;
	--header-toggle-icon-color-active: #555963;
	--header-toggle-icon-size: 22px;

--header-menu-item-color: #555963;
	--header-menu-item-color-hover: #555963;
	--header-menu-item-color-active: #555963;

--header-pointer-hover-underline-width: 2px;
	--header-pointer-hover-underline-color: #0052FF;
	--header-pointer-hover-highlight-bg-color: #E0EAFF;
	--header-pointer-hover-highlight-padding-inline-default: 8px;
	--header-pointer-hover-highlight-padding-block-default: 4px;
	--header-pointer-hover-highlight-padding-inline-thin: 6px;
	--header-pointer-hover-highlight-padding-block-thin: 2px;
	--header-pointer-hover-highlight-padding-inline-thick: 8px;
	--header-pointer-hover-highlight-padding-block-thick: 8px;

--header-pointer-hover-highlight-padding-inline: var(--header-pointer-hover-highlight-padding-inline-default);
	--header-pointer-hover-highlight-padding-block: var(--header-pointer-hover-highlight-padding-block-default);

--header-focus-active-underline-width: 2px;
	--header-focus-active-underline-color: #0052FF;
	--header-focus-active-highlight-bg-color: #E0EAFF;
	--header-focus-active-highlight-padding-inline-default: 8px;
	--header-focus-active-highlight-padding-block-default: 4px;
	--header-focus-active-highlight-padding-inline-thin: 6px;
	--header-focus-active-highlight-padding-block-thin: 2px;
	--header-focus-active-highlight-padding-inline-thick: 8px;
	--header-focus-active-highlight-padding-block-thick: 8px;

--header-focus-active-highlight-padding-inline: var(--header-focus-active-highlight-padding-inline-default);
	--header-focus-active-highlight-padding-block: var(--header-focus-active-highlight-padding-block-default);

--header-dropdown-text-align: flex-start;
	--header-dropdown-divider-color: #E0E1E2;
	--header-dropdown-divider-width: 1px;

--header-box-border-width: 1px;
	--header-box-border-color: #555963;

--header-contact-button-size: 16px;
	--header-contact-button-spacing: 12px;

--header-box-padding-block-start: 16px;
	--header-box-padding-block-end: 16px;
	--header-box-padding-inline-start: 32px;
	--header-box-padding-inline-end: 32px;

$menu-cart-border-color: #E7E7E7;

display: flex;
	max-width: var(--header-float-width);
	padding-block-start: var(--header-box-padding-block-start);
	padding-block-end: var(--header-box-padding-block-end);
	padding-inline-start: var(--header-box-padding-inline-start);
	padding-inline-end: var(--header-box-padding-inline-end);
	position: relative;
	z-index: variables.$above-layer;

&.has-box-border {
		border-bottom: var(--header-box-border-width) solid var(--header-box-border-color);
	}

&.has-behavior-float {
		--header-float-offset: 16px;
		--header-float-width: 1140px;

&.has-box-border {
			border: var(--header-box-border-width) solid var(--header-box-border-color);
		}
	}

&.has-behavior-onscroll-always,
	&.has-behavior-onscroll-scroll-up,
	&.has-behavior-float {
		left: 0;
		margin: 0 auto;
		position: fixed;
		right: 0;
		top: var(--header-float-height);
		transition: top 0.5s ease-in-out;
		width: 100%;
		z-index: variables.$top-layer;
	}

&.has-behavior-onscroll-scroll-up {

&.scroll-down {
			top: calc(-1 * var(--header-scroll-down));
			transition: top 0.5s ease-in-out;
		}
	}

&.has-blur-background {
		backdrop-filter: blur(var(--header-blur-background-level));
	}

&.shape-type-float.has-shape-custom {
		--ehp-shapes-border-radius-block-end: var(--header-float-border-radius-custom-block-end, var(--header-float-border-radius-block-end));
		--ehp-shapes-border-radius-block-start: var(--header-float-border-radius-custom-block-start, var(--header-float-border-radius-block-start));
		--ehp-shapes-border-radius-inline-end: var(--header-float-border-radius-custom-inline-end, var(--header-float-border-radius-inline-end));
		--ehp-shapes-border-radius-inline-start: var(--header-float-border-radius-custom-inline-start, var(--header-float-border-radius-inline-start));
	}

&__elements-container {
		display: grid;
		grid-gap: var(--header-element-spacing);
		grid-template-areas:
			"start center end";
		grid-template-columns: 1fr auto 1fr;
		flex-grow: 1;
		position: relative;

& > .ehp-header__ctas-container {
			grid-area: end;
			justify-content: flex-end;
		}
	}

&__site-link-container {
		display: flex;
	}

&__site-link {
		align-items: center;
		display: flex;
	}

&__site-logo,
	&__site-link img {
		width: var(--header-logo-width);

&.has-border {
			border: var(--header-logo-border-width) solid var(--header-logo-border-color);
		}

&.has-shape-custom {
			--ehp-shapes-border-radius-block-end: var(--header-logo-border-radius-block-end);
			--ehp-shapes-border-radius-block-start: var(--header-logo-border-radius-block-start);
			--ehp-shapes-border-radius-inline-end: var(--header-logo-border-radius-inline-end);
			--ehp-shapes-border-radius-inline-start: var(--header-logo-border-radius-inline-start);
		}
	}

&__site-title {
		color: var(--header-site-title-color);
		margin: 0;

.ehp-header__site-link:hover &,
		.ehp-header__site-link:focus & {
			color: var(--header-site-title-color-hover);
		}
	}

&__ctas-container {
		align-items: center;
		display: flex;
		gap: var(--header-buttons-space-between);
		order: 3;
		position: relative;
	}

& a.ehp-button,
	& a.ehp-button:not([href]):not([tabindex]) {
		--ehp-button-primary-icon-spacing: var(--header-button-primary-icon-spacing);
		--ehp-button-primary-text-color: var(--header-button-primary-text-color);
		--ehp-button-primary-text-color-hover: var(--header-button-primary-text-color-hover);
		--ehp-button-primary-border-width: var(--header-button-primary-border-width);
		--ehp-button-primary-border-color: var(--header-button-primary-border-color);
		--ehp-button-primary-padding-block-end: var(--header-button-primary-padding-block-end);
		--ehp-button-primary-padding-block-start: var(--header-button-primary-padding-block-start);
		--ehp-button-primary-padding-inline-end: var(--header-button-primary-padding-inline-end);
		--ehp-button-primary-padding-inline-start: var(--header-button-primary-padding-inline-start);
		--ehp-button-primary-border-radius-block-end: var(--header-button-primary-border-radius-block-end);
		--ehp-button-primary-border-radius-block-start: var(--header-button-primary-border-radius-block-start);
		--ehp-button-primary-border-radius-inline-end: var(--header-button-primary-border-radius-inline-end);
		--ehp-button-primary-border-radius-inline-start: var(--header-button-primary-border-radius-inline-start);

--ehp-button-secondary-icon-spacing: var(--header-button-secondary-icon-spacing);
		--ehp-button-secondary-text-color: var(--header-button-secondary-text-color);
		--ehp-button-secondary-text-color-hover: var(--header-button-secondary-text-color-hover);
		--ehp-button-secondary-border-width: var(--header-button-secondary-border-width);
		--ehp-button-secondary-border-color: var(--header-button-secondary-border-color);
		--ehp-button-secondary-padding-block-end: var(--header-button-secondary-padding-block-end);
		--ehp-button-secondary-padding-block-start: var(--header-button-secondary-padding-block-start);
		--ehp-button-secondary-padding-inline-end: var(--header-button-secondary-padding-inline-end);
		--ehp-button-secondary-padding-inline-start: var(--header-button-secondary-padding-inline-start);
		--ehp-button-secondary-border-radius-block-end: var(--header-button-secondary-border-radius-block-end);
		--ehp-button-secondary-border-radius-block-start: var(--header-button-secondary-border-radius-block-start);
		--ehp-button-secondary-border-radius-inline-end: var(--header-button-secondary-border-radius-inline-end);
		--ehp-button-secondary-border-radius-inline-start: var(--header-button-secondary-border-radius-inline-start);
	}

&__navigation {
		order: 1;
		z-index: variables.$top-layer;

&[aria-hidden="true"] {
			display: none;
		}
	}

&__toggle-icon {

&--open {
			display: flex;
		}

&--close {
			display: none;
		}
	}

&__side-toggle {
		display: none;
		grid-area: end;
		justify-content: flex-end;
		gap: 16px;
		order: 3;
	}

& button.ehp-header__button-toggle {
		align-items: center;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;

&:hover,
		&:focus {
			background: none;
		}

svg {
			fill: var(--header-toggle-icon-color);
			height: var(--header-toggle-icon-size);
			width: var(--header-toggle-icon-size);
		}

&[aria-expanded="true"] {

.ehp-header__toggle-icon--open {
				display: none;
			}

.ehp-header__toggle-icon--close {
				display: flex;
			}
		}

&[aria-expanded="false"] {

.ehp-header__toggle-icon--open {
				display: flex;
			}

.ehp-header__toggle-icon--close {
				display: none;
			}
		}
	}

&__dropdown {
		display: flex;
		gap: var(--header-menu-item-spacing);
		left: -16px;
		list-style: none;
		padding: 0;
		position: absolute;
		top: calc(100% + var(--header-box-padding-block-end));
		width: auto;
		z-index: variables.$ninth-layer;

.menu-item {
			flex-grow: 1;
		}

&.shape-type-submenu.has-shape-custom {
			--ehp-shapes-border-radius-block-end: var(--header-submenu-border-radius-custom-block-end, var(--header-submenu-border-radius-block-end));
			--ehp-shapes-border-radius-block-start: var(--header-submenu-border-radius-custom-block-start, var(--header-submenu-border-radius-block-start));
			--ehp-shapes-border-radius-inline-end: var(--header-submenu-border-radius-custom-inline-end, var(--header-submenu-border-radius-inline-end));
			--ehp-shapes-border-radius-inline-start: var(--header-submenu-border-radius-custom-inline-start, var(--header-submenu-border-radius-inline-start));
		}

&[aria-hidden="true"] {
			display: none;
		}
	}

&__item--sub-level {
		white-space: nowrap;
	}

& .ehp-header__item:is([type="button"]) {
		background-color: transparent;
	}

& .ehp-header__item:is(a),
	& .ehp-header__item:is([type="button"]) {
		color: var(--header-menu-item-color);
		transition: variables.$transition;

&:hover {
			color: var(--header-menu-item-color-hover);
			transition: variables.$transition;
		}

&[aria-expanded="true"] {

.ehp-header__submenu-toggle-icon {
				transform: rotate(180deg);
			}
		}
	}

&__dropdown-toggle[type="button"] {
		border: unset;
		border-radius: unset;
		padding: unset;

&:hover,
		&:focus {
			background: unset;
		}
	}

.menu-item {
		align-items: center;
		display: flex;
		height: 100%;
		position: relative;

&.current-menu-item {

.ehp-header__item {
				color: var(--header-menu-item-color-active);
			}
		}
	}

&__menu {
		align-items: center;
		display: flex;
		gap: var(--header-menu-item-spacing);
		list-style-type: none;
		padding: 0;

&.has-focus-active {

&-underline {

.menu-item.current-menu-item {

.ehp-header__item {
						position: relative;

&:after {
							background-color: var(--header-focus-active-underline-color);
							bottom: -5px;
							height: var(--header-focus-active-underline-width);
							content: "";
							left: 0;
							position: absolute;
							width: 100%;
						}
					}
				}
			}

&-highlight {

.menu-item.current-menu-item {

.ehp-header__item {
						border-radius: 8px;
						padding-inline: var(--header-focus-active-highlight-padding-inline);
						padding-block: var(--header-focus-active-highlight-padding-block);

&:hover,
						&:focus {
							background-color: var(--header-focus-active-highlight-bg-color);
						}
					}
				}
			}
		}
	}

&__submenu-toggle-icon {
		fill: currentColor;
		margin-left: 4px;
		height: 12px;
		width: 12px;
	}

&__contact-buttons {
		align-items: center;
		display: flex;
		gap: var(--header-contact-button-spacing);
	}

&__contact-button {

& i,
		& .ehp-header__contact-button-label {
			color: var(--header-contact-button-color);
			transition: variables.$transition;
		}

& svg {
			fill: var(--header-contact-button-color);
			transition: variables.$transition;
		}

&:hover,
		&:focus {
			& i,
			& .ehp-header__contact-button-label {
				color: var(--header-contact-button-color-hover);
				transition: variables.$transition;
			}

& svg {
				fill: var(--header-contact-button-color-hover);
				transition: variables.$transition;
			}
		}

& i {
			font-size: var(--header-contact-button-size);
		}

& svg {
			height: var(--header-contact-button-size);
			width: var(--header-contact-button-size);
		}
	}

&__menu-cart {

& button.ehp-header__menu-cart-button {
			background-color: transparent;
			border: none;
			display: flex;
			cursor: pointer;
			height: var(--header-menu-cart-icon-size);
			padding: 0;
			width: var(--header-menu-cart-icon-size);

& svg {
				fill: var(--header-menu-cart-icon-color);
				height: var(--header-menu-cart-icon-size);
				pointer-events: none;
				transition: variables.$transition;
				width: var(--header-menu-cart-icon-size);
			}

& i {
				color: var(--header-menu-cart-icon-color);
				pointer-events: none;
				font-size: var(--header-menu-cart-icon-size);
			}

&:hover {
				background-color: transparent;

& svg {
					fill: var(--header-menu-cart-icon-hover-color);
					transition: variables.$transition;
				}

& i {
					color: var(--header-menu-cart-icon-hover-color);
					transition: variables.$transition;
				}
			}
		}

&-items {
			flex-direction: column;
			gap: 10px;

&[inert] {
				display: none;
			}

&:not([inert]) {
				display: flex;
			}
		}

&-item {
			padding-block: 10px;
		}

&-list {
			list-style: none;
			padding: 0;
			margin: 0;
		}

&-close-container {
			display: flex;
			justify-content: flex-end;
		}

& button.ehp-header__menu-cart-close {
			background-color: transparent;
			border: none;
			cursor: pointer;
			padding: 0;
			width: 16px;
			height: 16px;

& svg {
				fill: var(--header-menu-item-color);
				height: 16px;
				pointer-events: none;
				transition: variables.$transition;
				width: 16px;
			}

&:hover {
				background-color: transparent;

& svg {
					fill: var(--header-menu-item-color-hover);
					transition: variables.$transition;
				}
			}
		}

&-item-info {
			align-items: center;
			display: flex;
			flex-direction: row;
			gap: 10px;
		}

&-item-info-content {
			display: flex;
			flex-direction: column;
			gap: 5px;
		}

&-item-price {
			color: var(--header-menu-item-color);
			font-size: .75em;
		}

&-item-thumbnail {
			background-color: variables.$global-colors-white;
			border-radius: 0;
			border: 1px solid $menu-cart-border-color;
			height: 65px;
			object-fit: cover;
			object-position: center;
			width: 65px;
		}

& a.ehp-header__menu-cart-item-remove {
			border: 1px solid var(--header-menu-item-color);
			border-radius: 50%;
			color: var(--header-menu-item-color);
			display: inline-block;
			font-size: 16px;
			font-weight: 700;
			height: 20px;
			line-height: 1;
			text-align: center;
			transition: variables.$transition;
			width: 20px;

&:hover,
			&:focus {
				color: var(--header-menu-item-color-hover);
				border-color: var(--header-menu-item-color-hover);
			}
		}

&-subtotal {
			align-items: center;
			color: var(--header-menu-item-color);
			display: flex;
			justify-content: space-between;
			font-weight: 700;
			padding-block: 10px;
		}

&-actions {
			display: flex;
			flex-direction: column;
			gap: 5px;
			padding-block: 10px;
		}

&-view-cart.ehp-header__item {
			--header-menu-item-color: var(--header-menu-cart-view-cart-text-color);
			--header-menu-item-color-hover: var(--header-menu-cart-view-cart-text-color-hover);

background-color: var(--header-menu-cart-view-cart-background-color);
			border-radius: 0;
			padding: 12px;
			text-align: center;

&:hover,
			&:focus {
				background-color: var(--header-menu-cart-view-cart-background-color-hover);
			}
		}

&-checkout {
			padding: 12px;
			text-align: center;
		}

&-empty {
			color: var(--header-menu-item-color);
		}
	}

&.has-behavior-onscroll-always {
		transition: variables.$transition;

.ehp-header__site-link img,
		.ehp-header__site-title {
			transition: variables.$transition;
		}

&.scroll-down {
			transition: variables.$transition;

&.has-behavior-sticky-scale-logo {

.ehp-header__site-link img {
					width: var(--header-logo-width-sticky);
					transition: variables.$transition;
				}
			}

&.has-behavior-sticky-scale-title {

.ehp-header__site-title {
					font-size: var(--header-title-size-sticky);
					font-weight: var(--header-title-weight-sticky);
					transition: variables.$transition;
				}
			}
		}
	}

@mixin responsive_styles_mobile() {
		.ehp-header {

&__elements-container > .ehp-header__ctas-container {
				& > .ehp-button {
					display: none;
				}

& > .ehp-header__contact-buttons.has-responsive-display-dropdown {
					display: none;
				}
			}

&__dropdown {
				align-items: var(--header-dropdown-text-align);
				background-color: transparent !important; // Override the default background color
				background-image: none !important; // Override the default background image
				border-radius: unset;
				flex-direction: column;
				left: unset;
				top: unset;
				position: relative;
				width: 100%;
			}

&__navigation {
				left: calc(-1 * var(--header-box-padding-inline-start));
				padding-block-start: var(--header-box-padding-block-start);
				padding-block-end: var(--header-box-padding-block-end);
				position: absolute;
				top: calc(100% + var(--header-box-padding-block-end));
				width: calc(100% + var(--header-box-padding-inline-start) + var(--header-box-padding-inline-end));

.ehp-header__ctas-container {
					align-items: stretch;
					display: flex;
					flex-direction: column;

&.has-responsive-width-stretch {
						& .ehp-header__contact-buttons.has-responsive-display-dropdown {
							padding-inline-start: var(--header-box-padding-inline-start);
							padding-inline-end: var(--header-box-padding-inline-end);
						}
					}

&.has-responsive-width-default {
						padding-inline-start: var(--header-box-padding-inline-start);
						padding-inline-end: var(--header-box-padding-inline-end);
					}
				}

.ehp-header__contact-buttons.has-responsive-display-navbar {
					display: none;
				}

& .ehp-header__contact-buttons {
					justify-content: var(--header-dropdown-text-align);
				}

.ehp-header__menu-cart {
					display: none;
				}
			}

&__button {
				justify-content: center;
			}

&__side-toggle {
				display: flex;

& .ehp-header__contact-buttons.has-responsive-display-dropdown {
					display: none;
				}
			}

&__menu {
				align-items: var(--header-dropdown-text-align);
				display: flex;
				flex-direction: column;
				margin-bottom: 32px;
				padding-inline-start: var(--header-box-padding-inline-start);
				padding-inline-end: var(--header-box-padding-inline-end);

&.has-responsive-divider {

& > .menu-item {
						border-bottom: var(--header-dropdown-divider-width) solid var(--header-dropdown-divider-color);
						padding-block-end: var(--header-menu-item-spacing);
						width: 100%;

&:last-child {
							border-bottom: none;
							padding-bottom: 0;
						}
					}
				}
			}

&__menu-cart-container {
				display: flex;
			}
		}

.menu-item {
			justify-content: var(--header-dropdown-text-align);
		}

.menu-item.menu-item-has-children {
			align-items: var(--header-dropdown-text-align);
			display: flex;
			flex-direction: column;
			width: 100%;

& .ehp-header__dropdown-toggle[aria-expanded="true"] {
				margin-bottom: var(--header-menu-item-spacing);
			}
		}

.ehp-header__menu-cart-items {
			flex-direction: column;
			gap: 10px;
			max-height: calc(70vh - var(--header-box-padding-block-end));
			padding-block-start: var(--header-box-padding-block-start);
			padding-block-end: var(--header-box-padding-block-end);
			padding-inline-start: var(--header-box-padding-block-start);
			padding-inline-end: var(--header-box-padding-block-end);
			position: absolute;
			right: calc(-1 * var(--header-box-padding-inline-start));
			top: calc(100% + var(--header-box-padding-block-end));
			width: 100vw;
		}

.ehp-header__menu-cart-list {
			list-style: none;
			padding: 0;
			margin: 0;
			overflow-y: auto;
			max-height: calc(60vh - var(--header-box-padding-block-end) - 60px);
		}
	}

@mixin responsive_styles_desktop {

&.has-align-link-start {

.ehp-header__navigation {
				justify-content: center;
			}
		}

&.has-align-link-center {

.ehp-header__site-link-container {
				grid-area: center;
				justify-content: center;
			}
		}

&.has-align-link-connect {

& .ehp-header__elements-container {
				grid-template-columns: auto 1fr auto;
			}

& .ehp-header__navigation {
				justify-content: var(--header-align-menu);
			}
		}

.ehp-header {

&__navigation {
				align-items: center;
				background: none !important; // Override the default background color
				display: flex;

& > .ehp-header__ctas-container,
				& > .ehp-header__contact-buttons {
					display: none;
				}
			}

&__dropdown {
				padding: 16px 32px;

&.has-layout-horizontal {
					flex-direction: row;
				}

&.has-layout-vertical {
					flex-direction: column;
				}
			}

&__menu {

&.has-pointer-hover {

&-underline {

.ehp-header__item:hover {
							position: relative;

&:after {
								background-color: var(--header-pointer-hover-underline-color);
								bottom: -5px;
								height: var(--header-pointer-hover-underline-width);
								content: "";
								left: 0;
								position: absolute;
								width: 100%;
							}
						}
					}

&-highlight {

.ehp-header__item {
							border-radius: 8px;
							padding-inline: var(--header-pointer-hover-highlight-padding-inline);
							padding-block: var(--header-pointer-hover-highlight-padding-block);

&:hover {
								background-color: var(--header-pointer-hover-highlight-bg-color);
							}
						}
					}
				}
			}

&__menu-cart-items {
				display: flex;
				flex-direction: column;
				gap: 10px;
				max-height: calc(80vh - var(--header-box-padding-block-end) - 60px);
				min-width: 260px;
				overflow-y: auto;
				padding: 10px;
				position: absolute;
				right: 0;
				top: calc(100% + var(--header-box-padding-block-end));
				z-index: variables.$ninth-layer;

&[inert] {
					display: none;
				}

&:not([inert]) {
					display: flex;
				}
			}

&__menu-cart-list {
				list-style: none;
				padding: 0;
				margin: 0;
				overflow-y: auto;
				max-height: calc(65vh - var(--header-box-padding-block-end) - 60px);
			}

&__menu-cart-container {
				display: none;
			}
		}
	}

&[data-responsive-breakpoint="mobile-portrait"] {

@media screen and (max-width: variables.$screen-mobile-max) {
			@include responsive_styles_mobile();
		}

@media screen and (min-width: variables.$screen-tablet-min) {
			@include responsive_styles_desktop();
		}
	}

&[data-responsive-breakpoint="tablet-portrait"] {

@media screen and (max-width: variables.$screen-tablet-max) {
			@include responsive_styles_mobile();
		}

@media screen and (min-width: variables.$screen-desktop-min) {
			@include responsive_styles_desktop();
		}
	}

&[data-responsive-breakpoint="none"] {
		@include responsive_styles_desktop();
	}
}

.e-con.e-con--ehp-header,
.e-con:has(.ehp-header:is(.has-behavior-onscroll-none):not(.has-behavior-float)) {
	padding: 0;

& > .e-con-inner.e-con-inner--ehp-header,
	& > .e-con-inner {
		max-width: unset;
		padding-block-end: 0;
		padding-block-start: 0;
	}
}

CANCEL

// SYSTEM PANEL //

EDIT :: hello-plus-header.scss