.searches-form {
  --input-padding: 0.5rem 1rem;
  --input-border-radius: 0.5rem;
}

.searches-details {
  & input,
  select,
  textarea {
    background-color: var(--input-background, var(--color-bg));
  }
}

.searches__show {
  & h1 {
    text-wrap-style: pretty;
    margin-block-start: 0;
  }

  &[data-disabled="true"] h1 {
    /* color: oklch(var(--lch-red-light)); */
    color: var(--color-negative);
  }
}

.searches__list {
  & p {
    margin: 0;
  }

  /*  overflow: hidden;*/
  /* margin-block-start: max(22.2vh, 5.4em);
  margin-block-end: 44.4vh; */
}

.searches__item {
  --transition: 250ms ease;
  --hover-size: 0;

  transition: color var(--transition);
  position: relative;

  color: inherit;
  text-decoration: none;
  font-weight: 600;
  line-height: 1.6;

  display: block;

  & dl {
    display: flex;
    flex-direction: row;
    margin: 0;
  }

  & dd {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    margin-inline-start: var(--inline-space-half);
  }

  &:hover {
    z-index: 110;
  }

  &[data-disabled="true"] {
    /* color: oklch(var(--lch-red-light)); */
    color: var(--color-negative);
  }
}

.searches__animation-wrapper {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--transition);
  width: 100%;
  overflow: hidden;
}

.searches__animation {
  min-height: 0;
  overflow: hidden;
}

.searches__transform-wrapper {
  transform: translateY(-100%);
  visibility: hidden;
  transition:
    transform var(--transition),
    visibility 0s var(--transition);
  width: 100%;
}

@media (min-width: 48em) and (hover: hover) and (pointer: fine) {
  .searches__list {
    &:has(.searches__item:hover)
      .searches__item:not(.searches__item:hover)
      .searches__item:not(.searches__item--still) {
      color: var(--color-subtle-dark);
    }
  }

  .searches__item:hover .searches__animation-wrapper {
    grid-template-rows: 1fr;
  }
  .searches__item:hover .searches__transform-wrapper {
    transform: translateY(0);
    visibility: visible;
    transition:
      transform var(--transition),
      visibility 0s linear;
  }
}

@media (min-width: 48em) {
  .searches__item {
    line-height: 1.4;
  }
}

.searches__content {
  padding-block: var(--block-space-half);
  width: 100%;

  & > .badge {
    white-space: nowrap;
  }
}

.searches__content * {
  margin: 0;
}

.searches__legend {
  & dl {
    display: grid;
    grid-template-columns: min-content 1fr;
    gap: var(--block-space-half);
    font-size: var(--font-medium-responsive);
  }

  & dt {
    text-align: center;
    & .badge {
      white-space: nowrap;
    }
  }

  & dd {
    margin-inline-start: var(--inline-space-double);
    text-wrap-style: pretty;
  }
}

.searches__title-input {
  line-height: 1.3;
}