woocommerce-paypal-payments/modules/ppcp-settings/resources/css/components/reusable-components/_tab-navigation.scss

.ppcp-r-tabs {
	--wp-components-color-accent: #{$color-blueberry};
	--wp-admin-border-width-focus: 3px;

	max-width: var(--max-container-width);
	transition: max-width 0.2s;

	.components-tab-panel__tabs {
		box-shadow: 0 -1px 0 0 $color-gray-400 inset;
		margin-bottom: 48px;
		gap: 12px;
		overflow: auto;
		.components-button {
			padding: 16px 20px;

			&.is-active {
				background-color: #fff4;
			}
		}
	}
}
💄 Style the new TabNavigation component 2024-10-28 15:48:36 +01:00			`.ppcp-r-tabs {`
			`--wp-components-color-accent: #{$color-blueberry};`
			`--wp-admin-border-width-focus: 3px;`

💄 Adjust SCSS to address new component hierarchy 2024-10-28 17:57:05 +01:00			`max-width: var(--max-container-width);`
✨ Set container width based on active tab panel 2024-10-28 15:56:11 +01:00			`transition: max-width 0.2s;`

💄 Style the new TabNavigation component 2024-10-28 15:48:36 +01:00			`.components-tab-panel__tabs {`
			`box-shadow: 0 -1px 0 0 $color-gray-400 inset;`
			`margin-bottom: 48px;`
			`gap: 12px;`
Payment cards redesign #2 2024-11-21 11:38:01 +01:00			`overflow: auto;`
💄 Style the new TabNavigation component 2024-10-28 15:48:36 +01:00			`.components-button {`
			`padding: 16px 20px;`

			`&.is-active {`
			`background-color: #fff4;`
			`}`
			`}`
			`}`
			`}`