/**
 * Header Action — visual styles.
 *
 * @package PasionGift_App
 */

.pg-header-action {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	min-width: 2.5rem;
	min-height: 2.5rem;
	padding: 0;
	border: 0;
	border-radius: var(--pg-radius-full);
	background-color: transparent;
	color: var(--pg-color-brand-black, var(--pg-color-text));
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
	-webkit-tap-highlight-color: transparent;
}

.pg-header-action:hover {
	background-color: rgba(var(--pg-color-brand-wine-rgb, 139, 30, 63), 0.06);
	color: var(--pg-color-brand-wine);
}

.pg-header-action:focus-visible {
	outline: 2px solid var(--pg-color-brand-wine);
	outline-offset: 2px;
}

.pg-header-action__badge {
	position: absolute;
	top: 0.2rem;
	inset-inline-end: 0.2rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1rem;
	height: 1rem;
	padding-inline: 0.1875rem;
	border-radius: var(--pg-radius-full);
	background-color: var(--pg-color-brand-wine);
	color: var(--pg-color-surface);
	font-family: var(--pg-font-family);
	font-size: 0.625rem;
	font-weight: var(--pg-font-weight-semibold);
	line-height: 1;
	pointer-events: none;
}

.pg-header-action__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.1875rem;
	height: 1.1875rem;
	color: inherit;
}

.pg-header-action__icon svg {
	width: 100%;
	height: 100%;
}

.pg-header-action--disabled,
.pg-header-action:disabled {
	pointer-events: none;
	opacity: 0.5;
}

@media (max-width: 767px) {
	.pg-header-action {
		width: var(--pg-header-action-size, 2.5rem);
		height: var(--pg-header-action-size, 2.5rem);
		min-width: var(--pg-header-action-size, 2.5rem);
		min-height: var(--pg-header-action-size, 2.5rem);
	}
}

@media (max-width: 359px) {
	.pg-header-action__icon {
		width: 1.0625rem;
		height: 1.0625rem;
	}

	.pg-header-action__badge {
		top: 0.125rem;
		inset-inline-end: 0.125rem;
	}
}

@media (min-width: 768px) {
	.pg-header-action {
		width: var(--pg-header-action-size);
		height: var(--pg-header-action-size);
		min-width: var(--pg-header-action-size);
		min-height: var(--pg-header-action-size);
	}

	.pg-header-action__icon {
		width: 1.25rem;
		height: 1.25rem;
	}
}