/*
 * Job role tag (A-19, A-21, A-30, D-20, D-25; job_role_tag(job_role)): a 26px pill in a petal
 * color. The color follows the role's place in the A-23 list (UiHelper::JOB_ROLE_TONES): Lead
 * Teacher green, Assistant Teacher orange, Teacher Intern pink, Office Manager yellow, Cook blue,
 * then again from green. A long name shortens with an ellipsis inside its column.
 *
 *   <span class="job-tag job-tag--ops">Lead Teacher</span>
 */
@layer components {
  .job-tag {
    display: inline-block;
    max-width: 100%;
    height: 26px;
    padding: 0 10px;
    overflow: hidden;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 700;
    line-height: 26px;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .job-tag--ops { background: var(--petal-ops-bg); color: var(--petal-ops-fg); }
  .job-tag--lic { background: var(--petal-lic-bg); color: var(--petal-lic-fg); }
  .job-tag--staff { background: var(--petal-staff-bg); color: var(--petal-staff-fg); }
  .job-tag--form { background: var(--petal-form-bg); color: var(--petal-form-fg); }
  .job-tag--policy { background: var(--petal-policy-bg); color: var(--petal-policy-fg); }
}