@import "settings";
@import "links";
@import "foundation-sites/scss/components/menu";

/// Flag whether or not you want to include bonsai list components
/// @type Bool
$bonsai-include-lists: $bonsai-include-components !default;

/// Font color for active inline list elements
/// @type Color
$bonsai-inline-list-active-color: $bonsai-body-font-color !default;

/// Font weight for active inline list elements
/// @type String
$bonsai-inline-list-active-font-weight: bold !default;

/// Text decoration for active inline list elements
/// @type String
$bonsai-inline-list-active-text-decoration: none !default;

/// Item marker for bulleted list elements
/// @type String
$bonsai-bulleted-list-bullet-style: "•" !default;

/// Color of bulleted list item marker
/// @type Color
$bonsai-bulleted-list-bullet-color: get-color(primary) !default;

/// Styling for bulleted lists
@mixin bulleted-list {
  list-style: none;
  margin-left: 0;
}

/// Styling for bulleted list items
@mixin bulleted-list-item {
  padding-left: 0.875rem;
  margin-bottom: 0.2625rem;
}

/// Styling for bulleted list item markers
@mixin bulleted-list-item-before {
  content: $bonsai-bulleted-list-bullet-style;
  font-size: 1.3125rem;
  color: $bonsai-bulleted-list-bullet-color;
  line-height: $global-lineheight;
  position: relative;
  top: 0.175rem;
  left: -0.6125rem;
}

/// Styling for inline lists
@mixin inline-list {
  @include menu-base;
  @include menu-simple($margin: 10px);
  @include links;
}

/// Styling for active inline list items
@mixin inline-list-active {
  font-weight: $bonsai-inline-list-active-font-weight;
  color: $bonsai-inline-list-active-color;
  text-decoration: $bonsai-inline-list-active-text-decoration;
}

/// Styling spans inside of inline list items
@mixin inline-list-span {
  line-height: 1;
  display: block;
}

/// Gateway mixin for bonsai list
@mixin bonsai-list {
  @if $bonsai-include-lists {
    ul,
    ol {
      &.no-bullet {
        ul,
        ol {
          @extend .no-bullet;
        }
      }
    }

    .bulleted-list {
      @include bulleted-list;

      li {
        @include bulleted-list-item;

        &::before {
          @include bulleted-list-item-before;
        }
      }
    }

    .inline-list {
      @include inline-list;

      .active,
      .active:hover {
        @include inline-list-active;
      }

      span {
        @include inline-list-span;
      }
    }
  }
}