ng-fusion-ui/styles/styles.css

Angular data table library!

:root {
  --fu-btn-success-filled-color: var(--fu-white-color);
  --fu-btn-success-filled-hover-color: var(--fu-white-color);
  --fu-btn-success-filled-active-color: var(--fu-white-color);
  --fu-btn-success-filled-bg-color: var(--fu-green-500);
  --fu-btn-success-filled-hover-bg-color: var(--fu-green-600);
  --fu-btn-success-filled-active-bg-color: var(--fu-green-700);
  --fu-btn-success-filled-border-color: transparent;
  --fu-btn-success-filled-disabled-border-color: transparent;
  --fu-btn-warning-filled-color: var(--fu-white-color);
  --fu-btn-warning-filled-hover-color: var(--fu-white-color);
  --fu-btn-warning-filled-active-color: var(--fu-white-color);
  --fu-btn-warning-filled-bg-color: var(--fu-orange-500);
  --fu-btn-warning-filled-hover-bg-color: var(--fu-orange-600);
  --fu-btn-warning-filled-active-bg-color: var(--fu-orange-700);
  --fu-btn-warning-filled-border-color: transparent;
  --fu-btn-warning-filled-disabled-border-color: transparent;
  --fu-btn-danger-filled-color: var(--fu-white-color);
  --fu-btn-danger-filled-hover-color: var(--fu-white-color);
  --fu-btn-danger-filled-active-color: var(--fu-white-color);
  --fu-btn-danger-filled-bg-color: var(--fu-red-500);
  --fu-btn-danger-filled-hover-bg-color: var(--fu-red-600);
  --fu-btn-danger-filled-active-bg-color: var(--fu-red-700);
  --fu-btn-danger-filled-border-color: transparent;
  --fu-btn-danger-filled-disabled-border-color: transparent;
  --fu-btn-filled-disabled-color: var(--fu-neutral-400);
  --fu-btn-filled-disabled-bg-color: var(--fu-neutral-100);
  --fu-btn-success-outline-color: var(--fu-green-600);
  --fu-btn-success-outline-hover-color: var(--fu-green-700);
  --fu-btn-success-outline-active-color: var(--fu-green-800);
  --fu-btn-success-outline-bg-color: transparent;
  --fu-btn-success-outline-hover-bg-color: var(--fu-green-50);
  --fu-btn-success-outline-active-bg-color: var(--fu-green-100);
  --fu-btn-success-outline-border-color: var(--fu-green-500);
  --fu-btn-success-outline-disabled-border-color: var(--fu-green-500);
  --fu-btn-warning-outline-color: var(--fu-orange-600);
  --fu-btn-warning-outline-hover-color: var(--fu-orange-700);
  --fu-btn-warning-outline-active-color: var(--fu-orange-800);
  --fu-btn-warning-outline-bg-color: transparent;
  --fu-btn-warning-outline-hover-bg-color: var(--fu-orange-50);
  --fu-btn-warning-outline-active-bg-color: var(--fu-orange-100);
  --fu-btn-warning-outline-border-color: var(--fu-orange-500);
  --fu-btn-warning-outline-disabled-border-color: var(--fu-orange-500);
  --fu-btn-danger-outline-color: var(--fu-red-600);
  --fu-btn-danger-outline-hover-color: var(--fu-red-700);
  --fu-btn-danger-outline-active-color: var(--fu-red-800);
  --fu-btn-danger-outline-bg-color: transparent;
  --fu-btn-danger-outline-hover-bg-color: var(--fu-red-50);
  --fu-btn-danger-outline-active-bg-color: var(--fu-red-100);
  --fu-btn-danger-outline-border-color: var(--fu-red-500);
  --fu-btn-danger-outline-disabled-border-color: var(--fu-red-500);
  --fu-btn-outline-disabled-color: var(--fu-neutral-300);
  --fu-btn-outline-disabled-border-color: var(--fu-neutral-200);
  --fu-btn-success-text-color: var(--fu-green-600);
  --fu-btn-success-text-hover-color: var(--fu-green-700);
  --fu-btn-success-text-active-color: var(--fu-green-800);
  --fu-btn-success-text-bg-color: transparent;
  --fu-btn-success-text-hover-bg-color: var(--fu-green-50);
  --fu-btn-success-text-active-bg-color: var(--fu-green-100);
  --fu-btn-success-text-border-color: transparent;
  --fu-btn-success-text-disabled-border-color: transparent;
  --fu-btn-warning-text-color: var(--fu-orange-600);
  --fu-btn-warning-text-hover-color: var(--fu-orange-700);
  --fu-btn-warning-text-active-color: var(--fu-orange-800);
  --fu-btn-warning-text-bg-color: transparent;
  --fu-btn-warning-text-hover-bg-color: var(--fu-orange-50);
  --fu-btn-warning-text-active-bg-color: var(--fu-orange-100);
  --fu-btn-warning-text-border-color: transparent;
  --fu-btn-warning-text-disabled-border-color: transparent;
  --fu-btn-danger-text-color: var(--fu-red-600);
  --fu-btn-danger-text-hover-color: var(--fu-red-700);
  --fu-btn-danger-text-active-color: var(--fu-red-800);
  --fu-btn-danger-text-bg-color: transparent;
  --fu-btn-danger-text-hover-bg-color: var(--fu-red-50);
  --fu-btn-danger-text-active-bg-color: var(--fu-red-100);
  --fu-btn-danger-text-border-color: transparent;
  --fu-btn-danger-text-disabled-border-color: transparent;
  --fu-btn-text-disabled-color: var(--fu-neutral-400);
  --fu-btn-text-disabled-bg-color: var(--fu-neutral-100);
}

