/* 词典 / PANDECT 浮层样式，忠实移植自参考的 Widget:Pandect/styles.css。 */

#avg-pandect {
  background: #00000050;
  box-sizing: border-box;
  display: flex;
  height: 100%;
}

#avg-overlay #avg-pandect {
  display: none;
  padding: 4.375em 0 2.25em 5.09375em;
}

#avg-overlay.des #avg-pandect {
  display: flex;
}

#avg-pandect ul {
  list-style: none;
  overflow-x: hidden;
  padding: 0;
  text-align: center;
  transition: width 0.2s;
}

#avg-pandect.des ul {
  margin: 0;
  width: 0;
}

#avg-des-type {
  background: #424242;
  color: white;
  margin: 0;
  width: 5.03125em;
}

#avg-des-entries {
  background: #fafafa;
  color: white;
  margin: 0 0.3125em 0 0;
  overflow-y: scroll;
  width: 14.25em;
}

#avg-des-entries::after,
#avg-des-entries::before {
  content: '';
  display: block;
  height: 0.73em;
  left: 0;
  position: sticky;
  width: 100%;
  z-index: 1;
}

#avg-des-entries::after {
  background: linear-gradient(to top, #fff, #fff0);
  bottom: 0;
}

#avg-des-entries::before {
  background: linear-gradient(to bottom, #fff, #fff0);
  top: 0;
}

#avg-pandect li {
  cursor: pointer;
  font-size: 93.75%;
  position: relative;
  user-select: none;
  z-index: 0;
}

#avg-des-type li {
  align-items: center;
  box-sizing: border-box;
  display: flex;
  height: 2.9667em;
  justify-content: center;
  padding-bottom: 0.2em;
  padding-left: 0.0667em;
}

#avg-des-type li.selected {
  background: #fafafa;
  color: black;
}

#avg-des-entries li {
  background: #424242;
  box-shadow: 0.1333em 0.1333em 0.2667em #888;
  height: 2.0667em;
  margin: 0 0.7333em;
  padding-top: 0.4em;
}

#avg-des-entries li:nth-child(n+2) {
  margin-top: 0.7333em;
}

#avg-des-entries li.selected {
  border: 0.2667em solid #fd8f27;
  border-top-width: 0.2em;
  box-shadow: none;
  margin: 0 0.4667em;
}

#avg-des-entries li.selected {
  margin-top: 0.5333em;
}

#avg-des-entries li.selected:first-child {
  margin-top: -0.2em;
}

#avg-des-entries li.selected:last-child {
  margin-bottom: -0.2667em;
}

#avg-des-entries li.selected + li {
  margin-top: 0.4667em;
}

#avg-des-entries li.selected::after {
  background: #fd8f27;
  content: '';
  display: block;
  height: 0.4em;
  position: absolute;
  right: -0.4667em;
  top: 1.0667em;
  transform: rotate(45deg);
  width: 0.4em;
}

#avg-des-entries li.selected::before {
  background: #fd8f2730;
  content: '';
  display: block;
  height: 100%;
  position: absolute;
  top: 0;
  width: 100%;
}

#avg-des-return {
  align-items: center;
  background: #424242;
  border-radius: 12px;
  box-shadow: 1px 1px 3px #aaa;
  color: white;
  cursor: pointer;
  display: none;
  float: left;
  font-size: 87.5%;
  height: 24px;
  margin-right: -47px;
  margin-top: 11px;
  margin-left: 11px;
  padding-left: 2px;
  user-select: none;
  width: 34px;
}

#avg-pandect.des #avg-des-return {
  display: flex;
}

#avg-des {
  background: #fffe;
  display: none;
  width: 19em;
}

#avg-pandect.expanded #avg-des,
#avg-pandect.des #avg-des {
  display: block;
}

#avg-des.expanded {
  width: 36em;
}

#avg-des::before {
  background: #424242;
  color: white;
  content: '\25aa' 'PANDECT';
  display: block;
  font-size: 75%;
  height: 1.6667em;
  margin: 0.0833em 0.0833em -0.8333em;
  transform: scale(0.5);
  transform-origin: top left;
  width: 50.3333em;
}

#avg-des.expanded::before {
  width: 95.6667em;
}

#avg-des-dt {
  align-items: center;
  display: flex;
  font-size: 1.09375em;
  height: 11.06%;
  justify-content: center;
}

#avg-des-dd {
  -webkit-backdrop-filter: brightness(0.9);
  backdrop-filter: brightness(0.9);
  font-size: 93.75%;
  height: 20.3333em;
  line-height: 1.2667;
  margin: 0 0.6667em;
  overflow-y: scroll;
  padding: 0.7em;
}

#avg-des-expand {
  background: #424242;
  box-shadow: 0.1429em 0.1429em 0.2857em #888;
  color: white;
  cursor: pointer;
  float: right;
  font-size: 87.5%;
  margin: 0.7143em;
  padding: 0.2857em 0.4286em 0.2857em 0.6429em;
  user-select: none;
  width: 8em;
}

#avg-des-expand::after {
  content: '\232a\232a';
  float: right;
}

#avg-des.expanded #avg-des-expand::after {
  content: '';
}

#avg-des.expanded #avg-des-expand::before {
  content: '\2329\2329';
  float: left;
  margin-left: -0.5em;
}

#avg-des.expanded #avg-des-expand {
  text-align: right;
}