@mixin block-list
{
    list-style: none;

    > li
    {
        display: block;
        padding: 0;
        margin: 0;

        &::before
        {
            content: none;
        }
    }
}

@mixin inline-list
{
    @include block-list;

    > li
    {
        display: inline-block;

        vertical-align: top;
    }
}

@mixin bullet-item
{
    padding-left: 32px;
    position: relative;

    &::before
    {
        content: "";

        background: $color-brand-darker;

        width: 10px;
        height: 1px;
        margin-left: -32px;

        position: absolute;
        top: 15px;

        @include for-at-least-normal-tablets
        {
            top: 24px;
        }
    }
}

@mixin bullet-list
{
    @include block-list;

    margin-bottom: steps(2);

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

    > li
    {
        @include normal-text;

        margin-bottom: steps(0.5);

        @include for-at-least-normal-tablets
        {
            margin-bottom: steps(1);
        }

        > p
        {
            padding-top: 0;
            padding-bottom: 0;
            margin-bottom: steps(1);
        }
    }

    ul, ol
    {
        margin-top: steps(1);
    }

    &:not(ol)
    {
        // ul only styling

        > li
        {
            @include bullet-item;
        }
    }

    &:not(ul)
    {
        // ol only styling

        counter-reset: ordered-list;

        > li
        {
            padding-left: 32px;
            position: relative;

            @include for-at-least-normal-tablets
            {
                padding-left: 42px;
            }

            &::before
            {
                counter-increment: ordered-list;
                content: counter(ordered-list) ".";

                @include font-dimensions(16px, steps(2.5), 0.7px);

                font-family: "Fedra Serif A Pro Digits", "Times New Roman", Times, serif;
                color: $color-brand-darker;
                white-space: nowrap;

                position: absolute;
                top: 3.8px; // use float to fine-tune baseline
                left: 0;

                @include for-at-least-normal-tablets
                {
                    @include font-dimensions(22px, steps(3), 0.9px);

                    top: 8.8px; // use float to fine-tune baseline
                }
            }
        }
    }
}

@mixin hover-list
{
    @include block-list;

    > li
    {
        border-top: 1px solid $color-border-normal;

        &:last-child
        {
            border-bottom: 1px solid $color-border-normal;
        }

        > a
        {
            text-decoration: none;
            display: block;
            color: inherit;

            &:hover,
            &:focus
            {
                background-color: $color-background-lighter;
            }

            position: relative;
            margin-top: -1px;
            margin-bottom: -1px;

            margin-left: -$gutter;
            margin-right: -$gutter;

            padding-left: $gutter;
            padding-right: $gutter;

            @include for-at-least-normal-tablets
            {
                margin-left: -($gutter*2);
                margin-right: -($gutter*2);

                padding-left: $gutter*2;
                padding-right: $gutter*2;
            }
        }
    }
}

@mixin tab-list
{
    @include for-at-least-normal-tablets
    {
        display: flex;
        flex-wrap: wrap;

        background: $color-background-darker;
    }

    li
    {
        margin-top: 1px;

        &:first-child
        {
            margin-top: 0;
        }

        @include for-at-least-normal-tablets
        {
            margin-top: 0;
        }
    }

    a
    {
        @include baseline-box(16px, steps(2), 0.9px, steps(1.5), steps(1.5) - 1px);

        display: block;
        padding-left: steps(2.5);
        padding-right: steps(2.5);

        color: $color-text-normal;
        background: $color-background-darker;
        text-decoration: none;

        @include for-at-least-normal-tablets
        {
            @include baseline-paddings(16px, steps(2), steps(1.5), steps(1.5));
        }

        &:hover,
        &:focus
        {
            color: $color-text-darker;
            background: $color-background-normal;
        }
    }

    .active > a
    {
        @include link-underline;

        color: $color-text-darker;
        background: $color-background-lighter;
    }
}

@mixin separated-list
{
    margin-bottom: steps(2);

    li
    {
        @include baseline-box(14px, steps(3), 0.6px);

        display: inline;

        &:not(:last-child)::after
        {
            content: ", ";
        }
    }

    a
    {
        @include alternative-link;
    }

    @include for-at-least-normal-tablets
    {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;

        margin-bottom: steps(3);

        li
        {
            @include baseline-box(18px, steps(3), 0.6px);

            &:not(:last-child)
            {
                position: relative;

                padding-right: steps(2);
                margin-right: steps(2);

                &::after
                {
                    content: "";

                    position: absolute;
                    left: 100%;
                    bottom: 0;

                    width: 1px;
                    height: steps(3);

                    background: $color-border-normal;
                }
            }
        }
    }
}

@mixin image-list
{
    @include inline-list;

    margin: steps(-1);

    li
    {
        width: 50%;
        padding: steps(1);

        @include for-at-least-tablets
        {
            width: auto;
        }
    }

    a
    {
        display: block;
        padding: 11.6% steps(1.5) 12.4%;
        border: 1px solid $color-brand-darker;

        text-decoration: none;
        vertical-align: top;

        @include for-at-least-tablets
        {
            width: steps(16);
            padding-left: $gutter;
            padding-right: $gutter;
        }

        img
        {
            @include transition("opacity");

            // fix blurry / 1px move issue when animating opacity in chrome
            backface-visibility: hidden;

            display: block;

            &.hover
            {
                margin-top: -25%;

                opacity: 0;
            }
        }

        &:hover
        {
            color: $color-text-inverted-lighter;
            border-color: $color-brand-darker;
            background: $color-brand-darker;

            img
            {
                opacity: 0;

                &.hover
                {
                    opacity: 1;
                }
            }

        }
    }
}
