@font-face {
  font-family: "host-icomoon";
  src: url("/assets/ssb/fonts/icomoon.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

.host-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 4.25rem;
  height: 4.25rem;
  color: var(--accent);
  line-height: 1;
}

.host-ico::before {
  font-family: "host-icomoon";
  font-size: 3.25rem;
  font-style: normal;
  font-weight: normal;
  speak: never;
  -webkit-font-smoothing: antialiased;
}

.host-ico--backup::before { content: "\f24d"; }
.host-ico--cron::before { content: "\f017"; }
.host-ico--ssl::before { content: "\f23e"; }
.host-ico--antivirus::before { content: "\f21b"; }
.host-ico--cms::before { content: "\f233"; }
.host-ico--php::before { content: "\f121"; }
.host-ico--support::before { content: "\ebdb"; }
.host-ico--flex::before { content: "\e91a"; }

/* Tipologie hosting (SVG mask — icone semantiche server/OS/cloud) */
.host-ico--linux::before,
.host-ico--windows::before,
.host-ico--vps::before,
.host-ico--dedicated::before {
  content: none;
}

.host-ico--linux,
.host-ico--windows,
.host-ico--vps,
.host-ico--dedicated {
  color: transparent;
  background-color: var(--accent);
  -webkit-mask-position: center;
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.host-ico--linux {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 4h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm1 3v2h2V7H6zm0 4v6h10v-6H6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M5 4h14a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1zm1 3v2h2V7H6zm0 4v6h10v-6H6z'/%3E%3C/svg%3E");
}

.host-ico--windows {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 5.5 10.5 4.5V11H3V5.5zm0 7.5h7.5v6.5L3 18.5V13zm9.5-8.5L21 4v7h-8.5V4zm0 8.5H21v7l-8.5-1.5V12.5z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M3 5.5 10.5 4.5V11H3V5.5zm0 7.5h7.5v6.5L3 18.5V13zm9.5-8.5L21 4v7h-8.5V4zm0 8.5H21v7l-8.5-1.5V12.5z'/%3E%3C/svg%3E");
}

.host-ico--vps {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 5a4.5 4.5 0 0 0-4.4 3.5A3.5 3.5 0 0 0 6 12h12a3.5 3.5 0 0 0 3.4-4.5A4.5 4.5 0 0 0 17 5h-1.1A5 5 0 0 0 7.2 5.3 4.5 4.5 0 0 0 6 5zm0 7a5 5 0 0 0-5 4.5A5 5 0 0 0 6 22h12a5 5 0 0 0 5-5.5A5 5 0 0 0 18 12H6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M6 5a4.5 4.5 0 0 0-4.4 3.5A3.5 3.5 0 0 0 6 12h12a3.5 3.5 0 0 0 3.4-4.5A4.5 4.5 0 0 0 17 5h-1.1A5 5 0 0 0 7.2 5.3 4.5 4.5 0 0 0 6 5zm0 7a5 5 0 0 0-5 4.5A5 5 0 0 0 6 22h12a5 5 0 0 0 5-5.5A5 5 0 0 0 18 12H6z'/%3E%3C/svg%3E");
}

.host-ico--dedicated {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 8h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2zm2 2h2v2H6v-2zm0-8h2v2H6V6z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M4 4h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2zm0 8h16a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2zm2 2h2v2H6v-2zm0-8h2v2H6V6z'/%3E%3C/svg%3E");
}