// Utilities
* {
  box-sizing: border-box;
}

// Keep B/C
.element-invisible {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  clip-path: inset(50%);
}

.hidden {
  display: none;
}

.table-row {
  display: table-row;
}

// Form Grid

.form-grid {
  --span-1: span 1;
  --span-2: span 1;
  --span-3: span 1;
  --span-4: span 1;
  --span-5: span 1;

  display: grid;
  grid-template-columns: repeat(1, 1fr);
  grid-gap: 1rem;

  @include media-breakpoint-up(sm) {
    --span-2: span 2;
    --span-3: span 2;
    --span-4: span 2;
    --span-5: span 2;

    grid-template-columns: repeat(2, 1fr);
  }

  @include media-breakpoint-up(xxl) {
    --span-3: span 3;
    --span-4: span 4;
    --span-5: span 5;

    grid-template-columns: repeat(6, 1fr);
  }

  > * {
    grid-column: 1 / -1;
  }

  .stack {
    flex-direction: column;
  }

  .span-1 {
    grid-column: 1 / var(--span-1);

    &-inline {
      grid-column: var(--span-1);
    }
  }

  .span-2 {
    grid-column: 1 / var(--span-2);

    &-inline {
      grid-column: var(--span-1);

      @include media-breakpoint-up(xxl) {
        grid-column: var(--span-2);
      }
    }
  }

  .span-3 {
    grid-column: 1 / var(--span-3);

    &-inline {
      grid-column: var(--span-3);
    }
  }

  .span-4 {
    grid-column: 1 / var(--span-4);

    &-inline {
      grid-column: var(--span-4);
    }
  }

  .span-5 {
    grid-column: 1 / var(--span-5);

    &-inline {
      grid-column: var(--span-5);
    }
  }

  @include media-breakpoint-up(lg) {
    .offset-1 {
      grid-column-start: 2;
    }

    .offset-2 {
      grid-column-start: 3;
    }

    .offset-3 {
      grid-column-start: 4;
    }

    .offset-4 {
      grid-column-start: 5;
    }

    .offset-5 {
      grid-column-start: 6;
    }
  }
}


// Sizing

.w-1 {
  width: 1%;
}

.w-3 {
  width: 3%;
}

.w-5 {
  width: 5%;
}

.w-6 {
  width: 6%;
}

.w-7 {
  width: 7%;
}

.w-10 {
  width: 10%;
}

.w-12 {
  width: 12%;
}

.w-15 {
  width: 15%;
}

.w-20 {
  width: 20%;
}

.w-30 {
  width: 30%;
}

.w-35 {
  width: 35%;
}

.w-40 {
  width: 40%;
}

.w-60 {
  width: 60%;
}

.w-80 {
  width: 80%;
}

.editor-xtd-buttons .btn {
  margin-bottom: 5px;
}

// Visibility depend from ColorScheme
@include color-mode(dark) {
  .d-dark-scheme-none {
    display: none;
  }
}
@include color-mode(light) {
  .d-light-scheme-none {
    display: none;
  }
}