.s-container {
  @extend .p-2;
  @extend .border-noround;
  @extend .border-bottom-1;
  border-bottom-color: var(--surface-d);
}

.s-grid {
  @extend .grid;
  @extend .grid-nogutter;
}

@for $i from 1 through 12 {
  .s-field-col-#{$i} {
    @media (max-width: $sm) {
      flex: 0 0 auto;
      width: 100%;
      padding: $gutter;
    }

    @extend .field;
    @extend .col-#{$i};
    @extend .p-1;
    @extend .mb-1;
    @extend .md\:col-#{$i};

    @if $i <= 3 {
      @extend .sm\:col-4;
    }

    @extend .lg\:col-#{$i};

    & .p-dropdown,
    & .p-multiselect,
    & .p-inputtext,
    & .p-calendar {
      width: 100%;

      &.p-focus {
        &:not(.p-disabled) {
          border: 1px solid var(--bluegray-100);
          box-shadow: none;
        }
      }
    }
  }
}