.trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 32px;
  padding: 0 0px;
  background-color: #8e8e8e;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  color: #000;
  box-shadow:
    inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 10px 2px -8px #e3e3e3,
    inset 0px 10px 2px -8px #282828,
    inset 0px -9px 2px -8px #000,
    0px 0px 4px 0px #000;
}
.trigger:hover {
  box-shadow:
    inset 8px 0px 4px -8px #000,
    inset -8px 0px 4px -8px #000,
    inset 0px 9px 2px -8px #fff,
    inset 0px 8px 4px -8px #000,
    inset 0px -8px 4px -8px #000,
    inset 0px -9px 2px -8px #432400,
    0px 0px 4px 0px #000,
    inset 0px 0px 4px 2px #f9b44b;
  background-color: #e39827;
}
.trigger.open {
  box-shadow:
    inset 0px 10px 2px -8px #000,
    inset 0px 9px 2px -8px #000,
    inset 8px 0px 4px -8px #563a10,
    inset 8px 0px 4px -8px #563a10,
    inset -8px 0px 4px -8px #563a10,
    inset -8px 0px 4px -8px #563a10,
    inset 0px 9px 2px -8px #563a10,
    inset 0px -9px 2px -8px #563a10,
    inset 0px -8.5px 0px -8px #563a10,
    0px 0px 4px 0px #000;
  background-color: #f1be64;
}
.placeholder {
  color: #2a2a2a;
  white-space: nowrap;
}