footer {
    @include transition(bottom 0.5s ease 1s);
    @include row();
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 2px rgba(255, 255, 255, 0.5);
    background: $color-grey-1;
    color: $color-white;
    margin-top: $mobile-nice-padding;

    ul {
        @include unlist();
    }

    li {
        float: left;
        margin-right: 1em;

        li,  // dropdown li
        &:last-child {
            margin-right: 0;
        }
    }

    .actions {
        width: 250px;

        &--primary {
            width: 350px;
        }

        .dropdown {
            input[type=submit],
            input[type=reset],
            input[type=button],
            button,
            .button {
                padding-right: 2.6em;
            }
        }
    }

    .preview .dropdown {
        width: 250px;
    }

    .meta {
        float: right;
        text-align: right;
        padding: 7px $grid-gutter-width / 2;
        font-size: 0.85em;

        p {
            margin: 0;
            margin-right: $grid-gutter-width;
            white-space: nowrap;
        }

        a {
            color: inherit;

            &:hover {
                color: $color-link;
            }
        }
    }

    @include media-breakpoint-down(xs) {
        .actions,
        .preview,
        .preview .dropdown {
            width: 100%;
        }

        .meta {
            p {
                white-space: normal;
                width: 100%;
            }

            .avatar {
                left: auto;
            }
        }
    }

    @include media-breakpoint-up(sm) {
        margin-left: calc(#{$desktop-nice-padding} - 0.75em);
        margin-right: $desktop-nice-padding;
        width: auto;
        position: fixed;
        bottom: 0;
        padding: 0.75em;
    }
}
