@use 'modules' as *;



/**
* input wraps
* hide/reset default inputs
* and border styles
*/

.icn-wrp {
  display: inline-flex;
  /* align-items: center; */
  align-items: flex-start;
  height: 1em
}

.icn-wrp-question.icn-wrp-left {
  margin-right: 0
}

.input-wrap-boxed .icn-picker-resize {
  position: absolute;
  right: 0.25em;
  bottom: 0.25em;
  height: 0.65em;
  opacity:0
}

.icn-picker-resize {
  transition:0.2s;
  pointer-events: none;
}

.input-wrap-boxed:hover .icn-picker-resize {
    opacity:1
}

/* adjust baseline alignment for inline-flex */
.icn-wrp:before {
  content: " ";
  white-space: pre;
  width: 0;
  clip-path: inset(50%)
}


.icn-wrp-left {
  margin-right: var(--padding-input);
}

.icn-wrp-right {
  margin-left: var(--padding-input);
}





.icn-svg {
  //@extend .dsp-inl-blc, .pst-rlt, .pnt-evn-non;

  color: var(--color-icon);
  display: inline-block;

  overflow: visible;
  font-size: 1em;
  line-height: 1;
  height: 1em;
  width: auto;
  stroke: currentColor;
  stroke-width: var(--icn-stroke-width);
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  position: relative;
  pointer-events: none;
  //transform: translateY(var(--icn-basline-shift, 0)) scale(var(--icn-scale, 1));
  transform: translateY(var(--icn-basline-shift, 0)) scale(var(--icn-scale, 1));
}

/* select, date and tme */
.icn-input-picker {
  position: absolute;
  right: var(--padding-input);
  pointer-events: none;
  padding: 0 calc(var(--padding-input));
  transform: translate(0, 0.1em);
}


/**
* multi icon toggling
*/

.icn-wrp-multi {
  //@extend .dsp-inl-blc, .pst-rlt;
  //display: inline-block;
  position: relative;
  //line-height: 0em;

  .icn-svg {
    margin-right: 0;
  }

  .icn-svg-0 {
    opacity: 1;
  }

  .icn-svg-1 {
    position: absolute;
    left: 0;
    opacity: 0;
  }

}

.icn-wrp-checkbox:has(input:checked) .icn-checkbox-switch {
  color: var(--color-icon);
}


/* new */
.input-wrap-radio:has(input:checked),
.input-wrap-checkbox:has(input:checked) {
  .icn-svg-0 {
    opacity: 0
  }

  .icn-svg-1 {
    opacity: 1
  }
}

/** add circle */
.icn-circle {
  svg {
    //border: calc(var(--icn-stroke-width) * 1.1) solid var(--color-icon);
    border: calc(var(--icn-stroke-width) * 1.4) solid var(--color-icon);
    border-radius: 50%;
    padding: 0.1em;
  }

  svg,
  use {
    stroke-width: calc(var(--icn-stroke-width) * var(--icn-scale));
    //vector-effect: non-scaling-stroke;
  }

}

/* omit circle for round or non square icons */
svg {

  &.icn-svg {

    &.icn-checkbox-switch,
    &.icn-checkbox-switch-checked,
    &.icn-radio,
    &.icn-radio-checked,
    &.icn-checkbox,
    &.icn-checkbox-checked {
      border: none !important;
      background-color: transparent;
      stroke: var(--color-icon);
      padding: 0;

    }
  }

}

.icn-negative {
  svg {
    background-color: var(--color-icon);
  }

  svg,
  use {
    stroke: var(--color-background, #fff)
  }
}

/* disable line rounding */
.icn-sharp {

  svg,
  use {
    stroke-linecap: square;
    stroke-linejoin: miter;
  }
}

.icn-thin {
  --icn-stroke-width: 1px
}

.icn-light {
  --icn-stroke-width: 1.5px
}

.icn-medium {
  --icn-stroke-width: 2.3px
}

.icn-bold {
  --icn-stroke-width: 2.75px
}

/*
.icn-black {
  --icn-stroke-width: 3px
}
  */