.ui-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-position: center;
  -webkit-mask-size: contain;
}

.ui-icon--edit {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z'/%3E%3Cpath d='M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25z'/%3E%3Cpath d='M20.71 7.04a1 1 0 0 0 0-1.41l-2.34-2.34a1 1 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z'/%3E%3C/svg%3E");
}

.ui-icon--delete {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h14v2H5z' transform='rotate(-20 12 5)'/%3E%3Crect x='6' y='7' width='12' height='14' rx='1'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 4h14v2H5z' transform='rotate(-20 12 5)'/%3E%3Crect x='6' y='7' width='12' height='14' rx='1'/%3E%3C/svg%3E");
}

.ui-icon--add {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 3v10M3 8h10' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
}

.icon-edit-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
  padding: 2px;
  margin: -2px 0;
  border-radius: 8px;
  opacity: 0.75;
  flex: 0 0 auto;
  transition: opacity 140ms ease, background-color 140ms ease, transform 140ms ease;
}

.icon-edit-btn svg {
  display: block;
  width: 14px;
  height: 14px;
  fill: currentColor;
  opacity: 0.92;
}

.icon-edit-btn--add {
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 1px;
  border-radius: 5px;
  color: rgba(229, 231, 235, 0.75);
}

.icon-edit-btn--add .ui-icon {
  width: 8px;
  height: 8px;
}

.icon-edit-btn--add:hover,
.icon-edit-btn--add:focus-visible {
  border-color: rgba(148, 163, 184, 0.35);
  color: var(--accent);
}