/* SM-816 -- the ONE shared staff edit-pencil control. pencil.svg mask-painted
   with currentColor (the SM-496 icon idiom), inside the exact bordered-box
   look tads/lesson.html's `.lesson-edit` established first (32x32,
   var(--card-border) border, var(--text-dim) icon, var(--accent)/
   var(--accent-light) on hover). Every per-page fork of this look
   (.tads-edit, .section-edit, .module-edit, .video-edit-btn,
   .sm-content-manager-edit's raw-pencil-character variant) is retired in
   favor of this one file -- see templates/_staff_edit_pencil.html for the
   include contract. */

.staff-edit-pencil {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--card-border, #1e1e1c);
  border-radius: 3px;
  text-decoration: none;
}

.staff-edit-pencil:hover {
  border-color: var(--accent, #d4500f);
  text-decoration: none;
}

.staff-edit-pencil-icon {
  display: inline-block;
  width: 16px;
  height: 16px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-image: url('/app/static/icons/pencil.svg');
  mask-image: url('/app/static/icons/pencil.svg');
  background-color: var(--text-dim, #46433f);
}

.staff-edit-pencil:hover .staff-edit-pencil-icon {
  background-color: var(--accent-light, #e8601a);
}