@import "../partials/clean/constants"

.rainbow-pool-filters
	fieldset
		display: flex
		flex-direction: row
		align-items: center
		justify-content: center
		gap: .5em

	legend
		display: contents
		font-weight: bold

.rainbow-pool-list
	list-style-type: none
	display: flex
	flex-wrap: wrap
	justify-content: center
	gap: .5em

	--preview-base-width: 150px

	> li
		width: var(--preview-base-width)
		max-width: calc(50% - .25em)
		min-width: 150px
		box-sizing: border-box
		text-align: center

	a
		display: block
		border-radius: 1em
		padding: .5em
		text-decoration: none
		background: white
		&:hover
			outline: 1px solid $module-border-color
			background: $module-bg-color

	.preview
		width: 100%
		height: auto
		aspect-ratio: 1 / 1
		margin-bottom: -1em

	.name
		background: inherit
		padding: .25em .5em
		border-radius: .5em
		margin: 0 auto
		position: relative
		z-index: 1

.rainbow-pool-pagination
	margin-block: .5em
	display: flex
	justify-content: center
	gap: 1em