
/* Blocklist

List of block elements.


Example: Basic block list
    <ul class="blocklist">
        <li class="blocklist__item">Element 1</li>
        <li class="blocklist__item">Element 2</li>
        <li class="blocklist__item">Element 3</li>
    </ul>


Example: With headings for each element
    <div class="blocklist">
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle">Element 1</h2>
            <p>Inceptos Tristique Bibendum Parturient</p>
        </section>
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle">Element 2</h2>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</p>
        </section>
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle">Element 3</h2>
            <p>Pellentesque Cursus Adipiscing</p>
        </section>
    </div>


Example: We have variants for heading sizes
    <div class="blocklist">
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle blocklist__itemtitle--small">Small heading</h2>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</p>
        </section>
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle">Default heading</h2>
            <p>Inceptos Tristique Bibendum Parturient</p>
        </section>
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle blocklist__itemtitle--large">Large heading</h2>
            <p>Pellentesque Cursus Adipiscing</p>
        </section>
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle blocklist__itemtitle--xlarge">Extra large heading</h2>
            <p>Pellentesque Cursus Adipiscing</p>
        </section>
    </div>


Example: List of links
    <nav class="blocklist">
        <a class="blocklist__item blocklist__item--link">
            <h2 class="blocklist__itemtitle">Element 1</h2>
            <p>Inceptos Tristique Bibendum Parturient</p>
        </a>
        <a class="blocklist__item blocklist__item--link">
            <h2 class="blocklist__itemtitle">Element 2</h2>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</p>
        </a>
        <a class="blocklist__item blocklist__item--link">
            <h2 class="blocklist__itemtitle">Element 3</h2>
            <p>Pellentesque Cursus Adipiscing</p>
        </a>
    </nav>


Example: With buttons
    <div class="blocklist">
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle">Element 1</h2>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</p>
            <p>
                <button class="button  button--primary">Edit</button>
            </p>
        </section>
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle">Element 2</h2>
            <p>Pellentesque Cursus Adipiscing</p>
            <p>
                <button class="button  button--primary">Edit</button>
                <button class="button">Preview</button>
            </p>
        </section>
    </div>


Example: With tighter spacing
    <div class="blocklist blocklist--tight">
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle">Element 1</h2>
            <p>Inceptos Tristique Bibendum Parturient</p>
        </section>
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle">Element 2</h2>
            <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</p>
        </section>
        <section class="blocklist__item">
            <h2 class="blocklist__itemtitle">Element 3</h2>
            <p>Pellentesque Cursus Adipiscing</p>
        </section>
    </div>



Example: With sidebar for moving items
    <div class="blocklist">
        <section class="blocklist__movable-item-wrapper">
            <div class="blocklist__item  blocklist__item--movable">
                <h2 class="blocklist__itemtitle">Element 1</h2>
                <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Maecenas faucibus mollis interdum.</p>
            </div>
            <div class="blocklist__movesidebar  blocklist__movesidebar--only-down">
                <button class="blocklist__movebutton" aria-label="Move Element 1 down">
                    <span class="icon icon-chevron-down--light" aria-hidden="true">
                </button>
            </div>
        </section>
        <section class="blocklist__movable-item-wrapper">
            <div class="blocklist__item  blocklist__item--movable">
                <h2 class="blocklist__itemtitle">Element 2</h2>
                <p>Tristique Vestibulum Purus</p>
            </div>
            <div class="blocklist__movesidebar">
                <button class="blocklist__movebutton" aria-label="Move Element 2 up">
                    <span class="icon icon-chevron-up--light" aria-hidden="true">
                </button>
                <button class="blocklist__movebutton" aria-label="Move Element 2 down">
                    <span class="icon icon-chevron-down--light" aria-hidden="true">
                </button>
            </div>
        </section>
        <section class="blocklist__movable-item-wrapper">
            <div class="blocklist__item  blocklist__item--movable">
                Hello world
            </div>
            <div class="blocklist__movesidebar  blocklist__movesidebar--only-up">
                <button class="blocklist__movebutton" aria-label="Move Hello world up">
                    <span class="icon icon-chevron-up--light" aria-hidden="true">
                </button>
            </div>
        </section>
    </div>


Styleguide components.blocklist
*/
.blocklist {
    &__item {
        display: block;
        margin-bottom: $vertical-rythm--spacing;
        padding: $vertical-rythm--spacing $spacing;
        border-radius: $border-radius;
        background-color: $color-light;

        &--link {
            border: 0;
            color: $color-text;
            text-decoration: none;

            &:hover,
            &:focus {
                color: $color-links--hover;
                text-decoration: none;
            }
        }

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

        &--movable {
            flex: 1 1 auto;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
        }
    }

    &__itemtitle {
        margin-bottom: $vertical-rythm;

        &:last-child {
            margin-bottom: -4px; // Optical adjustment
        }

        @include font-size(large);

        &--small {
            @include font-size(small);
        }

        &--large {
            @include font-size(large);
        }

        &--xlarge {
            @include font-size(xlarge);
        }
    }

    &__movable-item-wrapper {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    &__movesidebar {
        border-radius: 0 $border-radius $border-radius 0;
        overflow: hidden;
        margin-bottom: $vertical-rythm--spacing;
        //width: $spacing--large;
        background-color: color(secondary, dark);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 0 0 60px;
        min-height: 100px;

        &--only-down {
            justify-content: flex-end;
        }
        &--only-up {
            justify-content: flex-start;
        }
    }

    &__movebutton {
        @extend .button;
        @extend .button--secondary-fill;
        border: none;
        border-radius: 0;
        padding: 10px 0;
        min-height: 50px;
        margin: 0;
        &:hover,
        &:focus,
        &:active {
            background-color: color(secondary, base);
            color: $color-light;
        }

        .icon {
            vertical-align: middle;
        }
    }

    &--tight {
        .blocklist__movesidebar,
        .blocklist__item {
            margin-bottom: $border-width;
        }
        .blocklist__item {
            padding: vertical-space($spacing--small) $spacing;
        }
    }
}
