@use 'textLevel';
%stackedGrid{
  &.stacked{
    flex-direction:column;
    &.center>*{
      text-align: center;
    }
    > [name]:not([type="number"]):not([type="checkbox"]):not([type="radio"]){
      width:100%;
    }
  }
}
%input-label{
  .input-label{
    display: inline-flex;
    gap: var(--half-gap);
    align-items:center;
    @extend %stackedGrid;
    &:not(.stacked){
      > input[type='text']{
        flex:1 1 0;
      }
      >:not([name]){
        flex:0 0 auto;
      }
      &.large > [name]{
        @extend h2;
      }
    }
    > :is(span,button){
      text-transform:capitalize;
    }
  }
  .input-label--dual{
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: 'over 	over 	over' 'under 	under 	under';
    >span:last-of-type{
      grid-column: 1 / -1;
    }
    >input:not([type="number"]):not([type="checkbox"]):not([type="radio"]){
      width: 100%;
    }
    >.slash{
      line-height: 0rem;
      font-weight: normal;
    }
  }
}