article.studip {
    border-color: @content-color-40;
    border-style: solid;
    border-width: 1px;
    margin-bottom: 10px;
    transition: all 300ms ease 0s;
    padding: 10px;

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

    > header {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        flex-wrap: wrap;

        padding: 2px;
        background-color: @content-color-20;
        margin: -10px;
        margin-bottom: 10px;

        > * {
            /* Try to get header aligned by forcing children into centering */
            display: flex;
            align-items: center;

            &:first-child {
                flex: 1;
            }
        }

        h1 {
            padding: 5px;
            margin: 0;
            color: @base-color;
            border-bottom: none;
            font-size: medium;

            > a {
                display: flex;
                align-items: top;
            }

            &,
            > a {
                > img,
                > svg {
                    margin-right: 5px;
                    margin-top: 2px;
                }
            }
        }

        > nav {
            display: flex;
            align-items: center;
            padding: 2px;

            > * {
                border-right: 1px solid @content-color;
                padding-right: 4px;
                margin-right: 4px;

                &:last-child {
                    border-right: none;
                    padding-right: 0;
                    margin-right: 0;
                }

                &.nowrap {
                    white-space: nowrap;
                }
            }

        }
    }

    &.toggle {
        > header {
            h1 > a {
                .icon('before', 'arr_1right', 'clickable');
                &::before {
                    flex: 0 0 auto;
                    margin-right: 5px;
//                    margin-top: 2px;
                    transition: all 200ms ease 0s;
                }
                width: 100%;
            }
            margin-bottom: -10px;

            > *:first-child {
                cursor: pointer;
            }
        }
        &:not(.open) > *:not(header) {
            display: none;
        }

        &.open {
            > header {
                h1 > a {
                    &::before {
                        transform: rotate(90deg);
                    }
                }
                margin-bottom: 10px;
            }
        }
    }

    > footer {
        text-align: center;
        border-color: @content-color-40;
        border-top-style: solid;
        border-width: 1px;
        margin: -10px;
        margin-top: 10px;

        &:empty {
            display: none !important;
            border: 0 !important;
        }
    }

    &.padding-less {
        padding: 0;

        header {
            margin: 0;
        }

        > footer {
            margin: 0;
        }
    }
}

article.new {
    &.toggle {
        > header {
            h1 > a {
                .icon('before', 'arr_1right', 'new');
                &::before {
                    margin-right: 5px;
                }
            }
        }
    }
}