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

@layer payload-default {
  .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 {
        margin-left: 0;
        margin-right: 0;
        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 {
        .group-field__header {
          color: var(--theme-error-750);

          &:after {
            background: var(--theme-error-500);
          }
        }
      }
    }
  }

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

          &:after {
            background: var(--theme-error-500);
          }
        }
      }
    }
  }
}