/* ****************************************************************************
 * COMPONENTS: BORDER FRAME
 */

@import "../common/mixins";

.wpmud .wphb-border-frame {
    border: 1px solid #E6E6E6;
    border-radius: 5px;
    margin: 10px 0 0 !important;

    .table-header,
    .table-row {
        display: flex;
        justify-content: space-between;
        padding: 15px 30px;
    }

    .table-header {
        color: #333333;
        font-size: 13px;
        font-weight: bold;
        border-bottom: 1px solid #E6E6E6;
    }

    .table-row {
        border-bottom: 1px solid #E6E6E6;

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

    .table-content {
        display: flex;
        justify-content: space-between;
        font-size: 13px;
        font-weight: 500;

        strong { color: #333333; }
        span { color: #888888; }
    }

    hr {
        width: 85%;
        margin: 30px auto 0;
    }
}

// Logging box
.sui-border-frame {
    .wphb-logging-buttons {
        margin: 10px 0 0;
    }

    &.wphb-logging-box > a:last-of-type {
        display: block;
        margin-top: 10px;
    }
}

@include bp(tablet) {
    .wpmud .wphb-border-frame {
        border: 0
    }
}

@include bp(phone) {
    .wpmud .wphb-border-frame .table-header,
    .wpmud .wphb-border-frame .table-row {
        padding: 15px 0;
    }
}