.exp-menu {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  width: 24px;
  align-items: stretch;
  padding: 2px;
  border-radius: 2px;
}

.exp-min {
  /*align-self: flex-end;*/
  border: 1px solid #333;
  border-radius: 2px;
  /*width: 20px;*/
  background: none;
}

.exp-max {
  display: none;
  /*align-self: flex-end;*/
  border: 1px solid #333;
  border-radius: 2px;
  /*width: 20px;*/
  background: none;
}

.exp-id {
  align-self: flex-end;
  font-size: 0.6em;
  border: 1px solid #333;
  border-radius: 2px;
  width: 20px;
}

.exp {
  display: inline-flex;
  align-items: center;
  background: rgba(51, 51, 51, 0.1);
  border-radius: 4px;
  padding: 2px;
  border: 1px solid black;
  margin: 1px;
}
.exp.exp-minimized .exp-min {
  display: none;
}
.exp.exp-minimized .exp-max {
  display: block;
}
.exp.exp-literal {
  background: #f88;
}
.exp.exp-variable {
  background: #afa;
}
.exp.exp-composite {
  background: rgba(136, 136, 255, 0.2);
}
.exp:hover:not(:has(.exp:hover)) {
  border: 1px solid red;
}
.exp:hover:not(:has(.exp:hover)).exp-literal {
  background: #f00;
}
.exp:hover:not(:has(.exp:hover)).exp-variable {
  background: #0f0;
}
.exp:hover:not(:has(.exp:hover)).exp-composite {
  background: rgba(0, 0, 255, 0.9);
}

.exp-content {
  display: flex;
  align-items: center;
}

.exp-operator[operator="+"] {
  margin-left: 4px;
  margin-right: 4px;
}