/* TODO separare? */
/* TODO serie di gruppi radio o checkbox */
/* TODO multiselect */
/* TODO classe grid specifica per i form ?? (.form-grid?) */
/* TODO customizable select */
/* TODO form-check: rifare come flex, separare? */
/* TODO abbreviare prefisso  */

.form-group:has([required]):not(:has([disabled])) {

  /* `>` excludes labels within form-collections  */
  > .form-label {
    position: relative;
    padding-inline-start: var(--form-control-required-label-padding-inline-start);
    &::before {
      position: absolute;
      top: var(--form-control-required-flag-top);
      left: var(--form-control-required-flag-left);
      display: inline-block;
      font-size: var(--form-control-required-flag-font-size);
      color: var(--form-control-required-flag-color);
      content: var(--form-control-required-flag-content);
    }
  }
}

/* single checkbozes and radios are centered */
.form-group:not(.form-collection-fset):has(.form-check:not(.form-check-top-label)) {
  align-self: center;
  .form-check {
    margin-block-start: 0;
  }
}

.form-label {
  display: block;
  font-size: var(--form-label-font-size);
  font-weight: var(--form-label-font-weight);
  color: var(--form-label-color);
}

/*  per uso label implicito, senza id e for */
label:has(.form-control) {
  display: block;
  width: 100%;
}

.form-control, .form-control-static {
  display: block;
  width: 100%;
  padding: var(--form-control-padding-block) var(--form-control-padding-inline);
  font-family: var(--font-family);
  font-size: var(--form-control-font-size);
  font-weight: var(--font-weight-regular);
  line-height: var(--form-control-line-height);
  color: var(--form-control-text-color);
  background-color: var(--form-control-background-color);
  border: var(--form-control-border-width) var(--form-control-border-style) var(--form-control-border-color);
  border-radius: var(--form-control-border-radius);

  &:focus {
    outline: none;
  }

  &:focus-visible {
    outline: var(--form-control-focus-outline-width) solid var(--form-control-focus-color);
    outline-offset: var(--form-control-focus-outline-offset);
  }


  &::placeholder {
    font-size: var(--form-control-placeholder-font-size, var(--form-control-font-size));
    font-style: var(--form-control-placeholder-font-style, italic);
    color: var(--form-control-placeholder-color);
    opacity: var(--form-control-placeholder-opacity, .8);
  }

  &.form-control-sm {
    padding: var(--form-control-sm-padding-block) var(--form-control-sm-padding-inline);
    font-size: var(--form-control-sm-font-size);
  }
}

.form-control-static {
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--form-control-static-color);
  white-space: nowrap;
  cursor: not-allowed;
  background-color: var(--form-control-static-background-color);

  &.no-border {
    padding: calc(var(--form-control-padding-block) + var(--form-control-border-width)) 0;
    border: none;
  }
}

/* da bootstrap */
select.form-control {

  --_trigger-icon-padding-right: calc(var(--form-control-padding-inline) * 2);
  --_bg-img-inline-size: 16px;

  padding: var(--form-control-padding-block) var(--_trigger-icon-padding-right) var(--form-control-padding-block) var(--form-control-padding-inline);
  appearance: none;
  background-image: var(--form-control-select-trigger-icon);
  background-repeat: no-repeat;
  background-position: right calc(var(--_trigger-icon-padding-right) - var(--_bg-img-inline-size) - 2px) center;
  background-size: var(--_bg-img-inline-size) 12px;

  &[multiple],
  &[size]:not([size='1']) {
    padding-right: var(--form-control-padding-inline);
    background-image: none;
  }

  &:-moz-focusring {
    color: transparent;
    text-shadow: 0 0 0 var(--form-control-text-color);
  }
}

input[type='checkbox'] {
  color: var(--form-control-text-color);
  accent-color: var(--accent);
  transform-origin: center;
  scale: 1.3;
}

/* da bs5 */
/* versione con label a destra */
/* TODO rivedere. sostituire float con flex? */
/* TODO eliminare necessità di stare dentro un `.form-group` */
/* TODO aggiungere esempi di uso */
.form-check {
  display: block;
  padding-left: 1.5em;
  margin-block-start: var(--size-sm);

  .form-check-input {
    float: left;
    display: inline-block;
    width: auto;
    margin: 4px 0 0 -1.5em;
  }
}

/* fix per safari */
/* https://8yd.no/article/date-input-height-in-safari */
input::-webkit-datetime-edit {
  padding: 0;
  margin-block-end: -2px;
  line-height: 1;
}
input::-webkit-calendar-picker-trigger-icon { /* solo in chromium, non in safari */
  margin: 2px 0;
}


textarea.form-control {
  flex: 1;
  min-height: calc(3.5lh + var(--form-control-padding-block) * 2);

  &.autosize {
    field-sizing: content;
  }
}