/* Lists

Unordered list styles are turned of by default. You need to add classes to style it.

Example: `Ordered list`; Default styling
    <ol>
        <li>I'm number one!</li>
        <li>Second isn't all that bad</li>
        <li>I'm last :(</li>
    </ol>

Example: `.list`; Default styling
    <ul class="list">
        <li>I'm number one!</li>
        <li>Second isn't all that bad</li>
        <li>I'm last :(</li>
    </ul>

Example: `.list .list--large`; Default styling
    <ul class="list  list--large">
        <li>I'm number one!</li>
        <li>Second isn't all that bad</li>
        <li>I'm last :(</li>
    </ul>

Example: `.list .list--links`; Results list
    <ul class="list  list--links">
        <li><a href="">I'm number one!</a></li>
        <li><a href="">Second isn't all that bad</a></li>
        <li><a href="">I'm last :(</a></li>
    </ul>

Example: `.list .list--contact`; Contact list
    <ul class="list  list--contact">
        <li class="list__item  list__item--phone">
            <a href="tel:47063736">470 63 736</a>
        </li>
        <li class="list__item  list__item--email">
            <a href="mailto:edina.ringdal@arbeiderpartiet.no">edina.ringdal@arbeiderpartiet.no</a>
        </li>
        <li class="list__item  list__item--address">
            <a href="https://maps.google.no/maps?f=q&source=s_q&hl=no&geocode=&q=Stortinget&aq=&sll=59.914562,10.749653&sspn=0.036099,0.077162&vpsrc=6&ie=UTF8&hq=stortingen&hnear=&ll=59.913133,10.742043&spn=0.004513,0.009645&t=m&z=17&iwloc=A&cid=18144128272286456866">Stortinget</a>
        </li>
    </ul>

Styleguide type.list
*/
ol {
    counter-reset: ol-counter;
    text-align: left;
    margin-bottom: $vertical-rythm--spacing;

    & > li {
        position: relative;
        padding-left: $indention--sm;
        margin-bottom: 0;
        list-style-type: none;

        @include min-width(md) {
            padding-left: $indention;
        }

        &:before {
            content: counter(ol-counter) '.';
            counter-increment: ol-counter;
            position: absolute;
            left: 0;
        }
    }
}

%list,
.list {
    margin-bottom: $vertical-rythm--spacing;
    text-align: left;

    & > li, .list__item {
        position: relative;
        padding-left: $indention--sm;
        margin-bottom: 0;

        @include min-width(md) {
            padding-left: $indention;
        }

        &:before {
            content: '';
            position: absolute;
            left: 0;
            top: 0.35em;
            height: $unit * 2 - 3;
            width: $unit * 2 - 3;
            border-radius: 50%;
            background-color: color(primary, dark);

            @include min-width(xs) {
                top: 0.4em;
            }
        }
    }

    &--large {
        & > li, .list__item {
            margin-bottom: $vertical-rythm;

            @include min-width(md) {
                margin-bottom: $vertical-rythm--spacing;
            }
        }
    }

    &--links {
        & > li, .list__item {
            margin-bottom: vertical-space();

            &:before {
                @extend %icon-arrow-right--primary;
                background-color: transparent;
                border-radius: 0;
                top: 0.28em;
                border: 0;
            }
        }
    }

    &--contact {
        .list__item {
            @include hyphens;
            margin-bottom: vertical-space();

            &:before {
                background-color: transparent;
                border-radius: 0;
                top: 0.32em;
                border: 0;
            }

            &--email:before {
                @extend %icon-email--primary;
            }

            &--phone:before {
                @extend %icon-phone--primary;
                left: 1px;
            }

            &--address:before {
                @extend %icon-address--primary;
                left: 3px;
                top: 0.2em;
            }
        }
    }
}
