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

@include pf-root($action-list) {
  --#{$action-list}--RowGap: var(--pf-t--global--spacer--gap--group--vertical);
  --#{$action-list}--ColumnGap: var(--pf-t--global--spacer--gap--group-to-group--horizontal--default);

  // * Action list group
  --#{$action-list}__group--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--default);
  --#{$action-list}--m-vertical--RowGap: var(--pf-t--global--spacer--gap--group-to-group--vertical--default);

  // * Action list icons
  --#{$action-list}--m-icons--ColumnGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
  --#{$action-list}--m-vertical--m-icons--RowGap: var(--pf-t--global--spacer--gap--action-to-action--plain);
}

// - Action list - Action list group
.#{$action-list},
.#{$action-list}__group {
  display: flex;
  align-items: start;
}

// - Action list
.#{$action-list} {
  row-gap: var(--#{$action-list}--RowGap);
  column-gap: var(--#{$action-list}--ColumnGap);

  // - Action list icons
  &.pf-m-icons {
    --#{$action-list}__group--ColumnGap: var(--#{$action-list}--m-icons--ColumnGap);
    --#{$action-list}--m-vertical--RowGap:  var(--#{$action-list}--m-vertical--m-icons--RowGap);

    column-gap: var(--#{$action-list}--m-icons--ColumnGap); // update prop: val to prevent potential inheritance conflicts
  }

  &.pf-m-vertical,
  &.pf-m-vertical .#{$action-list}__group {
    flex-direction: column;
  }

  &.pf-m-vertical {
    row-gap: var(--#{$action-list}--m-vertical--RowGap);
  }
}

// - Action list group
.#{$action-list}__group {
  row-gap: var(--#{$action-list}__group--RowGap, var(--#{$action-list}--RowGap));
  column-gap: var(--#{$action-list}__group--ColumnGap);

  // - Action list group icons
  &.pf-m-icons {
    column-gap: var(--#{$action-list}--m-icons--ColumnGap); // update prop: val to prevent potential inheritance conflicts
  }
}
