// @import "../foundation/mixin/media";

.arkhe-page {

    .notice {
        display: none;
    }

    .notice.-arkhe-beta {
        display: block;
        // font-size: 14px;
    }

    h3:not(:first-child) {
        margin-top: 2.5em;
    }
}

// #arkhe-page-wrap {

//     .notice.-arkhe {
//         display: block !important;
//         font-size: 14px;
//     }
// }

.arkhe-notice {
    margin: 20px 0;
    padding: 12px;
    background: #fff;
    // border: 1px solid #ccd0d4;
    border-left: 4px solid #ccd0d4;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .04);

    &.-warning {
        border-left-color: #ffc400;
    }

    &.-error {
        border-left-color: #fc3310;
    }

    &.-ok {
        border-left-color: #69d35f;
    }
}


.arkhe-page__logo {
    max-width: 160px;
}

.arkhe-page__header {
    display: flex;
    flex-wrap: wrap;
    margin: 24px 0;

    .button {
        margin-right: 8px;
    }
}

.arkhe-page__body {
    padding: 8px;
}

.arkhe-page__plugins {
    display: flex;
    flex-wrap: wrap;


    .__plugin {
        display: block;
        flex-basis: 320px;
        box-sizing: border-box;
        margin: 8px;
        padding: 1em;
        color: #333;
        text-decoration: none;
        background: #fdfdfd;
        border-radius: 4px;
        box-shadow: 0 0 12px -2px rgba(0, 0, 0, .15);
        transition: box-shadow .25s;

        @media ( max-width: 900px ) {
            flex-basis: 46%;
            margin: 2%;
        }

        &:hover {
            box-shadow: 0 0 16px 0 rgba(0, 0, 0, .2);
        }
    }

    .__img {
        display: block;
        width: 100%;
    }

    .__title {
        margin: 16px 0 0;
        font-weight: bold;
        font-size: 16px;
    }

    .__desc {
        margin-top: 8px;
        font-size: 13px;
    }
}

.arkhe-info {
    padding: 1em;
    font-size: 14px;
    background: #fdfdfd;

    li {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 8px 4px;
    }

    .__date {
        display: block;
        min-width: 5em;
        margin-right: 8px;
        padding: 2px 8px;
        color: #3f3f3f;
        font-size: 13px;
        font-family: Arial, sans-serif;
        line-height: 1.5;
        background: #193b6514;
        border-radius: 3px;
    }

    .__title {
        display: block;
        // font-size: 13px;
    }
}