.dark {
  --fu-btn-primary-filled-color: var(--fu-white-color);
  --fu-btn-primary-filled-hover-color: var(--fu-white-color);
  --fu-btn-primary-filled-active-color: var(--fu-white-color);
  --fu-btn-primary-filled-bg-color: var(--fu-primary-500);
  --fu-btn-primary-filled-hover-bg-color: var(--fu-primary-600);
  --fu-btn-primary-filled-active-bg-color: var(--fu-primary-700);
  --fu-btn-primary-filled-border-color: transparent;
  --fu-btn-primary-filled-disabled-border-color: transparent;
  --fu-btn-danger-filled-color: var(--fu-white-color);
  --fu-btn-danger-filled-hover-color: var(--fu-white-color);
  --fu-btn-danger-filled-active-color: var(--fu-white-color);
  --fu-btn-danger-filled-bg-color: var(--fu-red-500);
  --fu-btn-danger-filled-hover-bg-color: var(--fu-red-600);
  --fu-btn-danger-filled-active-bg-color: var(--fu-red-700);
  --fu-btn-danger-filled-border-color: transparent;
  --fu-btn-danger-filled-disabled-border-color: transparent;
  --fu-btn-success-filled-color: var(--fu-white-color);
  --fu-btn-success-filled-hover-color: var(--fu-white-color);
  --fu-btn-success-filled-active-color: var(--fu-white-color);
  --fu-btn-success-filled-bg-color: var(--fu-green-500);
  --fu-btn-success-filled-hover-bg-color: var(--fu-green-600);
  --fu-btn-success-filled-active-bg-color: var(--fu-green-700);
  --fu-btn-success-filled-border-color: transparent;
  --fu-btn-success-filled-disabled-border-color: transparent;
  --fu-btn-warning-filled-color: var(--fu-white-color);
  --fu-btn-warning-filled-hover-color: var(--fu-white-color);
  --fu-btn-warning-filled-active-color: var(--fu-white-color);
  --fu-btn-warning-filled-bg-color: var(--fu-orange-500);
  --fu-btn-warning-filled-hover-bg-color: var(--fu-orange-600);
  --fu-btn-warning-filled-active-bg-color: var(--fu-orange-700);
  --fu-btn-warning-filled-border-color: transparent;
  --fu-btn-warning-filled-disabled-border-color: transparent;
  --fu-btn-filled-disabled-color: var(--fu-neutral-700);
  --fu-btn-filled-disabled-bg-color: var(--fu-neutral-950);
  --fu-btn-primary-outline-color: var(--fu-primary-400);
  --fu-btn-primary-outline-hover-color: var(--fu-primary-400);
  --fu-btn-primary-outline-active-color: var(--fu-primary-400);
  --fu-btn-primary-outline-bg-color: transparent;
  --fu-btn-primary-outline-hover-bg-color: color-mix(in srgb, var(--fu-primary-500), transparent 96%);
  --fu-btn-primary-outline-active-bg-color: color-mix(in srgb, var(--fu-primary-500), transparent 84%);
  --fu-btn-primary-outline-border-color: var(--fu-primary-500);
  --fu-btn-primary-outline-disabled-border-color: var(--fu-primary-500);
  --fu-btn-success-outline-color: var(--fu-green-400);
  --fu-btn-success-outline-hover-color: var(--fu-green-400);
  --fu-btn-success-outline-active-color: var(--fu-green-400);
  --fu-btn-success-outline-bg-color: transparent;
  --fu-btn-success-outline-hover-bg-color: color-mix(in srgb, var(--fu-green-500), transparent 96%);
  --fu-btn-success-outline-active-bg-color: color-mix(in srgb, var(--fu-green-500), transparent 84%);
  --fu-btn-success-outline-border-color: var(--fu-green-500);
  --fu-btn-success-outline-disabled-border-color: var(--fu-green-500);
  --fu-btn-warning-outline-color: var(--fu-orange-400);
  --fu-btn-warning-outline-hover-color: var(--fu-orange-400);
  --fu-btn-warning-outline-active-color: var(--fu-orange-400);
  --fu-btn-warning-outline-bg-color: transparent;
  --fu-btn-warning-outline-hover-bg-color: color-mix(in srgb, var(--fu-orange-500), transparent 96%);
  --fu-btn-warning-outline-active-bg-color: color-mix(in srgb, var(--fu-orange-500), transparent 84%);
  --fu-btn-warning-outline-border-color: var(--fu-orange-500);
  --fu-btn-warning-outline-disabled-border-color: var(--fu-orange-500);
  --fu-btn-danger-outline-color: var(--fu-red-400);
  --fu-btn-danger-outline-hover-color: var(--fu-red-400);
  --fu-btn-danger-outline-active-color: var(--fu-red-400);
  --fu-btn-danger-outline-bg-color: transparent;
  --fu-btn-danger-outline-hover-bg-color: color-mix(in srgb, var(--fu-red-500), transparent 96%);
  --fu-btn-danger-outline-active-bg-color: color-mix(in srgb, var(--fu-red-500), transparent 84%);
  --fu-btn-danger-outline-border-color: var(--fu-red-500);
  --fu-btn-danger-outline-disabled-border-color: var(--fu-red-500);
  --fu-btn-outline-disabled-color: var(--fu-neutral-800);
  --fu-btn-outline-disabled-border-color: var(--fu-neutral-900);
  --fu-btn-primary-text-color: var(--fu-primary-400);
  --fu-btn-primary-text-hover-color: var(--fu-primary-400);
  --fu-btn-primary-text-active-color: var(--fu-primary-400);
  --fu-btn-primary-text-bg-color: transparent;
  --fu-btn-primary-text-hover-bg-color: color-mix(in srgb, var(--fu-primary-500), transparent 96%);
  --fu-btn-primary-text-active-bg-color: color-mix(in srgb, var(--fu-primary-500), transparent 84%);
  --fu-btn-primary-text-border-color: transparent;
  --fu-btn-primary-text-disabled-border-color: transparent;
  --fu-btn-success-text-color: var(--fu-green-400);
  --fu-btn-success-text-hover-color: var(--fu-green-400);
  --fu-btn-success-text-active-color: var(--fu-green-400);
  --fu-btn-success-text-bg-color: transparent;
  --fu-btn-success-text-hover-bg-color: color-mix(in srgb, var(--fu-green-500), transparent 96%);
  --fu-btn-success-text-active-bg-color: color-mix(in srgb, var(--fu-green-500), transparent 84%);
  --fu-btn-success-text-border-color: transparent;
  --fu-btn-success-text-disabled-border-color: transparent;
  --fu-btn-warning-text-color: var(--fu-orange-400);
  --fu-btn-warning-text-hover-color: var(--fu-orange-400);
  --fu-btn-warning-text-active-color: var(--fu-orange-400);
  --fu-btn-warning-text-bg-color: transparent;
  --fu-btn-warning-text-hover-bg-color: color-mix(in srgb, var(--fu-orange-500), transparent 96%);
  --fu-btn-warning-text-active-bg-color: color-mix(in srgb, var(--fu-orange-500), transparent 84%);
  --fu-btn-warning-text-border-color: transparent;
  --fu-btn-warning-text-disabled-border-color: transparent;
  --fu-btn-danger-text-color: var(--fu-red-400);
  --fu-btn-danger-text-hover-color: var(--fu-red-400);
  --fu-btn-danger-text-active-color: var(--fu-red-400);
  --fu-btn-danger-text-bg-color: transparent;
  --fu-btn-danger-text-hover-bg-color: color-mix(in srgb, var(--fu-red-500), transparent 96%);
  --fu-btn-danger-text-active-bg-color: color-mix(in srgb, var(--fu-red-500), transparent 84%);
  --fu-btn-danger-text-border-color: transparent;
  --fu-btn-danger-text-disabled-border-color: transparent;
  --fu-btn-text-disabled-color: var(--fu-neutral-700);
  --fu-btn-text-disabled-bg-color: var(--fu-neutral-950);
}

