@use '../../../components/molecules/pagination';
@use '../../../base/mixins/typography' as font;

.pagination {
	&-links {
		&-tile,
		&-util,
		&-skip {
			border-radius: var(--radius-small);

			@include font.get-typography(subhead-small);

			background-color: var(--neutral-3);
			border-color: var(--neutral-3);
			color: var(--neutral-6);

			&:hover {
				color: var(--action-secondary);
				background-color: var(--neutral-1);
				border-color: var(--action-secondary);
			}
		}

		&-tile {
			&.active {
				color: var(--action-contrast);
				background-color: var(--action);
				border-color: var(--action);
			}
		}

		&-util {
			&.disabled {
				opacity: 1;
				background-color: transparent;
				border-color: var(--neutral-3);
				color: var(--neutral-3);
			}
		}
	}
}