:root {
  --miso-search-box-border-radius: 9999px;
  //--miso-search-box-font-weight: 500;
  --miso-search-box-font-size: 1rem;
  --miso-search-box-line-height-scale: 1.5;
  --miso-search-box-line-height: calc(var(--miso-search-box-font-size) * var(--miso-search-box-line-height-scale));
  --miso-search-box-icon-size: 1.25rem;
  --miso-search-box-padding: 0.75rem;
  --miso-search-box-padding-left: calc(var(--miso-search-box-padding) + var(--miso-search-box-line-height) * 0.5 - 0.25em);
  --miso-search-box-border-radius-open: calc(max(var(--miso-search-box-line-height), var(--miso-search-box-icon-size)) / 2 + var(--miso-search-box-padding) + 1px);
  --miso-search-box-height: calc(var(--miso-search-box-line-height) + var(--miso-search-box-padding) * 2 + 2px);
}

.miso-search-box {
  position: relative;
  line-height: var(--miso-search-box-line-height);

  .miso-search-box__input-group {
    position: relative;
    display: flex;
    border: 1px solid var(--miso-border-color-light);
    border-radius: var(--miso-search-box-border-radius);
    font-size: var(--miso-search-box-font-size);
    background-color: #fff;
    outline: none;
    overflow: hidden;
    transition: var(--miso-transition);

    &:hover,
    &:focus-within {
      border-color: var(--miso-border-color-medium);
      box-shadow: var(--miso-box-shadow-hover);
    }
    > .miso-search-box__input {
      flex-grow: 1;
    }
    > .miso-search-box__button {
      flex-grow: 0;
    }
  }

  .miso-search-box__input,
  .miso-search-box__button {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
    border-radius: var(--miso-search-box-border-radius);
  }
  .miso-search-box__input {
    padding: var(--miso-search-box-padding) 0;
    padding-left: var(--miso-search-box-padding-left);
    padding-right: 0.5em;
    border: none;
    outline: none;

    &::placeholder {
      color: #b0b0b0; // TODO
    }
  }
  .miso-search-box__button {
    border: none;
    padding: var(--miso-search-box-padding) 0;
    padding-right: calc(var(--miso-search-box-padding) + var(--miso-search-box-font-size) * 0.5 - var(--miso-search-box-icon-size) * 0.25);
    color: var(--miso-text-color);
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;

    > .miso-ui-icon {
      aspect-ratio: 1;
      height: var(--miso-search-box-icon-size);
      color: var(--miso-border-color-medium);
    }
  }
}

miso-query.open.nonempty {
  .miso-search-box__input-group {
    border-radius: var(--miso-search-box-border-radius-open) var(--miso-search-box-border-radius-open) 0 0;
  }
}