.fu-btn {
  font-weight: 500;
  padding: 0 0.75rem;
  border-radius: 0.25rem;
  cursor: pointer;
  transition: background-color 0.15s ease-in-out;
  display: inline-flex;
  align-items: center;
  height: 2rem;
  min-width: 5rem;
  place-content: center;
  font-family: "Roboto", sans-serif;
}
.fu-btn[compact] {
  height: 1.5rem;
  font-size: 0.7rem;
  text-transform: uppercase;
}
.fu-btn[compact] .fu-icon-container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.fu-btn[compact] .fu-icon-container svg {
  width: 1rem;
  height: 1rem;
}
.fu-btn[rounded] {
  border-radius: 1rem;
}
.fu-btn[icon] {
  width: 2rem;
  min-width: 2rem;
  padding: 0;
}
.fu-btn[compact][icon] {
  width: 1.5rem;
  min-width: 1.5rem;
}

.fu-btn-filled.fu-btn-primary, .fu-btn-filled.fu-btn-regular {
  background-color: var(--fu-btn-primary-filled-bg-color, var(--fu-primary-500));
  border: 1.5px solid var(--fu-btn-primary-filled-border-color, transparent);
  color: var(--fu-btn-primary-filled-color, var(--fu-white-color));
}
.fu-btn-filled.fu-btn-primary:hover, .fu-btn-filled.fu-btn-regular:hover {
  background-color: var(--fu-btn-primary-filled-hover-bg-color, var(--fu-primary-600));
  color: var(--fu-btn-primary-filled-hover-color, var(--fu-white-color));
}
.fu-btn-filled.fu-btn-primary:active, .fu-btn-filled.fu-btn-regular:active {
  background-color: var(--fu-btn-primary-filled-active-bg-color, var(--fu-primary-700));
  color: var(--fu-btn-primary-filled-active-color, var(--fu-white-color));
}
.fu-btn-filled.fu-btn-danger {
  background-color: var(--fu-btn-danger-filled-bg-color);
  border: 1.5px solid var(--fu-btn-danger-filled-border-color);
  color: var(--fu-btn-danger-filled-color);
}
.fu-btn-filled.fu-btn-danger:hover {
  background-color: var(--fu-btn-danger-filled-hover-bg-color);
  color: var(--fu-btn-danger-filled-hover-color);
}
.fu-btn-filled.fu-btn-danger:active {
  background-color: var(--fu-btn-danger-filled-active-bg-color);
  color: var(--fu-btn-danger-filled-active-color);
}
.fu-btn-filled.fu-btn-success {
  background-color: var(--fu-btn-success-filled-bg-color);
  border: 1.5px solid var(--fu-btn-success-filled-border-color);
  color: var(--fu-btn-success-filled-color);
}
.fu-btn-filled.fu-btn-success:hover {
  background-color: var(--fu-btn-success-filled-hover-bg-color);
  color: var(--fu-btn-success-filled-hover-color);
}
.fu-btn-filled.fu-btn-success:active {
  background-color: var(--fu-btn-success-filled-active-bg-color);
  color: var(--fu-btn-success-filled-active-color);
}
.fu-btn-filled.fu-btn-warning {
  background-color: var(--fu-btn-warning-filled-bg-color);
  border: 1.5px solid var(--fu-btn-warning-filled-border-color);
  color: var(--fu-btn-warning-filled-color);
}
.fu-btn-filled.fu-btn-warning:hover {
  background-color: var(--fu-btn-warning-filled-hover-bg-color);
  color: var(--fu-btn-warning-filled-hover-color);
}
.fu-btn-filled.fu-btn-warning:active {
  background-color: var(--fu-btn-warning-filled-active-bg-color);
  color: var(--fu-btn-warning-filled-active-color);
}
.fu-btn-filled[disabled] {
  pointer-events: none;
  background-color: var(--fu-btn-filled-disabled-bg-color);
  color: var(--fu-btn-filled-disabled-color);
}

