:root {
  --ui-icon-size: 16px;
}

[data-ui-icon] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
}

[data-ui-icon]::before {
  width: var(--ui-icon-size);
  height: var(--ui-icon-size);
  flex: 0 0 var(--ui-icon-size);
  background: currentColor;
  content: "";
  mask: var(--ui-icon) center / contain no-repeat;
  -webkit-mask: var(--ui-icon) center / contain no-repeat;
}

[data-ui-icon="search"] {
  --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m16.5 16.5 4 4' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

[data-ui-icon="download"] {
  --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m0 0 5-5m-5 5-5-5M5 21h14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-ui-icon="info"] {
  --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M12 11v6M12 7.5v.1' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

[data-ui-icon="filter"] {
  --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5h16l-6.2 7.1V19l-3.6-2v-4.9z' fill='none' stroke='black' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-ui-icon="table"] {
  --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='4' width='18' height='16' rx='2' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M3 9h18M8 9v11M11 13h7M11 17h7' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3Ccircle cx='5.5' cy='13' r='1' fill='black'/%3E%3Ccircle cx='5.5' cy='17' r='1' fill='black'/%3E%3C/svg%3E");
}

[data-ui-icon="zoom"] {
  --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='m15.5 15.5 5 5M10.5 7.5v6M7.5 10.5h6' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
}

[data-ui-icon="home"] {
  --ui-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m3.5 10.5 8.5-7 8.5 7V21h-6v-6h-5v6h-6z' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

[data-ui-icon]:focus-visible {
  outline: 3px solid rgb(15 107 91 / 24%);
  outline-offset: 2px;
}