@font-face {
  font-family: "MyFont";
  src: url("ms_sans_serif.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

.tool-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 32px;
  min-width: 48px;
  padding: 0 4px;
  background: transparent;
  border: 2px solid transparent;
  gap: 1px;
  cursor: pointer;
  font-size: 10px;
  font-family: "MyFont", sans-serif;
  color: var(--win-text);
}


.tool-btn:hover {
  border-color: var(--win-highlight) var(--win-shadow-darker) var(--win-shadow-darker) var(--win-highlight);
  background: var(--win-face);
}

.tool-btn:active {
  border-color: var(--win-shadow-darker) var(--win-highlight) var(--win-highlight) var(--win-shadow-darker);
}

.tool-btn.disabled {
  opacity: 0.5;
  pointer-events: none;
}

.tool-btn span {
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.tool-separator {
  width: 1px;
  height: 26px;
  background: var(--win-shadow-dark);
  margin: 0 2px;
  flex-shrink: 0;
}

.tool-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.new-mail-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1' y='4' width='13' height='10' fill='%23ffd700' stroke='%23404040' stroke-width='1'/%3E%3Cpath d='M1 6 L7.5 11 L14 6' stroke='%23404040' stroke-width='1' fill='none'/%3E%3Cpolygon points='14,8 19,8 19,18 14,18' fill='%23ffffff' stroke='%23404040' stroke-width='1'/%3E%3Cline x1='14' y1='11' x2='19' y2='11' stroke='%23000080' stroke-width='1'/%3E%3Cline x1='16.5' y1='8' x2='16.5' y2='18' stroke='%23000080' stroke-width='1'/%3E%3C/svg%3E");
}

.reply-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='5' width='14' height='10' fill='%23ffd700' stroke='%23404040' stroke-width='1'/%3E%3Cpath d='M3 7 L10 12 L17 7' stroke='%23404040' stroke-width='1' fill='none'/%3E%3Cpolygon points='2,10 8,7 8,13' fill='%23000080'/%3E%3C/svg%3E");
}

.reply-all-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='5' width='14' height='10' fill='%23ffd700' stroke='%23404040' stroke-width='1'/%3E%3Cpath d='M3 7 L10 12 L17 7' stroke='%23404040' stroke-width='1' fill='none'/%3E%3Cpolygon points='1,10 6,7 6,13' fill='%23000080'/%3E%3Cpolygon points='5,10 10,7 10,13' fill='%23000080'/%3E%3C/svg%3E");
}

.forward-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='3' y='5' width='14' height='10' fill='%23ffd700' stroke='%23404040' stroke-width='1'/%3E%3Cpath d='M3 7 L10 12 L17 7' stroke='%23404040' stroke-width='1' fill='none'/%3E%3Cpolygon points='18,10 12,7 12,13' fill='%23000080'/%3E%3C/svg%3E");
}

.delete-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='5' y='3' width='10' height='14' fill='%23c0c0c0' stroke='%23404040' stroke-width='1'/%3E%3Crect x='3' y='3' width='14' height='3' fill='%23808080' stroke='%23404040' stroke-width='1'/%3E%3Cline x1='8' y1='7' x2='8' y2='15' stroke='%23404040' stroke-width='1'/%3E%3Cline x1='10' y1='7' x2='10' y2='15' stroke='%23404040' stroke-width='1'/%3E%3Cline x1='12' y1='7' x2='12' y2='15' stroke='%23404040' stroke-width='1'/%3E%3C/svg%3E");
}

.sendrecv-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='1' y='5' width='10' height='8' fill='%23ffd700' stroke='%23404040' stroke-width='1'/%3E%3Cpath d='M1 7 L6 11 L11 7' stroke='%23404040' stroke-width='1' fill='none'/%3E%3Cpolygon points='12,9 17,6 17,12' fill='%23000080'/%3E%3Cpolygon points='8,11 3,14 3,8' fill='%23008000'/%3E%3C/svg%3E");
}

.addr-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='2' width='16' height='16' rx='0' fill='%23ffffc0' stroke='%23404040' stroke-width='1'/%3E%3Ccircle cx='10' cy='8' r='3' fill='%23808080' stroke='%23404040' stroke-width='1'/%3E%3Cpath d='M4 17 Q10 13 16 17' fill='%23808080' stroke='%23404040' stroke-width='1'/%3E%3C/svg%3E");
}

.find-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='8' cy='8' r='5' fill='none' stroke='%23404040' stroke-width='2'/%3E%3Cline x1='12' y1='12' x2='18' y2='18' stroke='%23404040' stroke-width='2'/%3E%3C/svg%3E");
}

.send-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Crect x='2' y='5' width='12' height='10' fill='%23ffd700' stroke='%23404040' stroke-width='1'/%3E%3Cpath d='M2 7 L8 11 L14 7' stroke='%23404040' stroke-width='1' fill='none'/%3E%3Cpolygon points='15,10 20,7 20,13' fill='%23000080'/%3E%3C/svg%3E");
}

.attach-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M10 2 C6 2 4 5 4 8 L4 15 C4 17 6 18 8 18 C10 18 12 17 12 15 L12 7 C12 6 11 5 10 5 C9 5 8 6 8 7 L8 15' fill='none' stroke='%23404040' stroke-width='2'/%3E%3C/svg%3E");
}

.priority-icon {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpolygon points='10,2 13,8 19,9 14,14 15,20 10,17 5,20 6,14 1,9 7,8' fill='%23ff0000' stroke='%23404040' stroke-width='1'/%3E%3C/svg%3E");
}