.fu-btn-outline {
  border: 1.5px solid;
}
.fu-btn-outline.fu-btn-primary, .fu-btn-outline.fu-btn-regular {
  background-color: var(--fu-btn-primary-outline-bg-color, transparent);
  border-color: var(--fu-btn-primary-outline-border-color, var(--fu-primary-500));
  color: var(--fu-btn-primary-outline-color, var(--fu-primary-600));
}
.fu-btn-outline.fu-btn-primary:hover, .fu-btn-outline.fu-btn-regular:hover {
  background-color: var(--fu-btn-primary-outline-hover-bg-color, var(--fu-primary-50));
  color: var(--fu-btn-primary-outline-hover-color, var(--fu-primary-600));
}
.fu-btn-outline.fu-btn-primary:active, .fu-btn-outline.fu-btn-regular:active {
  background-color: var(--fu-btn-primary-outline-active-bg-color, var(--fu-primary-100));
  color: var(--fu-btn-primary-outline-active-color, var(--fu-primary-600));
}
.fu-btn-outline.fu-btn-success {
  background-color: var(--fu-btn-success-outline-bg-color);
  border-color: var(--fu-btn-success-outline-border-color);
  color: var(--fu-btn-success-outline-color);
}
.fu-btn-outline.fu-btn-success:hover {
  background-color: var(--fu-btn-success-outline-hover-bg-color);
  color: var(--fu-btn-success-outline-hover-color);
}
.fu-btn-outline.fu-btn-success:active {
  background-color: var(--fu-btn-success-outline-active-bg-color);
  color: var(--fu-btn-success-outline-active-color);
}
.fu-btn-outline.fu-btn-warning {
  background-color: var(--fu-btn-warning-outline-bg-color);
  border-color: var(--fu-btn-warning-outline-border-color);
  color: var(--fu-btn-warning-outline-color);
}
.fu-btn-outline.fu-btn-warning:hover {
  background-color: var(--fu-btn-warning-outline-hover-bg-color);
  color: var(--fu-btn-warning-outline-hover-color);
}
.fu-btn-outline.fu-btn-warning:active {
  background-color: var(--fu-btn-warning-outline-active-bg-color);
  color: var(--fu-btn-warning-outline-active-color);
}
.fu-btn-outline.fu-btn-danger {
  background-color: var(--fu-btn-danger-outline-bg-color);
  border-color: var(--fu-btn-danger-outline-border-color);
  color: var(--fu-btn-danger-outline-color);
}
.fu-btn-outline.fu-btn-danger:hover {
  background-color: var(--fu-btn-danger-outline-hover-bg-color);
  color: var(--fu-btn-danger-outline-hover-color);
}
.fu-btn-outline.fu-btn-danger:active {
  background-color: var(--fu-btn-danger-outline-active-bg-color);
  color: var(--fu-btn-danger-outline-active-color);
}
.fu-btn-outline[disabled] {
  pointer-events: none;
  color: var(--fu-btn-outline-disabled-color);
  border-color: var(--fu-btn-outline-disabled-border-color);
}

