.pso-page {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: var(--G4);

    // TEMP
    .pso-navbar {
        margin-bottom: 0;
    }
}

.pso-tabs {}

.pso-tabs--members {
    .pso-tabs__item {
        flex-grow: 1;
        justify-content: center;
    }

    @include mq($from: desktop) {
        .pso-tabs__item {
            width: 50%;
        }

        .pso-btn {
            --fs: var(--FS--MD);
        }
    }
}

// MEMBERS //
.pso-page--members {}

.pso-members {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--G4);

    .ps-alert {
        grid-column: 1 / -1;
    }
}

.pso-members--grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: var(--G4);
}

.pso-members--list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border-radius: var(--BORDER-RADIUS--MD);
    box-shadow: var(--BOX-SHADOW--HARD);
}

// temp
.ps-members-item-popup {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    .pso-member {
        box-shadow: none !important;
        border: 1px solid var(--DIVIDER);
    }
} // temp

.pso-members__header {
    display: flex;
    align-items: center;
    gap: var(--G2);
}

.pso-members__search {
    display: flex;
    align-items: center;
    flex-grow: 1;
    gap: var(--G1);
    padding: var(--G1);
    background-color: var(--PS-COLOR--APP);
    border-radius: var(--BORDER-RADIUS--MD);
    box-shadow: var(--BOX-SHADOW--HARD);

    > i {
        padding-inline: var(--G2);
        color: var(--c-contrast-slight);
    }

    .pso-btn {
        --h: 35px;
        --ic: var(--c-contrast-slight);
        --bg: transparent;
    }

    @include mq($from: desktop) {
        > i {
            padding-inline: var(--G3);
        }
    }
}

.pso-members__input {
    flex-grow: 1;

    .pso-input {
        @include reset--input;

        width: 100%;
    }
}

.pso-members__view {
    display: inline-flex;
    gap: var(--G1);
    padding: var(--G1);
    background-color: var(--PS-COLOR--APP);
    border-radius: var(--BORDER-RADIUS--MD);
    box-shadow: var(--BOX-SHADOW--HARD);

    .pso-btn {
        --h: 35px;
        --ic: var(--c-contrast-slight);
        --bg: transparent;
        --ac-c: var(--c-primary-dark);
        --ac-ic: var(--c-primary-dark);
        --ac-bg: color-mix(in srgb, currentColor 10%, transparent);
    }
}