/* line 3, app/assets/stylesheets/application/rainbow-pool.sass */
.rainbow-pool-filters {
  margin-block: .5em;
}

/* line 6, app/assets/stylesheets/application/rainbow-pool.sass */
.rainbow-pool-filters fieldset {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: .5em;
}

/* line 13, app/assets/stylesheets/application/rainbow-pool.sass */
.rainbow-pool-filters legend {
  display: contents;
  font-weight: bold;
}

/* line 17, app/assets/stylesheets/application/rainbow-pool.sass */
.rainbow-pool-filters select {
  width: 16ch;
}

/* line 20, app/assets/stylesheets/application/rainbow-pool.sass */
.rainbow-pool-list {
  list-style-type: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .5em;
  --preview-base-width: 150px;
}

/* line 29, app/assets/stylesheets/application/rainbow-pool.sass */
.rainbow-pool-list > li {
  width: var(--preview-base-width);
  max-width: calc(50% - .25em);
  min-width: 150px;
  box-sizing: border-box;
  text-align: center;
}

/* line 36, app/assets/stylesheets/application/rainbow-pool.sass */
.rainbow-pool-list a {
  display: block;
  border-radius: 1em;
  padding: .5em;
  text-decoration: none;
  background: white;
}

/* line 42, app/assets/stylesheets/application/rainbow-pool.sass */
.rainbow-pool-list a:hover {
  outline: 1px solid #060;
  background: #efe;
}

/* line 46, app/assets/stylesheets/application/rainbow-pool.sass */
.rainbow-pool-list .preview {
  width: 100%;
  height: auto;
  aspect-ratio: 1 / 1;
  margin-bottom: -1em;
}

/* line 52, app/assets/stylesheets/application/rainbow-pool.sass */
.rainbow-pool-list .name {
  background: inherit;
  padding: .25em .5em;
  border-radius: .5em;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

/* line 60, app/assets/stylesheets/application/rainbow-pool.sass */
.rainbow-pool-list .info {
  font-size: .85em;
}

/* line 62, app/assets/stylesheets/application/rainbow-pool.sass */
.rainbow-pool-list .info p {
  margin-block: .25em;
}

/* line 65, app/assets/stylesheets/application/rainbow-pool.sass */
.rainbow-pool-pagination {
  margin-block: .5em;
  display: flex;
  justify-content: center;
  gap: 1em;
}

/* line 71, app/assets/stylesheets/application/rainbow-pool.sass */
.rainbow-pool-no-results {
  margin-block: 1em;
  text-align: center;
  font-style: italic;
}