//
// The soft card that wraps a page's content, plus the pieces that sit inside
// it. The "account" and "from LSI" pages are the same component wearing two
// names; they share everything here and only diverge on mobile, where the
// From-LSI panel flattens into the page and the account panel stays a card.
//

%portal-page {
    max-width: $portal-content-max;
}

%portal-panel {
    padding: 28px 36px;
    background: $portal-soft-card;
    border-radius: 12px;
    box-shadow: $portal-panel-shadow;
}

%portal-divider {
    height: 1px;
    margin: 24px 0;
    background: $portal-line;
}

%portal-panel-title {
    margin: 0 0 20px;
    color: $portal-heading;
    font-family: $portal-serif;
    font-weight: 400;
    line-height: 1.15;
}

// Icon tile used for a file/resource row.
%portal-file-icon {
    width: 48px;
    height: 48px;
    border-radius: 7px;
    background: $portal-menu-text;

    img {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }
}

//
// Account pages (settings, receipts)
//
.account-page {
    @extend %portal-page;
}

.account-panel {
    @extend %portal-panel;
}

.account-panel+.account-panel {
    margin-top: 28px;
}

.account-section-title {
    @extend %portal-panel-title;
    font-size: 25px;
}

.account-section-copy {
    margin: 0;
    color: $portal-text;
    font-size: 15px;
    line-height: 1.6;
}

.account-divider {
    @extend %portal-divider;
}

.account-file-icon {
    @extend %portal-file-icon;
}

@include media-breakpoint-down(lg) {
    .account-panel {
        padding: 24px 32px;
    }

    .account-section-title {
        font-size: 28px;
    }
}

@include media-breakpoint-down(sm) {
    .account-panel {
        padding: 28px 24px;
    }
}

//
// "From LSI" pages (events, assets, photos)
//
.from-lsi-page {
    @extend %portal-page;
}

.from-lsi-panel {
    @extend %portal-panel;
}

.from-lsi-panel__intro {
    color: $portal-ink;
    font-size: 14px;
    line-height: 1.5;
}

.from-lsi-divider {
    @extend %portal-divider;
}

.from-lsi-section-title {
    @extend %portal-panel-title;
    margin-bottom: 18px;
    font-size: 24px;
}

.from-lsi-section-subtitle {
    color: $portal-text;
    font-size: 13px;
    line-height: 1.5;
}

.lsi-event-thumb {
    width: 84px;
    height: 84px;
    border-radius: 8px;
    background: $portal-placeholder;
    object-fit: cover;
}

.lsi-event-title {
    color: $portal-heading;
    font-family: $portal-serif;
    font-size: 20px;
    font-style: italic;
    font-weight: 400;
    line-height: 1.2;
}

.lsi-event-meta {
    color: $portal-muted-light;
    font-size: 14px;
    line-height: 1.4;
}

.lsi-row-arrow {
    width: 24px;
    height: 24px;
    object-fit: contain;
}

.lsi-resource-row,
.lsi-simple-row {
    width: 100%;
    padding: 0;
    border: 0;
    color: $portal-ink;
    background: transparent;
    text-align: left;
}

.lsi-resource-row:hover,
.lsi-simple-row:hover {
    color: $portal-ink;
}

.lsi-resource-title {
    color: $portal-ink;
    font-size: 14px;
    line-height: 1.35;
}

.lsi-resource-meta {
    margin-top: 6px;
    color: $portal-field-placeholder;
    font-size: 11px;
    line-height: 1.3;
}

@include media-breakpoint-down(lg) {
    // Unlike the account panel, this one dissolves into the page on mobile.
    .from-lsi-panel {
        padding: 24px 0 0;
        background: $portal-white;
        border-radius: 0;
        box-shadow: none;
    }

    .from-lsi-divider {
        margin: 20px 0;
    }

    .lsi-event-thumb {
        width: 72px;
        height: 72px;
    }
}

@include media-breakpoint-down(sm) {
    .lsi-event-thumb {
        width: 60px;
        height: 60px;
    }
}