//
// CivicTheme Item List component styles.
//

@use 'sass:math';
@import '../mixins/reset';

.ct-item-list {
  $root: &;

  @include ct-reset-box-model();

  list-style: none;

  &#{$root}--horizontal {
    display: flex;
    flex-wrap: wrap;
    column-gap: $ct-item-list-horizontal-regular-column-gap;
    row-gap: $ct-item-list-horizontal-regular-row-gap;

    &#{$root}--small {
      column-gap: $ct-item-list-horizontal-small-column-gap;
      row-gap: $ct-item-list-horizontal-small-row-gap;
    }

    &#{$root}--large {
      column-gap: math.div($ct-item-list-horizontal-large-column-gap, 2);
      row-gap: math.div($ct-item-list-horizontal-large-row-gap, 2);

      @include ct-breakpoint($ct-grid-responsive-breakpoint) {
        column-gap: $ct-item-list-horizontal-large-column-gap;
        row-gap: $ct-item-list-horizontal-large-row-gap;
      }
    }

    &#{$root}--no-gap {
      gap: unset;
    }
  }

  &#{$root}--vertical {
    display: flex;
    flex-direction: column;
    column-gap: $ct-item-list-vertical-regular-column-gap;
    row-gap: $ct-item-list-vertical-regular-row-gap;

    &#{$root}--small {
      column-gap: $ct-item-list-vertical-small-column-gap;
      row-gap: $ct-item-list-vertical-small-row-gap;
    }

    &#{$root}--large {
      column-gap: math.div($ct-item-list-vertical-large-column-gap, 2);
      row-gap: math.div($ct-item-list-vertical-large-row-gap, 2);

      @include ct-breakpoint($ct-grid-responsive-breakpoint) {
        column-gap: $ct-item-list-vertical-large-column-gap;
        row-gap: $ct-item-list-vertical-large-row-gap;
      }
    }

    &#{$root}--no-gap {
      gap: unset;
    }
  }
}
