@larva.io/webcomponents/dist/collection/components/internal/node/node.css

Fentrica SmartUnits WebComponents package

slot-fb[hidden], slot[hidden] {
  display: initial !important;
}

/**
  * @prop --lar-node-box-height: Node Element main icon box height
  * @prop --lar-node-small-box-height: Node Small Element main icon box height
  * @prop --lar-node-box-border-radius: Node Element main icon box corner radius
  * @prop --lar-node-small-box-border-radius: Node small Element main icon box corner radius

  * @prop --lar-node-icon-padding-top: Main icon wrapper padding
  * @prop --lar-node-icon-padding-right: Main icon wrapper padding
  * @prop --lar-node-icon-padding-bottom: Main icon wrapper padding
  * @prop --lar-node-icon-padding-left: Main icon wrapper padding
  * @prop --lar-node-small-icon-padding-top: Small Node Main icon wrapper padding
  * @prop --lar-node-small-icon-padding-right: Small Node Main icon wrapper padding
  * @prop --lar-node-small-icon-padding-bottom: Small Node Main icon wrapper padding
  * @prop --lar-node-small-icon-padding-left: Small Node Main icon wrapper padding

  * @prop --lar-node-icon-border-radius: Main box icon wrapper borer radius
  * @prop --lar-node-icon-size: Main icon width/height
  * @prop --lar-node-small-icon-size: Small Node Main icon width/height

  * @prop --lar-node-icon-small-padding-top: Small icon padding
  * @prop --lar-node-icon-small-padding-right: Small icon padding
  * @prop --lar-node-icon-small-padding-bottom: Small icon padding
  * @prop --lar-node-icon-small-padding-left: Small icon padding

  * @prop --lar-node-icon-small-border-radius: Small icon border radius
  * @prop --lar-node-icon-small-border-color: Small icon border color (defaults to background)
  * @prop --lar-node-icon-small-background-color: Small icon background color (defaults to node background)
  * @prop --lar-node-icon-small-border-style: Small icon border style
  * @prop --lar-node-icon-small-border-width: Small icon border width
  * @prop --lar-node-icon-small-size: Small icon width/height

  * @prop --lar-node-icon-small-top: Small icon absolute position top
  * @prop --lar-node-icon-small-right: Small icon absolute position right
  * @prop --lar-node-icon-small-bottom: Small icon absolute position bottom
  * @prop --lar-node-icon-small-left: Small icon absolute position left

  * @prop --lar-node-margin-top: Node Element margin
  * @prop --lar-node-margin-right: Node Element margin
  * @prop --lar-node-margin-bottom: Node Element margin
  * @prop --lar-node-margin-left: Node Element margin
  */
:host {
  min-width: 8rem;
  display: block;
  user-select: none;
  position: relative;
}

:host(.lar-node-disabled) {
  pointer-events: none;
  opacity: 0.2;
  filter: grayscale(0.5);
}

:host(.lar-node-loading) {
  pointer-events: none;
}
:host(.lar-node-loading) .lar-icon-small {
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.6;
    transform: scale(0.95);
  }
}
:host(.lar-node-small) .lar-node-box {
  border-radius: var(--lar-node-small-box-border-radius, 0.5rem);
  text-align: left;
  height: var(--lar-node-small-box-height, 4rem);
  box-sizing: border-box;
}
:host(.lar-node-small) .lar-node-box:before {
  display: none;
}
:host(.lar-node-small) .lar-icon-big {
  padding: var(--lar-node-small-icon-padding-top, 0.5rem) var(--lar-node-small-icon-padding-right, 0.5rem) var(--lar-node-small-icon-padding-bottom, 0.5rem) var(--lar-node-small-icon-padding-left, 0.5rem);
  border-radius: var(--lar-node-icon-border-radius, 50%);
  width: var(--lar-node-small-icon-size, 1.8rem);
  height: var(--lar-node-small-icon-size, 1.8rem);
  display: inline-block;
  margin-right: 0.5rem;
  margin-left: 0.5rem;
}
:host(.lar-node-small) .lar-node-middle {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: left;
}
:host(.lar-node-small) .lar-value-badge {
  position: static;
  margin-left: auto;
  margin-right: 0.5rem;
}

.titles-slot:empty {
  display: none;
}

