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

.ppcp-r-navigation-container {
	padding: 24px 48px;
	margin: 0 -20px 48px -20px;
	border-bottom: 1px solid $color-gray-300;
	position: relative;

	--color-accent: #{$color-blueberry};
	--color-text: #{$color-gray-900};
	--color-disabled: #CCC;

	.ppcp-r-navigation {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 40px;

		.components-button {
			@include font(13, 20, 400);

			&.is-primary {
				background-color: var(--color-accent);
				padding: 10px 18px;
				justify-content: center;
				margin: 0 0 0 12px;

				&:disabled {
					background-color: var(--color-disabled);
				}
			}

			&.is-link {
				color: var(--color-accent);
				text-decoration: none;

				&:disabled {
					color: var(--color-disabled);
				}
			}

			&.is-title {
				@include font(16, 24, 600);
				color: var(--color-text);

				.title {
					margin-left: 18px;
				}

				.big {
					@include font(20, 28, 400);
				}
			}
		}

		&--left {
			align-items: center;
			display: inline-flex;
		}

		&--progress-bar {
			position: absolute;
			bottom: 0;
			left: 0;
			background-color: var(--color-accent);
			height: 4px;
			transition: width 0.3s;
		}
	}

	@media screen and (max-width: 480px) {
		padding: 24px 35px;

		.ppcp-r-navigation {
			flex-wrap: wrap;
			row-gap: 8px;

			&--progress-bar {
				display: none;
			}
		}
	}
}