/* Set icone locale: i file SVG restano in assets/icons e il colore segue currentColor. */
.ui-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 1em;
  background-color: currentColor;
  -webkit-mask-image: var(--ui-icon-source);
  mask-image: var(--ui-icon-source);
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

.ui-icon-add { --ui-icon-source: url("../icons/add.svg"); }
.ui-icon-home { --ui-icon-source: url("../icons/home.svg"); }
.ui-icon-forecast { --ui-icon-source: url("../icons/forecast.svg"); }
.ui-icon-calendar { --ui-icon-source: url("../icons/calendar.svg"); }
.ui-icon-folder { --ui-icon-source: url("../icons/folder.svg"); }
.ui-icon-sparkles { --ui-icon-source: url("../icons/sparkles.svg"); }
.ui-icon-settings { --ui-icon-source: url("../icons/settings.svg"); }
.ui-icon-bell { --ui-icon-source: url("../icons/bell.svg"); }
.ui-icon-document-check { --ui-icon-source: url("../icons/document-check.svg"); }
.ui-icon-file-text { --ui-icon-source: url("../icons/file-text.svg"); }
.ui-icon-robot { --ui-icon-source: url("../icons/robot.svg"); }
.ui-icon-close { --ui-icon-source: url("../icons/close.svg"); }
.ui-icon-lightbulb { --ui-icon-source: url("../icons/lightbulb.svg"); }
.ui-icon-chevron-down { --ui-icon-source: url("../icons/chevron-down.svg"); }
.ui-icon-chevron-right { --ui-icon-source: url("../icons/chevron-right.svg"); }
.ui-icon-chevron-left { --ui-icon-source: url("../icons/chevron-right.svg"); transform: scaleX(-1); }
.ui-icon-upload { --ui-icon-source: url("../icons/upload.svg"); }
.ui-icon-list { --ui-icon-source: url("../icons/list.svg"); }
.ui-icon-grid { --ui-icon-source: url("../icons/grid.svg"); }
.ui-icon-edit { --ui-icon-source: url("../icons/edit.svg"); }
.ui-icon-eye { --ui-icon-source: url("../icons/eye.svg"); }
.ui-icon-eye-off { --ui-icon-source: url("../icons/eye-off.svg"); }
.ui-icon-send { --ui-icon-source: url("../icons/send.svg"); }
.ui-icon-check { --ui-icon-source: url("../icons/check.svg"); }
.ui-icon-clock { --ui-icon-source: url("../icons/clock.svg"); }
.ui-icon-trash { --ui-icon-source: url("../icons/trash.svg"); }
.ui-icon-search { --ui-icon-source: url("../icons/search.svg"); }
.ui-icon-download { --ui-icon-source: url("../icons/download.svg"); }
.ui-icon-print { --ui-icon-source: url("../icons/print.svg"); }
.ui-icon-camera { --ui-icon-source: url("../icons/camera.svg"); }

.primary,
.outline,
.tabs button,
.action-link,
.updated-at,
.prediction-auto,
.mobile-hero .auto,
.mobile-updated,
.tax-note,
.chat-identity,
.paid-confirmation,
.reminder-link {
  align-items: center;
}

.primary,
.outline,
.tabs button,
.action-link,
.updated-at,
.prediction-auto,
.mobile-hero .auto,
.mobile-updated,
.tax-note,
.paid-confirmation,
.reminder-link {
  gap: 7px;
}

.primary,
.outline,
.tabs button,
.action-link,
.updated-at,
.prediction-auto,
.mobile-hero .auto,
.mobile-updated,
.tax-note,
.paid-confirmation,
.reminder-link {
  display: inline-flex;
}

.primary,
.outline,
.tabs button {
  justify-content: center;
}

.icon-button {
  display: grid;
  place-items: center;
}

.icon-button .ui-icon {
  width: 1.15em;
  height: 1.15em;
}

.nav-icon.ui-icon {
  display: inline-block;
  width: 22px;
  height: 22px;
  margin-right: 12px;
  vertical-align: middle;
}

