@import '../../../../scss/styles.scss';

.group-field {
  margin: base(2) calc(var(--gutter-h) * -1);
  padding: base(2) var(--gutter-h);
  border-top: 1px solid var(--theme-elevation-100);
  border-bottom: 1px solid var(--theme-elevation-100);

  &--within-collapsible {
    margin: $baseline calc(#{$baseline} * -1);
    padding: $baseline;

    &:first-child {
      border-top: 0;
      padding-top: 0;
    }

    &:last-child {
      padding-bottom: 0;
      border-bottom: 0;
    }
  }

  &--within-group {
    margin-left: 0;
    margin-right: 0;
    padding: 0;
    border-top: 0;
    border-bottom: 0;
  }

  &--within-row {
    margin: 0;
    border-top: 0;
    border-bottom: 0;
  }

  &--within-tab:first-child {
    margin-top: 0;
    border-top: 0;
    padding-top: 0;
  }

  &--within-tab:last-child {
    margin-bottom: 0;
    border-bottom: 0;
    padding-bottom: 0;
  }

  &--gutter {
    border-left: 1px solid var(--theme-elevation-100);
    padding: 0 0 0 $baseline;
  }

  &__header {
    margin-bottom: base(.75);
  }

  &__title {
    margin-bottom: 0;
  }

  @include small-break {
    padding-top: $baseline;
    padding-bottom: $baseline;

    &--within-collapsible {
      margin-left: calc(var(--gutter-h) * -1);
      margin-right: calc(var(--gutter-h) * -1);
    }

    &--within-group {
      padding: 0;
    }

    &--gutter {
      padding-left: var(--gutter-h);
    }
  }
}

.group-field+.group-field {
  margin-top: base(-2);
  border-top: 0;
}

.group-field--within-collapsible+.group-field--within-collapsible {
  margin-top: base(-1);
}

.group-field--within-row+.group-field--within-row {
  margin-top: 0;
}

.group-field--within-tab+.group-field--within-row {
  padding-top: 0;
}