.fu-btn-text {
  border: 1.5px solid var(--fu-btn-primary-text-border-color, transparent);
}
.fu-btn-text.fu-btn-primary, .fu-btn-text.fu-btn-regular {
  background-color: var(--fu-btn-primary-text-bg-color, transparent);
  color: var(--fu-btn-primary-text-color, var(--fu-primary-600));
}
.fu-btn-text.fu-btn-primary:hover, .fu-btn-text.fu-btn-regular:hover {
  background-color: var(--fu-btn-primary-text-hover-bg-color, var(--fu-primary-50));
}
.fu-btn-text.fu-btn-primary:active, .fu-btn-text.fu-btn-regular:active {
  background-color: var(--fu-btn-primary-text-active-bg-color, var(--fu-primary-100));
}
.fu-btn-text.fu-btn-success {
  background-color: var(--fu-btn-success-text-bg-color);
  color: var(--fu-btn-success-text-color);
}
.fu-btn-text.fu-btn-success:hover {
  background-color: var(--fu-btn-success-text-hover-bg-color);
}
.fu-btn-text.fu-btn-success:active {
  background-color: var(--fu-btn-success-text-active-bg-color);
}
.fu-btn-text.fu-btn-warning {
  background-color: var(--fu-btn-warning-text-bg-color);
  color: var(--fu-btn-warning-text-color);
}
.fu-btn-text.fu-btn-warning:hover {
  background-color: var(--fu-btn-warning-text-hover-bg-color);
}
.fu-btn-text.fu-btn-warning:active {
  background-color: var(--fu-btn-warning-text-active-bg-color);
}
.fu-btn-text.fu-btn-danger {
  background-color: var(--fu-btn-danger-text-bg-color);
  color: var(--fu-btn-danger-text-color);
}
.fu-btn-text.fu-btn-danger:hover {
  background-color: var(--fu-btn-danger-text-hover-bg-color);
}
.fu-btn-text.fu-btn-danger:active {
  background-color: var(--fu-btn-danger-text-active-bg-color);
}
.fu-btn-text[raised] {
  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
}
.fu-btn-text[disabled] {
  pointer-events: none;
  color: var(--fu-btn-text-disabled-color);
  background-color: transparent;
  box-shadow: none;
}
.fu-btn-text[raised][disabled] {
  background-color: var(--fu-btn-text-disabled-bg-color, transparent);
  box-shadow: none;
}

