/* TODO migliorare l'integrazione con btn-close e adeguare i tokens dove necessario */


.sf-macro-wrapper {

  --btn-close-background-color: var(--sf-macro-btn-close-background-color);
  --btn-close-size: var(--sf-macro-btn-close-size);


  /* etichette campi righe successive alla prima */
  @media (--media-large-viewport-up) {
    &:not(.always-show-labels) {
      .sf-macro-riga {
        &:not(:first-child) {
          .form-label, label {
            display: none;
          }
        }
      }
    }
  }

  /*
// forza la visualizzazione delle etichette in tutte le righe
// a partire dal breakpont successivo a quello indicato
@each $brk in (xs, sm, md, lg, xl) {
  &.sf-macro-show-label-down-#{$brk} {
    @include media-breakpoint-down($brk) {
      .form-label, label {
        display: inline-block !important;
      }
    } // end @media
  }
} // end @each
*/

}

.sf-macro-riga {
  position: relative;
  padding: var(--sf-macro-rows-padding);
  margin-bottom: var(--sf-macro-rows-margin-block-end);
  border: var(--sf-macro-rows-border);
  border-radius: var(--sf-macro-rows-border-radius);

  &:nth-child(even) {
    background-color: var(--sf-macro-rows-even-background-color);
  }


  &:hover {
    background-color: var(--sf-macro-rows-hover-background-color);
  }

  .form-group {
    margin-bottom: 0;

    &:has([type='checkbox']) {
      align-self: center;
    }
  }

  .grid {
    row-gap: .8rem;
  }

} /* end .sf-macro-riga */


.sf-macro-close-btn { /* button */

  position: absolute;
  top: var(--sf-macro-btn-close-position-top);
  right: var(--sf-macro-btn-close-position-right);
  bottom: var(--sf-macro-btn-close-position-bottom);
  left: var(--sf-macro-btn-close-position-left);

  z-index: 1;
  display: block;

  &[disabled], [disabled] & {
    cursor: not-allowed;
    opacity: .4;
    transform: skew(-15deg);
  }

  svg {
    width: 100%;
    aspect-ratio: 1;
  }
}

.sf-macro-riga:has(.sf-macro-close-btn:not(:disabled):hover) {

  outline: 2px dashed var(--status-danger-color);
  .sf-macro-close-btn {
    color: var(--status-danger-color);
  }
}