@import url(../character-view/character-view.css);
@import url(../../components/data-viewer/data-viewer.css);

ipa-search {
  display:grid;
  gap: .5em;
}

ipa-search .ipa-search-bar {
  background-color: var(--gray-8);
  padding: 1em;
  display:flex;
  gap: .2em;
}

ipa-search .ipa-search-bar input.ipa-search-query-input {
  flex: 1;
}

ipa-search .filters{
  display: flex;
  /* justify-content: center; */
  text-transform: uppercase;
  font-size: small;
}

ipa-search .ipa-search-query-input {
  border: 1px solid currentColor;
  border-radius: .5em;
  line-height:2;
  font-size: large;
  padding: .2em;
}

ipa-search ol li {
  display: flex;
  align-items: baseline;
}

ipa-search ol li .symbol {
  font-weight:bold;
  width:3em;
  text-align:center;
}

ipa-search ol .character-name {
  flex:1;
}

ipa-search character-view {
  flex: 1;
}

ipa-search character-view strong.symbol-type {
  text-align:right;
  font-size:small;
  align-self:baseline;
}

ipa-search ol li button {
  margin-left: 1em;
}
  /*



ipa-search  input[list] {
  width: 100%;
}
ipa-search  option {
  display: flex;
  align-items: baseline;
}

ipa-search  .symbol {
  font-weight:bold;
  width:3em;
  text-align:center;
}

ipa-search   .character-name {
  flex:1;
}

ipa-search  strong.symbol-type {
  text-align:right;
  font-size:small;
  align-self:baseline;
} */