@use "../../variables/index" as *;


/**
 * c8y utils - Component styles
 *
 * Note: Uses $size-* tokens for spacing where applicable.
 *
 * Intentionally hardcoded values:
 * - Component-specific dimensions: Fixed sizes for component layout
 * - Off-grid spacing: Component-specific positioning
 * - Border widths (1px, 2px, 3px): Standard borders
 * - Font-sizes: Typography
 * - Percentages: Layout
 */
svg:not(.leaflet-zoom-animated) {
  display: block;
  width: 100%;
  height: 100%;
}

nvd3-multi-bar-chart svg{
  fill: var(--c8y-text-color);
}

[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
  display: none !important;
}

@media (min-width: $screen-lg) {
  .showOnHover {
    &:not(.open) {
      opacity: 0;
      &:focus,
      &:focus-within {
        opacity: 1;
      }
    }
  }
  div:hover > .showOnHover,
  div:hover > p > .showOnHover,
  li:hover > .showOnHover,
  tr:hover .showOnHover,
  a:hover > .showOnHover,
  .c8y-list__item__body:hover .showOnHover {
    opacity: 1;
  }
}

.listLink {
  display: inline-block;
  width: 100%;
  color: inherit !important;
  text-decoration: none !important;
}

.interact {
  cursor: pointer;
}

// FIXME: after nvd3 upgrades this correction in css we can remove this
.leaflet-container svg:not(.leaflet-zoom-animated) {
  width: auto;
  height: auto;
}

.draggableCursor {
  cursor: move;
}

.tooltip-no-max-width + .tooltip .tooltip-inner {
  max-width: none;
  white-space: pre;
}

// label inside checkbox
.checkbox label {
  user-select: none;
}

// MS EDGE Icon fix (effective IE10+)
_:-ms-lang(x),
.ie10up,
img[src*='.svg'] {
  width: 100%;
}

input[type='number'].no-spinners::-webkit-inner-spin-button,
input[type='number'].no-spinners::-webkit-outer-spin-button {
  margin: 0;

  appearance: none;
  -webkit-appearance: none;
}

// disable blue outline in chrome on disabled elements
.disabled {
  outline: 0 !important;
}

.wide-linebreak-tooltip .tooltip-inner {
  min-width: 360px;
  white-space: pre-wrap;
}