@use 'sass:math';
$menuListColor: $blue-50;
$menuListFontSize: fontSize(small);
$menuListBorderColor: $gray-40;

$includeHtml: false !default;

@if ($includeHtml) {
  .sg-list {
    display: block;
    margin: 0;
    padding: 0;
    list-style: '\200B';

    &__element {
      display: flex;
      align-items: center;
    }

    &__icon {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: gutter(math.div(1, 3));

      &--x24 {
        height: rhythm(1);
      }

      &--x32 {
        height: rhythm(1.5);
      }

      &--align-top {
        align-self: flex-start;
      }

      &--spacing-right-small {
        margin-right: gutter(math.div(1, 8));
      }
    }

    &--spaced-elements &__element {
      margin-bottom: rhythm(0.5);

      &:last-child {
        margin-bottom: 0;
      }
    }
  }

  .sg-menu-list {
    @include sgListBasicStyles();

    &__element {
      box-sizing: border-box;
      height: rhythm(2);
      line-height: rhythm(2);
      border-bottom: 1px solid $menuListBorderColor;

      &:last-child {
        border: none;
      }

      &--flex {
        height: auto;
      }
    }

    &__link {
      color: $menuListColor;
      text-decoration: none;
      display: block;
      font-size: $menuListFontSize;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;

      &:hover {
        text-decoration: underline;
      }
    }

    &--side-spaced {
      margin: 0 10px;
    }

    &--small {
      .sg-menu-list__element {
        height: rhythm(1.5);
        line-height: rhythm(1.5);
      }
    }

    &--large {
      .sg-menu-list__element {
        height: rhythm(2.5);
        line-height: rhythm(2.5);
      }
    }
  }
}