@use 'cart-block';
@use 'checkout-block';

div:is(
	.wp-block-woocommerce-cart,
	.wp-block-woocommerce-checkout
) {
	width: var(--theme-block-width);
}

// forms
.wc-block-components-textarea,
.wc-blocks-components-select .wc-blocks-components-select__container select,
.wc-block-components-text-input input:is([type=email], [type=number], [type=tel], [type=text], [type=url]) {
	--has-height: var(--false);

	font-family: var(--theme-form-font-family) !important;
	font-size: var(--theme-form-font-size, 16px) !important;
	font-weight: var(--theme-form-font-weight) !important;
	font-style: var(--theme-form-font-style, inherit) !important;
	line-height: var(--theme-form-line-height) !important;
	letter-spacing: var(--theme-form-letter-spacing) !important;
	text-transform: var(--theme-form-text-transform) !important;
	text-decoration: var(--theme-form-text-decoration) !important;

	padding-inline: 15px !important;
	color: var(--theme-form-text-initial-color, var(--theme-text-color)) !important;
	border: var(--theme-form-field-border-width, 1px) solid var(--theme-form-field-border-initial-color) !important;
	border-radius: var(--theme-form-field-border-radius, 3px) !important;
	background-color: var(--theme-form-field-background-initial-color) !important;
	transition: color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
				border-color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955),
				background-color 0.12s cubic-bezier(0.455, 0.03, 0.515, 0.955);

	&:focus {
		box-shadow: none !important;
		color: var(--theme-form-text-focus-color, var(--theme-text-color)) !important;
		border-color: var(--theme-form-field-border-focus-color) !important;
		background-color: var(--theme-form-field-background-focus-color) !important;
	}
}

.wc-block-components-text-input.has-error input:is([type=email], [type=number], [type=tel], [type=text], [type=url]) {
	border-color: #cc1818 !important;
}


// form select
.wc-blocks-components-select .wc-blocks-components-select__container {
	background: transparent !important;

// 	.wc-blocks-components-select__select {
// 		padding-inline: 0;
// 		color: inherit;
// 		border: none;
// 	}

// 	.wc-blocks-components-select__expand {
// 		fill: currentColor;
// 	}
}


// form input label
.wc-block-components-text-input label,
.wc-blocks-components-select label {
	opacity: 0.6;
	inset-inline-start: 16px !important;
	color: var(--theme-form-text-initial-color, var(--theme-text-color)) !important;
}


// checkbox & radio
.wc-block-components-checkbox__input,
.wc-block-components-radio-control__input {
	outline: none !important;
	background: transparent !important;
	border-color: var(--theme-form-selection-field-initial-color) !important;

	&:checked {
		border-color: var(--theme-form-selection-field-active-color) !important;

		&:before {
			background: var(--theme-form-selection-field-active-color) !important;
		}
	}
}

.wc-block-components-checkbox__mark {
	fill: var(--theme-form-selection-field-active-color) !important;
}


.wc-block-components-radio-control--highlight-checked :is(
	.wc-block-components-radio-control-accordion-option--checked-option-highlighted,
	label.wc-block-components-radio-control__option--checked-option-highlighted
) {
	box-shadow: inset 0 0 0 1.5px var(--theme-palette-color-1) !important;
}


// decorative border color
.wp-block-woocommerce-cart .wc-block-cart :is(
	table.wc-block-cart-items, 
	.wc-block-cart-items tr td,
	.wc-block-components-totals-wrapper,
	.wp-block-woocommerce-cart-order-summary-totals-block
),

.wc-block-checkout__sidebar :is(
	.wp-block-woocommerce-checkout-order-summary-block, 
	.wc-block-components-totals-wrapper, 
	.wp-block-woocommerce-checkout-order-summary-totals-block
),

.wc-block-checkout__main :is(
	.wc-block-components-address-card,
	.wc-block-checkout__terms.wc-block-checkout__terms--with-separator
) {
	border-color: var(--theme-table-border-color, var(--theme-border-color));
}

.wc-block-components-sidebar-layout .wc-block-components-totals-footer-item {

	:is(
		.wc-block-components-totals-item__label,
		.wc-block-components-totals-item__value
	) {
		font-size: initial;
	}
}