/* Flat interface artwork. Surfaces retain the selected neumorphic material. */
svg.ui-icon {
  display: inline-block;
  width: 1.125em;
  height: 1.125em;
  flex: 0 0 auto;
  overflow: visible;
  vertical-align: -0.18em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  pointer-events: none;
  filter: none;
  box-shadow: none;
}

:is(.modal-close, .icon-button, .push-onboarding-close, .role-task-step-image-remove, .role-task-step-image-download) > .ui-icon {
  width: 18px;
  height: 18px;
}

:is(.chat-attach-button, .chat-expression-face) > .ui-icon {
  width: 22px;
  height: 22px;
}

.chat-expression-tabs button > .ui-icon,
.chat-attach-menu button .ui-icon {
  width: 17px;
  height: 17px;
}

.password-requirements b > .ui-icon {
  width: 13px;
  height: 13px;
}

.overview-sort-arrow > .ui-icon {
  width: 14px;
  height: 14px;
}

.push-device-preview b > .ui-icon {
  width: 1em;
  height: 1em;
}

.role-task-step-image-add {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* Dynamic compact task actions use SVG masks so their text updates stay intact. */
#taskModal :is(.task-title-action, .task-ready-button, .manager-word-export-button)::before,
.company-role-permission-card > summary::after {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background-color: currentColor;
  mask: var(--ui-action-image) center / contain no-repeat;
}

#taskModal .task-ready-button::before {
  --ui-action-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 4 4L19 6'/%3E%3C/svg%3E");
}

#taskModal .task-ready-button[data-archived="1"]::before {
  content: "";
  --ui-action-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 4-6 6 6 6M3 10h10a7 7 0 0 1 7 7v3'/%3E%3C/svg%3E");
}

#taskModal .task-title-refresh::before {
  --ui-action-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7v5h-5M4 17v-5h5M6 6a8 8 0 0 1 14 6M4 12a8 8 0 0 0 14 6'/%3E%3C/svg%3E");
}

#taskModal .task-title-copy::before {
  --ui-action-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='8' y='8' width='12' height='13' rx='2'/%3E%3Cpath d='M16 8V5a2 2 0 0 0-2-2H5a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h3'/%3E%3C/svg%3E");
}

#taskModal .task-title-folder::before {
  --ui-action-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 7V5a2 2 0 0 1 2-2h5l2 3h7a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2Zm0 2h18'/%3E%3C/svg%3E");
}

#taskModal .task-title-remove::before {
  --ui-action-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round'%3E%3Cpath d='M5 12h14'/%3E%3C/svg%3E");
}

#taskModal .manager-word-export-button::before {
  --ui-action-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H6a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V9ZM14 3v6h6M8 13h8M8 17h6'/%3E%3C/svg%3E");
}

.company-role-permission-card > summary::after {
  --ui-action-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
}