:root {
  --fu-table-bg-color: var(--fu-bg-color);
  --fu-table-text-color: var(--fu-text-color);
  --fu-table-border-color: var(--fu-border-color);
  --fu-table-highlight-bg-color: var(--fu-highlight-bg-color);
  --fu-table-highlight-color: var(--fu-highlight-color);
  --fu-table-skeleton-color: var(--fu-skeleton-color);
  --fu-table-header-bg-color: hsl(0, 0%, 96%);
  --fu-table-striped-row-bg-color: hsl(0, 0%, 98%);
  --fu-table-bg-hover-color: hsla(0, 0%, 0%, 0.04);
  --fu-table-sort-bg-color: hsla(0, 0%, 0%, 0.03);
  --fu-table-edit-input-bg-color: hsl(0, 0%, 100%);
  --fu-tree-item-bg-color: hsl(0, 0%, 98%);
  --fu-tree-bg-color: var(--fu-bg-color);
  --fu-tree-border-color: var(--fu-border-color);
  --fu-tree-bg-hover-color: hsla(0, 0%, 0%, 0.04);
}

.dark {
  --fu-table-bg-color: #121212;
  --fu-table-text-color: #c9c7c7;
  --fu-table-border-color: #3f3f46;
  --fu-table-highlight-bg-color: hsl(60, 53%, 59%);
  --fu-table-highlight-color: var(--fu-highlight-color);
  --fu-table-skeleton-color: var(--fu-skeleton-color);
  --fu-table-header-bg-color: #18181b;
  --fu-table-striped-row-bg-color: #18181b;
  --fu-table-bg-hover-color: hsla(0, 0%, 0%, 0.3);
  --fu-table-sort-bg-color: hsla(0, 0%, 0%, 0.3);
  --fu-table-edit-input-bg-color: hsl(240, 13%, 14%);
  --fu-tree-item-bg-color: #18181b;
  --fu-tree-bg-color: #121212;
  --fu-tree-border-color: #3f3f46;
  --fu-tree-bg-hover-color: hsla(0, 0%, 0%, 0.3);
}

:root {
  --fu-bg-color: #ffffff;
  --fu-text-color: #000000;
  --fu-border-color: #e8e8e8;
  --fu-highlight-bg-color: #ffff00;
  --fu-highlight-color: #000000;
  --fu-skeleton-color: #bababa;
  --fu-white-color: #ffffff;
  --fu-black-color: #000000;
  --fu-primary-50: var(--fu-azure-50);
  --fu-primary-100: var(--fu-azure-100);
  --fu-primary-200: var(--fu-azure-200);
  --fu-primary-300: var(--fu-azure-300);
  --fu-primary-400: var(--fu-azure-400);
  --fu-primary-500: var(--fu-azure-500);
  --fu-primary-600: var(--fu-azure-600);
  --fu-primary-700: var(--fu-azure-700);
  --fu-primary-800: var(--fu-azure-800);
  --fu-primary-900: var(--fu-azure-900);
  --fu-primary-950: var(--fu-azure-950);
  --fu-azure-50: #eff5ff;
  --fu-azure-100: #dbe8fe;
  --fu-azure-200: #bfd7fe;
  --fu-azure-300: #93bbfd;
  --fu-azure-400: #609afa;
  --fu-azure-500: #3b82f6;
  --fu-azure-600: #2570eb;
  --fu-azure-700: #1d64d8;
  --fu-azure-800: #1e55af;
  --fu-azure-900: #1e478a;
  --fu-azure-950: #172e54;
  --fu-purple-50: #f7f3ff;
  --fu-purple-100: #efe9fe;
  --fu-purple-200: #e2d6fe;
  --fu-purple-300: #cbb5fd;
  --fu-purple-400: #ad8bfa;
  --fu-purple-500: #8b5cf6;
  --fu-purple-600: #713aed;
  --fu-purple-700: #5e28d9;
  --fu-purple-800: #4e21b6;
  --fu-purple-900: #421d95;
  --fu-purple-950: #2a1065;
  --fu-pink-50: #fbf7fd;
  --fu-pink-100: #f5ecfb;
  --fu-pink-200: #ecdcf8;
  --fu-pink-300: #dec1f1;
  --fu-pink-400: #ca99e7;
  --fu-pink-500: #b472da;
  --fu-pink-600: #a155ca;
  --fu-pink-700: #8a41af;
  --fu-pink-800: #743990;
  --fu-pink-900: #5f2f74;
  --fu-pink-950: #401853;
  --fu-red-50: #fef2f2;
  --fu-red-100: #fee2e2;
  --fu-red-200: #fecaca;
  --fu-red-300: #fca5a5;
  --fu-red-400: #f87171;
  --fu-red-500: #ef4444;
  --fu-red-600: #dc2626;
  --fu-red-700: #b91c1c;
  --fu-red-800: #991b1b;
  --fu-red-900: #7f1d1d;
  --fu-red-950: #450a0a;
  --fu-green-50: #f0fdf5;
  --fu-green-100: #dcfce8;
  --fu-green-200: #bbf7d1;
  --fu-green-300: #86efad;
  --fu-green-400: #4ade80;
  --fu-green-500: #22c55e;
  --fu-green-600: #16a34a;
  --fu-green-700: #15803c;
  --fu-green-800: #166533;
  --fu-green-900: #14532b;
  --fu-green-950: #052e14;
  --fu-orange-50: #fff4ed;
  --fu-orange-100: #ffe6d5;
  --fu-orange-200: #feccaa;
  --fu-orange-300: #fdac74;
  --fu-orange-400: #fb8a3c;
  --fu-orange-500: #f97316;
  --fu-orange-600: #ea670c;
  --fu-orange-700: #c2570c;
  --fu-orange-800: #9a4a12;
  --fu-orange-900: #7c3d12;
  --fu-orange-950: #432007;
  --fu-neutral-50: #f6f6f6;
  --fu-neutral-100: #e7e7e7;
  --fu-neutral-200: #d1d1d1;
  --fu-neutral-300: #b0b0b0;
  --fu-neutral-400: #888888;
  --fu-neutral-500: #737373;
  --fu-neutral-600: #5d5d5d;
  --fu-neutral-700: #4f4f4f;
  --fu-neutral-800: #454545;
  --fu-neutral-900: #3d3d3d;
  --fu-neutral-950: #262626;
}

