/* web_viewer/static/css/selecteur_epaisseur_trait.css */

.ia-tw{
  position: relative;
  width: 100%;
  height: 100%;
}

/* bouton fermé */
.ia-tw-btn{
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
  cursor: pointer;

  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  padding: 0 6px;
}

/* nombre */
.ia-tw-num{
  width: 14px;
  text-align: left;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

/* preview ligne */
.ia-tw-line{
  flex: 1 1 auto;
  height: 10px;
  position: relative;
}
.ia-tw-line::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  transform: translateY(-50%);
  height: var(--tw-prev-w, 3px);
  border-radius: 999px;
  background: var(--tw-prev-c, #ff00ff);
}

/* preview selectionnee: toujours trait continu (epaisseur seulement) */

/* chevron */
.ia-tw-chevron{
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
  opacity: 0.75;
}

/* menu */
.ia-tw-menu{
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 9999;

  background: var(--ia-panels-body-bg);
  border: 1px solid rgba(0,0,0,0.25);
  box-shadow: 0 8px 20px rgba(0,0,0,0.15);
  padding: 6px;
}

.ia-tw.open .ia-tw-menu{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* option */
.ia-tw-opt{
  height: 18px;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0 6px;

  display: flex;
  align-items: center;
  gap: 8px;
}
.ia-tw-opt:hover{
  background: rgba(0,0,0,0.06);
}

.ia-tw-opt-num{
  width: 14px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1;
}

.ia-tw-opt-line{
  flex: 1 1 auto;
  height: 10px;
  position: relative;
}
.ia-tw-opt-line::after{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  transform: translateY(-50%);
  height: var(--tw-opt-w, 3px);
  border-radius: 999px;
  background: var(--tw-prev-c, #ff00ff);
}


/* menu epaisseur: toujours trait continu (on compare seulement l'epaisseur) */