@import "_theme.sass"

@function str-replace($string, $search, $replace: '')
  $index: str-index($string, $search)
  @if $index
    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace)
  @return $string

$padding: 0.5em

.stork-attribution
  display: none
.stork-results
  display: flex
  flex-direction: column
  list-style-type: none
  padding-left: 0
  margin-bottom: 0
  margin: 0;
.stork-result
  margin: 0 (-$padding)
  padding: 0 $padding
  &:hover
    background: $bg2
    a
      text-decoration: none
.stork-excerpt p, .stork-title p
  margin: 0
.stork-excerpt
  p
    font-size: 0.875em
.stork-title
  font-weight: bold
.stork-search
  width: 100%
  height: 2em
  display: flex
  label
    display: flex;
    position: relative
    width: 100%
    &:focus-within
      outline: 1px solid $primary
    &::before
      content: ""
      position: absolute;
      left: 0.5em;
      top: 0;
      bottom: 0;
      width: 1em
      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23#{str-slice("#{$fg}", 2)}' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z' /%3E%3C/svg%3E") center / contain no-repeat;
    input
      padding-left: 1.75em;
      box-sizing: border-box
      width: 100%
      background: $bg2 !important
      &:nth-last-child(3)
  & > *
    height: 100%
.stork-progress
  display: none
.stork-output-visible
  background: $bg1
  padding: 0 $padding
.stork-excerpt
  color: $fg
.stork-highlight
  color: inherit
  padding: 0 0.25ch
  background: $dim
.stork-close-button
  width: 3em;
  box-shadow: none;
  transform: none !important;