@import "../../../theme/global";
/**
  * @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
  */
$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-small-box-height:         var(--lar-node-small-box-height, 4rem) !default;
$node-box-border-radius:        var(--lar-node-box-border-radius, 0.5rem) !default;
$node-small-box-border-radius:  var(--lar-node-small-box-border-radius, 0.5rem) !default;

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

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

$node-icon-border-radius:       var(--lar-node-icon-border-radius, 50%) !default;
$node-icon-size:                var(--lar-node-icon-size, 3rem) !default;
$node-small-icon-size:          var(--lar-node-small-icon-size, 1.8rem) !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, -0.85rem) !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, -0.85rem) !default;

$node-value-font-size:          var(--lar-node-value-font-size, 1.3rem) !default;


: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;
  .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 {
    @include border-radius($node-small-box-border-radius);
    text-align: left;
    height: $node-small-box-height;
    box-sizing: border-box;
  }
  .lar-node-box:before {
    display: none;
  }
  .lar-icon-big {
    @include padding($node-small-icon-padding-top, $node-small-icon-padding-right, $node-small-icon-padding-bottom, $node-small-icon-padding-left);
    @include border-radius($node-icon-border-radius);
    width: $node-small-icon-size;
    height: $node-small-icon-size;
    display: inline-block;
    margin-right: .5rem;;
    margin-left: .5rem;;
  }
  .lar-node-middle {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: left;
  }
  .lar-value-badge {
    position: static;
    margin-left: auto;
    margin-right: .5rem;
  }
}

.titles-slot:empty {
  display: none;
}
.lar-node-box {
  @include border-radius($node-box-border-radius);
  position: relative;
  cursor: pointer;
  overflow: visible;
  background: $background-color;
  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) {
    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 {
    width: 1.5rem;
    height: 1.5rem;
  }
}

.lar-icon-big {
  @include padding($node-icon-padding-top, $node-icon-padding-right, $node-icon-padding-bottom, $node-icon-padding-left);
  @include border-radius($node-icon-border-radius);
  width: $node-icon-size;
  height: $node-icon-size;
  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;

  .titles-slot {
    position: static;
    top: auto;
    right: auto;
  }

  @media (max-width: 576px) {
    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) {
    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-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) {
    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%;
  }
}

@mixin generate-node-color($color-name) {
  $value: map-get($colors, $color-name);
  $base: map-get($value, base);

  // Just apply color to icons, not background
  lar-icon {
    fill: lar-color($color-name, base) !important;
    stroke: lar-color($color-name, base) !important;
  }
}

@each $color-name, $value in $colors {
  :host(.lar-color-#{$color-name}) .lar-node-box {
    @include generate-node-color($color-name);
  }
  :host(.lar-color-#{$color-name}) .lar-icon-big {
    @include generate-node-color($color-name);
  }
  :host(.lar-node-small.lar-color-#{$color-name}) .lar-icon-big {
    @include generate-node-color($color-name);
  }
}