/*
 * @copyright   Copyright (C) 2010-2024 Combodo SAS
 * @license     http://opensource.org/licenses/AGPL-3.0
 */

$ibo-input-set--padding-x: $ibo-spacing-300 !default;
$ibo-input-set--padding-y: $ibo-spacing-0 !default;

$ibo-input-set--input--height: auto !default;
$ibo-input-set--input--min-height: $ibo-input--height !default;

$ibo-input-set--input--height: 100% !default;

$ibo-input-set--remove--padding-top: 0.15em !default;
$ibo-input-set--remove--border-left: none !default;


$ibo-input-set--item--siblings-spacing: 3px !default;
$ibo-input-set--item--margin-y: 1px !default;
$ibo-input-set--item--padding-x: 6px !default;
$ibo-input-set--item--padding-y: $ibo-spacing-200 !default;
$ibo-input-set--item--max-width: 360px !default;
$ibo-input-set--item--background-color: $ibo-color-white-100 !default;
$ibo-input-set--item--border: none !default;
$ibo-input-set--item--border-radius: $ibo-border-radius-300 !default;
$ibo-input-set--item--box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15), 0 0 1px 1px rgba(241, 241, 241, 0.7) !default;


.ibo-input-set {
  flex-wrap: wrap;
  height: $ibo-input-set--input--height;
  min-height: $ibo-input-set--input--min-height;
  
  > input {
    height: $ibo-input-set--input--height;
  }

  .item[data-value] > .remove {
    font-size: 18px;
    padding-top: $ibo-input-set--remove--padding-top;
    border-left: $ibo-input-set--remove--border-left;
  }


}

/* CSS rules from the old style, retrieved almost as is. Do not change the classes names in the markup without second thought as they are used by the portal as well */
/* - Item style, always the same in read-only or edition */
%ibo-input-set--item {
  display: inline-flex;
  margin-top: $ibo-input-set--item--margin-y;
  margin-right: 0;
  margin-bottom: $ibo-input-set--item--margin-y;
  padding: $ibo-input-set--item--padding-y $ibo-input-set--item--padding-x;
  max-width: $ibo-input-set--item--max-width;

  background: $ibo-input-set--item--background-color none;
  border: $ibo-input-set--item--border;
  border-radius: $ibo-input-set--item--border-radius;
  box-shadow: $ibo-input-set--item--box-shadow;

  color: $ibo-color-grey-900;
  text-shadow: none;
  @extend %ibo-text-truncated-with-ellipsis;
  /* - Guaranty that if a set item has html sub-node, they correctly display ellipsis (eg. Link set set items) */
  > * {
    @extend %ibo-text-truncated-with-ellipsis;
  }
  
  &:not(:first-child) {
    margin-left: $ibo-input-set--item--siblings-spacing;
  }
}

/* - Read-only */
.attribute-set {
  .attribute-set-item {
    @extend %ibo-input-set--item;
  }

  &.history-added {
    .attribute-set-item {
      font-weight: bold;
    }
  }

  &.history-removed {
    .attribute-set-item {
      text-decoration: line-through;
      font-style: italic;
    }
  }
}

/* - Edition */
/* Note: The selector is "precise" on purpose as it needs to override the one from selectize. */
.selectize-control.multi {
  .selectize-input {
    &.ibo-input-set {
      padding: $ibo-input-set--padding-y $ibo-input-set--padding-x;

      .attribute-set-item {
        @extend %ibo-input-set--item;
      }
    }
  }
}