.lar-node-box {
  border-radius: var(--lar-node-box-border-radius, 0.5rem);
  position: relative;
  cursor: pointer;
  overflow: visible;
  background: var(--lar-background-color, #000);
  min-height: 8rem;
}

.lar-node-content {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 2rem 1rem 1rem 1rem;
  min-height: 4.25rem;
  position: relative;
  border-radius: 1rem;
}
@media (max-width: 576px) {
  .lar-node-content {
    flex-wrap: wrap;
    align-items: center;
  }
}

.lar-icon-main {
  flex-shrink: 0;
  width: 2.75rem;
  height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 50%;
}
.lar-icon-main lar-icon {
  width: 1.5rem;
  height: 1.5rem;
}

.lar-icon-big {
  padding: var(--lar-node-icon-padding-top, 1.2rem) var(--lar-node-icon-padding-right, 1.2rem) var(--lar-node-icon-padding-bottom, 1.2rem) var(--lar-node-icon-padding-left, 1.2rem);
  border-radius: var(--lar-node-icon-border-radius, 50%);
  width: var(--lar-node-icon-size, 3rem);
  height: var(--lar-node-icon-size, 3rem);
  display: inline-block;
  background: rgba(0, 0, 0, 0.03);
  position: relative;
  z-index: 1;
}

.lar-node-titles-wrapper {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.125rem;
  padding-right: 0.5rem;
}

.lar-node-right {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}
.lar-node-right .titles-slot {
  position: static;
  top: auto;
  right: auto;
}
@media (max-width: 576px) {
  .lar-node-right {
    width: 100%;
    margin-left: 0;
    margin-top: -0.25rem;
    justify-content: flex-end;
  }
}

.lar-node-middle {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 4rem;
}

.lar-value-badge {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.5rem;
  background: rgba(0, 0, 0, 0.06);
  border-radius: 0.5rem;
  z-index: 10;
  max-width: 50%;
  margin-left: 0.75rem;
}
@media (max-width: 576px) {
  .lar-value-badge {
    top: 0.625rem;
    right: 0.625rem;
    max-width: 45%;
    margin-left: 1rem;
  }
}

.lar-value-badge:has(.lar-icon-small):not(:has(.lar-value)) {
  padding: 0.25rem;
  background: transparent;
}

.lar-value-badge .lar-icon-small {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
}
.lar-value-badge .lar-icon-small lar-icon {
  width: 100%;
  height: 100%;
}

.lar-value-badge .lar-value {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden !important;
  text-overflow: ellipsis;
  line-height: 1.2;
  flex: 1;
  min-width: 0;
}
@media (max-width: 576px) {
  .lar-value-badge .lar-value {
    font-size: 0.8125rem;
  }
}

.lar-icon-small lar-icon, .lar-icon-big lar-icon {
  display: block;
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

.lar-icon-small:empty, .lar-icon-big:empty {
  display: none !important;
}

.spacer {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.defaultslot, .defaultslotelements {
  display: none;
}

/* really small phones */
@media (max-width: 320px) {
  :host {
    max-width: 100%;
  }
}
:host(.lar-color-primary) .lar-node-box lar-icon {
  fill: var(--lar-color-primary, #780bb7) !important;
  stroke: var(--lar-color-primary, #780bb7) !important;
}

:host(.lar-color-primary) .lar-icon-big lar-icon {
  fill: var(--lar-color-primary, #780bb7) !important;
  stroke: var(--lar-color-primary, #780bb7) !important;
}

:host(.lar-node-small.lar-color-primary) .lar-icon-big lar-icon {
  fill: var(--lar-color-primary, #780bb7) !important;
  stroke: var(--lar-color-primary, #780bb7) !important;
}

:host(.lar-color-secondary) .lar-node-box lar-icon {
  fill: var(--lar-color-secondary, #7fb800) !important;
  stroke: var(--lar-color-secondary, #7fb800) !important;
}

:host(.lar-color-secondary) .lar-icon-big lar-icon {
  fill: var(--lar-color-secondary, #7fb800) !important;
  stroke: var(--lar-color-secondary, #7fb800) !important;
}

:host(.lar-node-small.lar-color-secondary) .lar-icon-big lar-icon {
  fill: var(--lar-color-secondary, #7fb800) !important;
  stroke: var(--lar-color-secondary, #7fb800) !important;
}

:host(.lar-color-tertiary) .lar-node-box lar-icon {
  fill: var(--lar-color-tertiary, #00a6ed) !important;
  stroke: var(--lar-color-tertiary, #00a6ed) !important;
}

:host(.lar-color-tertiary) .lar-icon-big lar-icon {
  fill: var(--lar-color-tertiary, #00a6ed) !important;
  stroke: var(--lar-color-tertiary, #00a6ed) !important;
}

:host(.lar-node-small.lar-color-tertiary) .lar-icon-big lar-icon {
  fill: var(--lar-color-tertiary, #00a6ed) !important;
  stroke: var(--lar-color-tertiary, #00a6ed) !important;
}

:host(.lar-color-success) .lar-node-box lar-icon {
  fill: var(--lar-color-success, #7fb800) !important;
  stroke: var(--lar-color-success, #7fb800) !important;
}

:host(.lar-color-success) .lar-icon-big lar-icon {
  fill: var(--lar-color-success, #7fb800) !important;
  stroke: var(--lar-color-success, #7fb800) !important;
}

:host(.lar-node-small.lar-color-success) .lar-icon-big lar-icon {
  fill: var(--lar-color-success, #7fb800) !important;
  stroke: var(--lar-color-success, #7fb800) !important;
}

:host(.lar-color-warning) .lar-node-box lar-icon {
  fill: var(--lar-color-warning, #ffb400) !important;
  stroke: var(--lar-color-warning, #ffb400) !important;
}

:host(.lar-color-warning) .lar-icon-big lar-icon {
  fill: var(--lar-color-warning, #ffb400) !important;
  stroke: var(--lar-color-warning, #ffb400) !important;
}

:host(.lar-node-small.lar-color-warning) .lar-icon-big lar-icon {
  fill: var(--lar-color-warning, #ffb400) !important;
  stroke: var(--lar-color-warning, #ffb400) !important;
}

:host(.lar-color-danger) .lar-node-box lar-icon {
  fill: var(--lar-color-danger, #f6511d) !important;
  stroke: var(--lar-color-danger, #f6511d) !important;
}

:host(.lar-color-danger) .lar-icon-big lar-icon {
  fill: var(--lar-color-danger, #f6511d) !important;
  stroke: var(--lar-color-danger, #f6511d) !important;
}

:host(.lar-node-small.lar-color-danger) .lar-icon-big lar-icon {
  fill: var(--lar-color-danger, #f6511d) !important;
  stroke: var(--lar-color-danger, #f6511d) !important;
}

:host(.lar-color-light) .lar-node-box lar-icon {
  fill: var(--lar-color-light, #f4f5f8) !important;
  stroke: var(--lar-color-light, #f4f5f8) !important;
}

:host(.lar-color-light) .lar-icon-big lar-icon {
  fill: var(--lar-color-light, #f4f5f8) !important;
  stroke: var(--lar-color-light, #f4f5f8) !important;
}

:host(.lar-node-small.lar-color-light) .lar-icon-big lar-icon {
  fill: var(--lar-color-light, #f4f5f8) !important;
  stroke: var(--lar-color-light, #f4f5f8) !important;
}

:host(.lar-color-medium) .lar-node-box lar-icon {
  fill: var(--lar-color-medium, #d6d6d6) !important;
  stroke: var(--lar-color-medium, #d6d6d6) !important;
}

:host(.lar-color-medium) .lar-icon-big lar-icon {
  fill: var(--lar-color-medium, #d6d6d6) !important;
  stroke: var(--lar-color-medium, #d6d6d6) !important;
}

:host(.lar-node-small.lar-color-medium) .lar-icon-big lar-icon {
  fill: var(--lar-color-medium, #d6d6d6) !important;
  stroke: var(--lar-color-medium, #d6d6d6) !important;
}

:host(.lar-color-dark) .lar-node-box lar-icon {
  fill: var(--lar-color-dark, #222428) !important;
  stroke: var(--lar-color-dark, #222428) !important;
}

:host(.lar-color-dark) .lar-icon-big lar-icon {
  fill: var(--lar-color-dark, #222428) !important;
  stroke: var(--lar-color-dark, #222428) !important;
}

:host(.lar-node-small.lar-color-dark) .lar-icon-big lar-icon {
  fill: var(--lar-color-dark, #222428) !important;
  stroke: var(--lar-color-dark, #222428) !important;
}