@import url('../../../css/fonts.css');

/* 
    <div class=selected-characters></div>
    <button class=edit-palette-button>✏️</button>
    <div class=search>
      <form class=filter-characters>
        <input type=search class=query>
      </form>
      <ol class=ipa-characters></ol>
    </div>

*/

ipa-palette {
  display:grid;
}



ipa-palette .selected-characters character-view * {
  display:none;  
}

ipa-palette .selected-characters character-view .character-symbol {
  display:inline-block;  
  font-family: var(--phonetic-family);
}

ipa-palette .palette {
  display: flex;
}

ipa-palette .palette character-view button {
  border: 1px solid var(--gray-6);
  background:none;
  height: 1.75em;
  width: 1.75em;
  margin: .2em;
}

ipa-palette .palette button.edit-palette-button {
  align-self: flex-start;

}

ipa-palette .palette character-list {
  display: flex;
  flex: 1;
  flex-wrap: wrap;
}

ipa-palette .ipa-characters {
  list-style: none;  
}

ipa-palette .ipa-characters character-view {
  display: grid;
  gap: 1em;
  grid-template-columns: 2em 1fr auto;
}


ipa-palette .ipa-characters {
  cursor: cell;
}

ipa-palette .ipa-characters character-view:hover .character-symbol {
  transform: scale(1.2);
}


ipa-palette .ipa-characters character-view .character-type {
  color: var(--gray-4);
  text-transform: uppercase;
  font-variant: small-caps;
  font-size: small;
}

ipa-palette .search {
  display:grid;
}

ipa-palette .search.hidden {
  display:none;
}
ipa-palette character-view {

}

ipa-palette character-view.selected {
  background-color: lemonchiffon;
}