@import './pure-material-indigo-cyan-slim.css';

.icon-logo
    display: block;
    color: #fff;
    width: 56rem;
    height: 56rem;
    padding: 12rem;

body>header>nav
    justify-content: left;

body>header
    color: #fff;

svg
    fill: currentColor;

[data-list]>li>:first-child
    display: flex;

$seconds = 200;

@keyframes fadeIn
    0%
        opacity: 0;
        transform: translate(10%, 0%);
    100%
        opacity: 1;
        transform: translate(0%, 0%);
.fadeIn
    animation fadeIn ($seconds)ms ease-in-out normal

[data-fab]
    bottom: 72rem;

[data-fab*="back"]
    line-height: 52rem;
    font-size: 30rem;
    padding: 0 4rem 0 0;

.comment-item
    overflow: hidden;
    border-top: 1rem solid #ccc;
    padding: 16rem;
    margin-top: 16rem;
    &>div
        overflow: hidden;

section>.comment-item
    margin: 0 -16rem 0;
    border-top: 0;

.collapse-button
    display: block;
    padding: 4rem;
    line-height: 1;

.comments-collapsed
    padding: 4rem;
    line-height: 1;

@media only screen and (max-width: 375px) {
    nav>a, nav>a[data-button] {
        padding: 12rem 10rem;
        min-width: 0;
    }
}

[data-list=three-line]>li>:first-child>[class*=icon], [data-list=two-line]>li>:first-child>[class*=icon]
    display: block;
    margin-right: 8rem;
    flex: none;
    font-size: 14rem;
    margin-left: -8rem;

article
    &>section[data-card]
        max-width: 840rem;

[data-list]>li>*
    font-size: 14rem;

[data-list]>li small
    font-size: 0.8em;
    opacity: 1;
    padding: 0;

[data-list]>li>span>span>a
    max-height: 32rem;
    overflow: hidden;

body>header:nth-child(2)>nav
    justify-content: center;

a[data-button][disabled]
    visibility: hidden;
