@use '../../sass-utilities' as *;

@include pf-root($tab-content) {
  --#{$tab-content}__body--PaddingBlockStart: 0;
  --#{$tab-content}__body--PaddingInlineEnd: 0;
  --#{$tab-content}__body--PaddingBlockEnd: 0;
  --#{$tab-content}__body--PaddingInlineStart: 0;
  --#{$tab-content}--BackgroundColor: transparent;

  // Padding
  --#{$tab-content}__body--m-padding--PaddingBlockStart: var(--pf-t--global--spacer--md);
  --#{$tab-content}__body--m-padding--PaddingInlineEnd: var(--pf-t--global--spacer--md);
  --#{$tab-content}__body--m-padding--PaddingBlockEnd: var(--pf-t--global--spacer--md);
  --#{$tab-content}__body--m-padding--PaddingInlineStart: var(--pf-t--global--spacer--md);

  // Match page padding
  --#{$tab-content}__body--m-padding--xl--PaddingBlockStart: var(--pf-t--global--spacer--lg);
  --#{$tab-content}__body--m-padding--xl--PaddingInlineEnd: var(--pf-t--global--spacer--lg);
  --#{$tab-content}__body--m-padding--xl--PaddingBlockEnd: var(--pf-t--global--spacer--lg);
  --#{$tab-content}__body--m-padding--xl--PaddingInlineStart: var(--pf-t--global--spacer--lg);

  // Secondary modifier
  --#{$tab-content}--m-secondary--BackgroundColor: var(--pf-t--global--background--color--secondary--default);
}

.#{$tab-content} {
  background-color: var(--#{$tab-content}--BackgroundColor);

  @media screen and (min-width: $pf-v6-global--breakpoint--xl) {
    --#{$tab-content}__body--m-padding--PaddingBlockStart: var(--#{$tab-content}__body--m-padding--xl--PaddingBlockStart);
    --#{$tab-content}__body--m-padding--PaddingInlineEnd: var(--#{$tab-content}__body--m-padding--xl--PaddingInlineEnd);
    --#{$tab-content}__body--m-padding--PaddingBlockEnd: var(--#{$tab-content}__body--m-padding--xl--PaddingBlockEnd);
    --#{$tab-content}__body--m-padding--PaddingInlineStart: var(--#{$tab-content}__body--m-padding--xl--PaddingInlineStart);
  }

  &.pf-m-secondary {
    --#{$tab-content}--BackgroundColor: var(--#{$tab-content}--m-secondary--BackgroundColor);
  }
}

// Body
.#{$tab-content}__body {
  padding-block-start: var(--#{$tab-content}__body--PaddingBlockStart);
  padding-block-end: var(--#{$tab-content}__body--PaddingBlockEnd);
  padding-inline-start: var(--#{$tab-content}__body--PaddingInlineStart);
  padding-inline-end: var(--#{$tab-content}__body--PaddingInlineEnd);

  &.pf-m-padding {
    --#{$tab-content}__body--PaddingBlockStart: var(--#{$tab-content}__body--m-padding--PaddingBlockStart);
    --#{$tab-content}__body--PaddingInlineEnd: var(--#{$tab-content}__body--m-padding--PaddingInlineEnd);
    --#{$tab-content}__body--PaddingBlockEnd: var(--#{$tab-content}__body--m-padding--PaddingBlockEnd);
    --#{$tab-content}__body--PaddingInlineStart: var(--#{$tab-content}__body--m-padding--PaddingInlineStart);
  }
}