.profile-summary {
  display: flex;
  align-items: center;
  gap: 10px;
}

.prediction-auto {
  font-weight: 600;
}

.updated-at .ui-icon,
.prediction-auto .ui-icon,
.action-link .ui-icon {
  width: 1.05em;
  height: 1.05em;
}

.empty-primary {
  max-width: 180px;
}

.opportunity-eyebrow {
  margin-bottom: 8px;
}

.limit-usage {
  color: var(--green);
  font-size: 11.5px;
}

.amount-positive {
  color: var(--green);
}

.pending-invoices-copy {
  margin-top: 3px;
  color: #8b84a1;
  font-size: 12px;
  font-weight: 600;
}

.reminder-link {
  color: #7769a6;
}

.tax-eyebrow {
  color: var(--green);
}

.tax-hero-label {
  color: #687364;
  font-weight: 600;
}

.tax-regime-tag {
  background: var(--green);
  color: #fff;
}

.chat-identity {
  display: flex;
  gap: 12px;
}

.chat-title {
  font-size: 17px;
}

.close .ui-icon,
.chat-form .ui-icon {
  width: 20px;
  height: 20px;
}

.upload-icon .ui-icon {
  width: 30px;
  height: 30px;
}

.bar-height-10 { height: 10px; }
.bar-height-14 { height: 14px; }
.bar-height-15 { height: 15px; }
.bar-height-17 { height: 17px; }
.bar-height-18 { height: 18px; }
.bar-height-20 { height: 20px; }
.bar-height-22 { height: 22px; }
.bar-height-24 { height: 24px; }
.bar-height-27 { height: 27px; }
.bar-height-28 { height: 28px; }
.bar-height-30 { height: 30px; }
.bar-height-32 { height: 32px; }
.bar-height-35 { height: 35px; }
.bar-height-42 { height: 42px; }

.view-switch button {
  gap: 5px;
}

.view-switch button > .ui-icon {
  width: 16px;
  height: 16px;
}

.deadline-chevron.ui-icon {
  width: 20px;
  height: 20px;
}

.late-card summary > em .ui-icon {
  display: block;
  width: 20px;
  height: 20px;
}

.documents-drop > div .ui-icon {
  width: 32px;
  height: 32px;
}

.assistant-card button .ui-icon {
  width: 15px;
  height: 15px;
}

@media(max-width:760px) {
  .mobile-actions .ui-icon,
  .bottom-nav button[data-tab] b > .ui-icon {
    display: inline-block;
    width: 24px;
    height: 24px;
  }

  .mobile-hero img.mobile-hero-decoration {
    position: absolute;
    inset: 0 0 auto auto;
    z-index: 2;
    width: 160px;
    height: 135px;
    transform: none;
    object-fit: contain;
    pointer-events: none;
  }

  .mobile-hero .auto,
  .mobile-updated {
    display: inline-flex;
  }

  .mobile-detail > .ui-icon {
    width: 20px;
    height: 20px;
  }

  .mobile-deadline > .ui-icon {
    width: 22px;
    height: 22px;
  }

  .mobile-bulb .ui-icon {
    width: 24px;
    height: 24px;
  }

  .mobile-op > i {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
  }

  .mobile-op > i .ui-icon {
    width: 18px;
    height: 18px;
  }

  .mini .mini-icon .ui-icon {
    width: 18px;
    height: 18px;
  }

  .mini .mobile-revenue-trend {
    position: absolute;
    left: 15px;
    bottom: 14px;
    width: calc(100% - 28px);
    height: 34px;
  }

  .mini > i .ui-icon {
    width: 20px;
    height: 20px;
  }

  .bottom-nav .fab .ui-icon {
    display: inline-block;
    width: 28px;
    height: 28px;
  }

  #mobile-fab-menu .mobile-fab-actions i .ui-icon {
    width: 24px;
    height: 24px;
  }

  #mobile-fab-menu .mobile-fab-close .ui-icon {
    width: 20px;
    height: 20px;
  }
}