@import "@wordpress/base-styles/breakpoints";
@import "@wordpress/base-styles/mixins";
@import "@wordpress/base-styles/variables";

.dataviews-pagination {
	flex-shrink: 0;
	background: #fff;
	bottom: 0;
	color: var(--Gray-Gray-40, #787c82);
	@include body-small;
	justify-content: space-between !important;
	padding: 12px 16px 12px 16px;
	margin-top: auto;
	z-index: 1;

	.components-input-control__backdrop {
		border-color: var(--Gray-Gray-5, #dcdcde);
	}

	.components-input-control__container {
		padding: 0 5px;
	}

	@include breakpoint-deprecated( ">1400px" ) {
		bottom: 0;
	}
}

/*
 * This is a hotfix for the the button disabled state.
 * The button is getting a color that is almost identical to the active state.
 * It needs to be looked at and fixed separately.
 * See https://github.com/Automattic/wp-calypso/pull/93503#issuecomment-2304078241
 */
.dataviews-wrapper .components-button.is-tertiary:visited,
.dataviews-wrapper .components-button.is-tertiary[disabled],
.dataviews-wrapper .components-button.is-tertiary:disabled,
.dataviews-wrapper .components-button.is-tertiary.disabled {
	color: #949494; // Same as core https://github.com/WordPress/gutenberg/blob/2cbba93a29600f09f6f95c09f690576b90e79e9f/packages/components/src/button/style.scss#L125
}
