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

vowel-chart-view {
  display: block;;
}


vowel-chart-view table {
  border-collapse: collapse;
  font-family: var(--phonetic-family);
} 
 

vowel-chart-view thead th {
  writing-mode: vertical-rl;
  text-align: initial;
  transform: rotate(180deg);

  width:4em;
  height:6em;
}

vowel-chart-view th {
  font-size: small;
}

vowel-chart-view td {
  padding: .1em;
  border: 1px solid hsl(0, 0%, 82.7%);
  text-align: center;
  /* display: inline-grid;
  grid-template-columns: repeat(2,1fr);
  justify-content: space-between; */
}

vowel-chart-view td span {
  text-align: center;
  position: relative;
  width: 50%;
  display: inline-block;  
}

vowel-chart-view td span:hover {
  cursor: pointer;
}

vowel-chart-view td span:hover:after {
  z-index: 100;
  margin-left: 1em;
  font-size: smaller;
  border: 1px solid;
  display: inline-block;
  position: absolute;
  background: white;
}

vowel-chart-view td span[data-backness]:hover:after {
  position: absolute;
  content: attr(data-backness) ' ' attr(data-height) ' ' attr(data-rounding) 
}