.light {
  --fu-bg-color: #ffffff;
  --fu-text-color: #000000;
  --fu-border-color: #e8e8e8;
  --fu-highlight-bg-color: #ffff00;
  --fu-highlight-color: #000000;
  --fu-skeleton-color: #bababa;
  --fu-white-color: #ffffff;
  --fu-black-color: #000000;
  --fu-primary-50: var(--fu-azure-50);
  --fu-primary-100: var(--fu-azure-100);
  --fu-primary-200: var(--fu-azure-200);
  --fu-primary-300: var(--fu-azure-300);
  --fu-primary-400: var(--fu-azure-400);
  --fu-primary-500: var(--fu-azure-500);
  --fu-primary-600: var(--fu-azure-600);
  --fu-primary-700: var(--fu-azure-700);
  --fu-primary-800: var(--fu-azure-800);
  --fu-primary-900: var(--fu-azure-900);
  --fu-primary-950: var(--fu-azure-950);
}

.dark {
  --fu-bg-color: #18181b;
  --fu-text-color: #ffffff;
  --fu-border-color: #3f3f46;
  --fu-highlight-bg-color: #ffff00;
  --fu-highlight-color: #000000;
  --fu-skeleton-color: #34383c;
  --fu-quick-jump-border-color: var(--fu-primary-500);
  --fu-primary-50: #fbf7fd;
  --fu-primary-100: #f5ecfb;
  --fu-primary-200: #ecdcf8;
  --fu-primary-300: #dec1f1;
  --fu-primary-400: #ca99e7;
  --fu-primary-500: #b472da;
  --fu-primary-600: #a155ca;
  --fu-primary-700: #8a41af;
  --fu-primary-800: #743990;
  --fu-primary-900: #5f2f74;
  --fu-primary-950: #401853;
}

:root {
  --fu-font-family: "Roboto", sans-serif;
  --fu-font-size: 0.9rem;
  --fu-border-radius: 0;
  /* Core surfaces */
  --fu-surface: oklch(0.99 0.01 250);
  --fu-surface-muted: oklch(0.96 0.015 250);
  --fu-surface-subtle: oklch(0.94 0.01 250);
  /* Text */
  --fu-text: oklch(0.22 0.04 255);
  --fu-text-muted: oklch(0.45 0.03 255);
  /* Borders */
  --fu-border: oklch(0.88 0.015 255);
  /* Accent / primary */
  --fu-accent: oklch(0.62 0.12 255);
  /* Semantic states */
  --fu-success: oklch(0.65 0.12 145); /* green */
  --fu-warning: oklch(0.78 0.14 75); /* orange */
  --fu-danger: oklch(0.58 0.18 30); /* red */
  --fu-pending: oklch(0.72 0.04 250); /* neutral / info */
}

