/*-- --------------------------------- -->
<---   Snipcart global style overrides -->
<--- --------------------------------- -*/

#snipcart {
	--bgColor-buttonSecondary: var(--primary);
	--bgColor-buttonPrimary-hover: #000;
	--color-link: var(--secondary);
	--color-link-hover: var(--secondaryLight);
	--color-icon: var(--secondary);
	font-family: inherit;
}

.snipcart-cart-summary-side .snipcart-cart__secondary-header {
	padding: clamp(6rem, 10vw, 8rem) 2rem clamp(1rem, 5vw, 2rem);
}

.snipcart-cart-header,
.snipcart-cart__secondary-header{
	padding: clamp(6rem, 10vw, 8rem) 2rem clamp(1rem, 5vw, 2rem);
}

.snipcart-signin__box {
	padding: clamp(6rem, 10vw, 8rem) 2rem;
}

.snipcart__font--secondary, 
.snipcart__font--subtitle, 
.snipcart__font--subtitle-small,
.snipcart-modal__close {
	font-family: inherit;
}

.snipcart-modal__close {
	font-size: var(--bodyFontSize);
	color: var(--bodyTextColor);
}

.snipcart-modal {
	color: var(--headerColor);
}

.snipcart-button-primary {
	font-family: inherit;
	line-height: (50/16em);
	text-align: center;
	text-transform: uppercase;
	text-decoration: none;
	width: 100%;
	height: (50/16rem);
	padding: 0 (30/16rem);
	border: none;
	border-radius: 0;
	color: #000;
	background-color: var(--primary);

	.snipcart-base-button__label {
		font-size: (16/16rem);
		font-family: inherit;
		font-weight: bold;
	}
}

body.dark-mode {
	#snipcart {
		--bgColor-default: var(--accent);
		--bgColor-alt: var(--accent);
		--bgColor-modal: var(--medium);
		--bgColor-error: var(--primaryLight);
		--bgColor-buttonSecondary: var(--primary);
		--bgColor-input: var(--medium);
		--color-input: var(--bodyTextColorWhite);
		--color-inputLabel: var(--bodyTextColorWhite);
		--color-default: var(--bodyTextColorWhite);
		--color-link: var(--bodyTextColorWhite);
		--color-link-hover: var(--primaryLight);
		--color-buttonSecondary: var(--headerColor);
		--color-icon: var(--primaryLight);
		--bgColor-badge-active: var(--bodyTextColorWhite);
		--color-badge: var(--headerColor);
		--color-badge-active: var(--headerColor);
		--borderColor-badge-active: var(--primaryLight);
		--color-input-error: #faa39a;
		--bgColor-input-autofill: var(--secondaryLight);
		
	}

	.snipcart-flash-message__title,
	.snipcart-flash-message__description,
	.snipcart-featured-payment-methods__title,
	.snipcart-typeahead__suggestion {
		color: var(--bodyTextColor);
	}

	.snipcart-modal,
	.snipcart-billing-completed__information,
	.snipcart-shipping-completed__information,
	.snipcart__notice--with-icon,
	.snipcart-featured-payment-methods__link,
	.snipcart-payment-form__input,
	.snipcart-order__details__content,
	.snipcart-order__invoice-number--highlight,
	.snipcart-modal__close,
	.snipcart-modal__close-title {
		color: var(--bodyTextColorWhite);
	}

	// TODO - check whether this element only appears in TEST MODE
	.snipcart-payment-card-form {
		background-color:var(--color-default); 
	}
}