@import "../../theme/global";
/**
  * @prop --lar-node-cam-text-top: Camera name element top
  * @prop --lar-node-cam-text-right: Camera name element right
  * @prop --lar-node-cam-text-bottom: Camera name element bottom
  * @prop --lar-node-cam-text-left: Camera name element left
  * @prop --lar-node-cam-text-max-width: Camera name element max width
  */
  
$node-node-cam-top:           var(--lar-node-cam-text-top, 0.5rem) !default;
$node-node-cam-right:         var(--lar-node-cam-text-right) !default;
$node-node-cam-bottom:        var(--lar-node-cam-text-bottom) !default;
$node-node-cam-left:          var(--lar-node-cam-text-left, 0.5rem) !default;
$node-node-cam-max-width:     var(--lar-node-cam-text-max-width, 42%) !default;
$node-node-cam-max-height:    var(--lar-node-cam-text-max-height, 1rem) !default;
$node-node-cam-font-size:     var(--lar-node-cam-text-font-size, .95rem) !default;

$node-margin-top:              var(--lar-node-margin-top, 1rem) !default;
$node-margin-right:            var(--lar-node-margin-right, 1rem) !default;
$node-margin-bottom:           var(--lar-node-margin-bottom, 1rem) !default;
$node-margin-left:             var(--lar-node-margin-left, 1rem) !default;

$node-box-height:               var(--lar-node-box-height, 10rem) !default;
$node-box-border-radius:        var(--lar-node-box-border-radius, 0.5rem) !default;

$node-icon-small-padding-top:   var(--lar-node-icon-small-padding-top, 0.6rem) !default;
$node-icon-small-padding-right: var(--lar-node-icon-small-padding-right, 0.6rem) !default;
$node-icon-small-padding-bottom: var(--lar-node-icon-small-padding-bottom, 0.6rem) !default;
$node-icon-small-padding-left:  var(--lar-node-icon-small-padding-left, 0.6rem) !default;

$node-icon-small-border-radius: var(--lar-node-icon-small-border-radius, 0.4rem) !default;
$node-icon-small-border-color:  var(--lar-node-icon-small-border-color, $background-color) !default;
$node-icon-small-border-style:  var(--lar-node-icon-small-border-style, solid) !default;
$node-icon-small-border-width:  var(--lar-node-icon-small-border-width, 0.3rem) !default;
$node-icon-small-size:          var(--lar-node-icon-small-size, 1.7rem) !default;

$node-icon-small-top:           var(--lar-node-icon-small-top, -1rem) !default;
$node-icon-small-right:         var(--lar-node-icon-small-right) !default;
$node-icon-small-bottom:        var(--lar-node-icon-small-bottom) !default;
$node-icon-small-left:          var(--lar-node-icon-small-left, -1rem) !default;

:host {
  min-width: 8rem;
  display: block;
  user-select: none;
  position: relative;
}
:host(.lar-node-disabled) slot {
  pointer-events: none;
}
video, canvas {
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  @include border-radius(.1px); // workaround for: https://bugs.chromium.org/p/chromium/issues/detail?id=400829
}
.swiper {
  height: $node-box-height;
  width: 100%;
  overflow: hidden;
  @include border-radius($node-box-border-radius);
  position: relative;
  display: block;
}
.lar-node-box {
  @include border-radius($node-box-border-radius);
  text-align: center;
  position: relative;
  height: $node-box-height;
  min-height: 8rem;
  cursor: pointer;
  background: $background-color;
}
 .swiper-slide-title {
   z-index: 1;
   position: absolute;
   top: 1rem;
   left: 0.5rem;
   right: auto;
   max-width: calc(100% - 1rem);
   overflow: hidden;
   text-overflow: ellipsis;
   padding: 0.25rem 0.5rem;
   text-align: left;
   white-space: nowrap;
   font-size: 0.75rem;
   font-weight: 600;
   @include border-radius(0.5rem);
   background: lar-color(dark, base);
   color: lar-color(light, base);;
   backdrop-filter: blur(4px);
   -webkit-backdrop-filter: blur(4px);
 }
.swiper-slide-title:empty {
  display: none !important;
}

.lar-node-box > .lar-icon-small {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  z-index: 1;

  lar-icon {
    width: 100%;
    height: 100%;
  }
}
.swiper-wrapper {
  z-index: 1 !important;
  height: 100%;
  width: 100%;
  position: relative;
  display: flex;
  transition-property: transform;
  box-sizing: content-box;
}
.swiper-slide {
  height: 100%;
  width: 100%;
  position: relative;
  flex-shrink: 0;
  display: block;
}
.lar-icon-small lar-icon {
  display: block;
  width: 100%;
  height: 100%;
}
.lar-icon-small:empty {
  display: none !important;
}

.swiper-pagination {
  position: absolute;
  text-align: center;
  z-index: 1;
  bottom: 0.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.25rem;
  width: auto;
  padding: 0.4rem 0.75rem;
  background: lar-color(dark, base);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  @include border-radius(1rem);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.swiper-pagination-hidden {
  display: none !important;
}
.swiper-pagination-bullet {
  width: 8px;
  height: 8px;
  display: inline-block;
  border-radius: 50%;
  background: lar-color(light, base);
  opacity: 0.5;
  margin: 0 2px;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
}
.swiper-pagination-bullet:hover {
  opacity: 0.7;
  transform: scale(1.2);
}
.swiper-pagination-bullet-active {
  background: lar-color(light, base);
  opacity: 1;
  width: 20px;
  height: 8px;
  border-radius: 4px;
}

 @mixin generate-node-color($color-name) {
   :host(.lar-color-#{$color-name}) .lar-icon-small lar-icon {
     fill: lar-color($color-name, base) !important;
     stroke: lar-color($color-name, base) !important;
   }
 }

 @each $color-name, $value in $colors {
     @include generate-node-color($color-name);
 }


///// vendor
$themeColor: $primary;
$colors: (white: #ffffff, black: #000000);