.dark {
  --fu-surface: oklch(0.18 0.02 255);
  --fu-text: oklch(0.92 0.02 255);
  --fu-border: oklch(0.32 0.02 255);
  --fu-skeleton-base: color-mix(
    in srgb,
    var(--fu-table-row-bg) 90%,
    var(--fu-text) 10%
  );
  --fu-skeleton-highlight: color-mix(
    in srgb,
    var(--fu-table-row-bg) 70%,
    var(--fu-text) 30%
  );
}

.fu-button {
  /* primary */
  --fu-btn-primary-fg: oklch(from var(--fu-accent) l c h);
  --fu-btn-primary-border: oklch(from var(--fu-accent) calc(l - 0.1) c h);
  --fu-btn-primary-bg: oklch(from var(--fu-surface-muted) l c h);
  /* success */
  --fu-btn-success-fg: oklch(from var(--fu-success) l c h);
  --fu-btn-success-border: oklch(from var(--fu-success) calc(l - 0.1) c h);
  --fu-btn-success-bg: oklch(from var(--fu-surface-muted) l c h);
  /* warning */
  --fu-btn-warning-fg: oklch(from var(--fu-warning) l c h);
  --fu-btn-warning-border: oklch(from var(--fu-warning) calc(l - 0.1) c h);
  --fu-btn-warning-bg: oklch(from var(--fu-surface-muted) l c h);
  /* danger */
  --fu-btn-danger-fg: oklch(from var(--fu-danger) l c h);
  --fu-btn-danger-border: oklch(from var(--fu-danger) calc(l - 0.1) c h);
  --fu-btn-danger-bg: oklch(from var(--fu-surface-muted) l c h);
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font: inherit;
  cursor: pointer;
  padding: 0 0.75rem;
  height: 2rem;
  background: var(--fu-surface-muted);
  border-radius: var(--fu-border-radius);
  border: 1px solid var(--fu-border);
  color: var(--fu-accent);
  transition: background-color 0.15s, border-color 0.15s;
}
.fu-button:hover {
  background-color: var(--fu-surface-subtle);
}
.fu-button:focus-visible {
  outline: 1px solid var(--fu-accent);
  outline-offset: -1px;
  box-shadow: 0 0 0 2px color-mix(in oklch, var(--fu-accent) 40%, transparent);
}
.fu-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Primary */
.fu-button--primary {
  color: var(--fu-btn-primary-fg);
  border-color: var(--fu-btn-primary-border);
  background-color: var(--fu-btn-primary-bg);
}
.fu-button--primary:hover {
  background-color: oklch(from var(--fu-btn-primary-bg) calc(l - 0.04) c h);
}

/* Success */
.fu-button--success {
  color: var(--fu-btn-success-fg);
  border-color: var(--fu-btn-success-border);
  background-color: var(--fu-btn-success-bg);
}
.fu-button--success:hover {
  background-color: oklch(from var(--fu-btn-success-bg) calc(l - 0.04) c h);
}

/* Warning */
.fu-button--warning {
  color: var(--fu-btn-warning-fg);
  border-color: var(--fu-btn-warning-border);
  background-color: var(--fu-btn-warning-bg);
}
.fu-button--warning:hover {
  background-color: oklch(from var(--fu-btn-warning-bg) calc(l - 0.04) c h);
}

/* Danger */
.fu-button--danger {
  color: var(--fu-btn-danger-fg);
  border-color: var(--fu-btn-danger-border);
  background-color: var(--fu-btn-danger-bg);
}
.fu-button--danger:hover {
  background-color: oklch(from var(--fu-btn-danger-bg) calc(l - 0.04) c h);
}

.fu-button--icon {
  width: 2rem;
  height: 2rem;
  padding: 0;
}

.dark {
  --fu-surface: oklch(0.18 0.02 255);
  --fu-text: oklch(0.92 0.02 255);
  --fu-border: oklch(0.32 0.02 255);
  --fu-surface-muted: oklch(0.22 0.03 255);
  --fu-surface-subtle: oklch(0.18 0.02 255);
  --fu-accent: oklch(0.63 0.17 330);
  /* semantic stays semantic */
  --fu-success: oklch(0.72 0.12 145);
  --fu-warning: oklch(0.8 0.14 75);
  --fu-danger: oklch(0.65 0.18 30);
}

/*# sourceMappingURL=styles.css.map */