/**
 * Kartochka — compact "open company card" control (document glyph).
 * Etalon: specs table contractor cell (18x18, light fill, blue icon).
 */

:root {
  --kartochka-size: 18px;
  --kartochka-icon: 12px;
  --kartochka-radius: 4px;
  --kartochka-border: #c8d0da;
  --kartochka-bg: #f8fafc;
  --kartochka-color: #1d4ed8;
  --kartochka-bg-hover: #eff6ff;
  --kartochka-border-hover: #93c5fd;
  --kartochka-color-hover: #1e40af;
}

.kartochka,
a.kartochka,
.spec-company-card-link,
.deal-company-card-link,
.spp-company-card-link,
.fc-card-link,
.mzr-company-card-link,
.mbr-company-card-link,
.sp-card-icon,
.supplier_card_btn,
.tr-carrier-link,
a.tr-carrier-link,
.dz-company-card-link,
.dz-card-link,
.ur-company-card-link,
.urr-contractor-card-link {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--kartochka-size);
  height: var(--kartochka-size);
  min-width: var(--kartochka-size);
  min-height: var(--kartochka-size);
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 1px solid var(--kartochka-border);
  border-radius: var(--kartochka-radius);
  background: var(--kartochka-bg);
  color: var(--kartochka-color);
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  vertical-align: middle;
}

.kartochka:hover,
a.kartochka:hover,
.spec-company-card-link:hover,
.deal-company-card-link:hover,
.spp-company-card-link:hover,
.fc-card-link:hover,
.mzr-company-card-link:hover,
.mbr-company-card-link:hover,
.sp-card-icon:hover,
.supplier_card_btn:hover,
.tr-carrier-link:hover,
.dz-company-card-link:hover,
.dz-card-link:hover,
.ur-company-card-link:hover,
.urr-contractor-card-link:hover {
  background: var(--kartochka-bg-hover);
  border-color: var(--kartochka-border-hover);
  color: var(--kartochka-color-hover);
}

.kartochka svg,
.spec-company-card-link svg,
.deal-company-card-link svg,
.spp-company-card-link svg,
.fc-card-link svg,
.mzr-company-card-link svg,
.mbr-company-card-link svg,
.sp-card-icon svg,
.supplier_card_btn svg,
.tr-carrier-link svg,
.dz-company-card-link svg,
.dz-card-link svg,
.ur-company-card-link svg,
.urr-contractor-card-link svg {
  width: var(--kartochka-icon);
  height: var(--kartochka-icon);
  display: block;
  flex-shrink: 0;
}

.kartochka.is-muted,
.sp-card-icon.is-muted {
  color: #94a3b8;
  background: #f1f5f9;
  border-color: #e2e8f0;
  pointer-events: none;
  cursor: default;
}