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

$controls-top-adjustment: base(.1);

@mixin nestedStickyOffsets ($loopCount, $currentCount: 0) {
  .field-type {
    @if $loopCount > $currentCount {
      .field-type-gutter--v-align-sticky .field-type-gutter__content {
        top: calc(#{$top-header-offset} + (#{base(2.75)} * #{$currentCount}));
      }

      @include nestedStickyOffsets($loopCount, $currentCount + 1);
    }
  }
}

@include nestedStickyOffsets(4);

.field-type-gutter {
  &--left {
    margin-right: base(1.25);
  }

  &--right {
    padding-right: 0;
    padding-left: base(1.25);

    .field-type-gutter__content {
      margin-bottom: base(1);
    }

    .field-type-gutter__content-container {
      padding-right: 0;
      box-shadow: none !important;
    }
  }

  &--v-align-top {
    .field-type-gutter__content {
      justify-content: flex-start;
    }
  }

  &--v-align-sticky {
    .field-type-gutter__content {
      position: sticky;
      top: $top-header-offset;
      height: unset;
    }
  }

  &__content-container {
    padding-right: $style-stroke-width-s;
    position: relative;
    min-height: 100%;
    box-shadow: #{$style-stroke-width-s} 0px 0px 0px $color-light-gray;
  }

  &__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }

  &--negative-gutter {
    &.field-type-gutter--left {
      position: absolute;
      top: 0; right: 100%; bottom: 0;
    }
  }

  @include mid-break {
    &--left {
      margin-right: base(1);

      .field-type-gutter__content-container {
        padding-right: $style-stroke-width-m;
        padding-left: 0;
      }
    }

    &--right {
      padding-right: 0;
    }
  }
}
