/*
 * GotGameHub Access Requests
 */

.ggh-access-requests {
    width: 100%;
    max-width: 900px;
}

.ggh-access-requests > h2 {
    margin: 0 0 22px;
}

.ggh-access-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 28px;
    padding: 0;
    border-bottom: 1px solid #e1e5e9;
}

.ggh-access-tab {
    position: relative;
    appearance: none;
    border: 0;
    border-radius: 7px 7px 0 0;
    background: transparent;
    color: #606a75;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    font-weight: 600;
    padding: 12px 16px;
}

.ggh-access-tab:hover,
.ggh-access-tab:focus {
    background: #f5f7f9;
    color: #17202a;
}

.ggh-access-tab.is-active {
    background: #f2f6f9;
    color: #17202a;
}

.ggh-access-tab.is-active::after {
    position: absolute;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 3px;
    background: #343b45;
    content: "";
}

.ggh-access-panel[hidden] {
    display: none !important;
}

.ggh-access-panel > h3 {
    margin-top: 0;
}

.ggh-access-request-card {
    margin: 0 0 14px;
    padding: 20px;
    border: 1px solid #e1e5e9;
    border-radius: 10px;
    background: #fff;
    scroll-margin-top: 30px;
}

.ggh-access-request-card:target,
.ggh-access-request-card.is-highlighted {
    border-color: #343b45;
    box-shadow: 0 0 0 2px rgba(52, 59, 69, .10);
}

.ggh-access-request-card h4 {
    margin: 0 0 12px;
}

.ggh-access-request-card p {
    margin: 7px 0;
}

@media (max-width: 600px) {

    .ggh-access-tabs {
        gap: 5px;
    }

    .ggh-access-tab {
        flex: 1 1 auto;
        padding: 11px 10px;
        font-size: 14px;
    }
}

/*
 * Settings-style tab buttons
 */
.ggh-access-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 28px;
    padding: 0;
    border: 0;
}

.ggh-access-tab {
    position: relative;
    appearance: none;
    border: 1px solid #d6d9dd;
    border-radius: 4px;
    background: #eeeeee;
    color: #333333;
    cursor: pointer;
    font: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    padding: 11px 18px;
    transition:
        background-color .15s ease,
        border-color .15s ease;
}

.ggh-access-tab:hover,
.ggh-access-tab:focus {
    border-color: #c4c8cc;
    background: #e4e4e4;
    color: #222222;
}

.ggh-access-tab.is-active {
    border-color: #bfc3c7;
    background: #d8d8d8;
    color: #111111;
    font-weight: 600;
}

.ggh-access-tab.is-active::after {
    display: none;
}

@media (max-width: 600px) {
    .ggh-access-tabs {
        gap: 7px;
    }

    .ggh-access-tab {
        flex: 1 1 auto;
        padding: 10px 12px;
        font-size: 14px;
    }
}

/*
 * Keep Access Request view buttons together
 * whenever the account content area has room.
 */
.ggh-access-tabs {
    flex-wrap: nowrap;
    gap: 8px;
}

.ggh-access-tab {
    flex: 0 1 auto;
    white-space: nowrap;
    padding-left: 14px;
    padding-right: 14px;
}

@media (max-width: 520px) {

    .ggh-access-tabs {
        flex-wrap: wrap;
    }

    .ggh-access-tab {
        flex: 1 1 auto;
        white-space: normal;
    }
}

/*
 * Access Request status badges
 */
.ggh-access-request-status-line {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
}

.ggh-access-status {
    display: inline-flex;
    align-items: center;
    min-height: 26px;
    padding: 3px 9px;
    border: 1px solid #d5d9dd;
    border-radius: 4px;
    background: #f1f2f3;
    color: #343b45;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}

/* Successful/active authorization */
.ggh-access-status--approved {
    border-color: #b8d7c1;
    background: #edf7f0;
    color: #28643a;
}

/* Action still required */
.ggh-access-status--pending {
    border-color: #e2d39e;
    background: #faf6e8;
    color: #705c18;
}

/* Request explicitly declined */
.ggh-access-status--denied {
    border-color: #e1b8b8;
    background: #faeeee;
    color: #843434;
}

/* Closed without a decision */
.ggh-access-status--cancelled,
.ggh-access-status--expired {
    border-color: #d3d7db;
    background: #f1f2f3;
    color: #59616a;
}