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

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

  &--top-level {
    padding: base(2) var(--gutter-h);

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

  &--within-collapsible {
    margin-left: calc(var(--base) * -1);
    margin-right: calc(var(--base) * -1);
    padding: var(--base);

    &:first-child {
      border-top: 0;
      padding-top: 0;
      margin-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: calc(var(--base) / 2);
    display: flex;
    align-items: center;
    gap: base(0.5);

    > header {
      display: flex;
      flex-direction: column;
      gap: calc(var(--base) / 4);
    }
  }

  &__title {
    margin-bottom: 0;
  }

  @include small-break {
    &--top-level {
      padding: var(--base) var(--gutter-h);

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

    &__header {
      margin-bottom: calc(var(--base) / 2);
    }

    &--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 {
  border-top: 0;
  padding-top: 0;
}

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

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

html[data-theme='light'] {
  .group-field {
    &--has-error {
      color: var(--theme-error-750);
      &:after {
        background: var(--theme-error-500);
      }
    }
  }
}

html[data-theme='dark'] {
  .group-field {
    &--has-error {
      color: var(--theme-error-500);
      &:after {
        background: var(--theme-error-500);
      }
    }
  }
}
