/* Dark theme */
.sm-card {
    --sm-card--background: black;
    --sm-card--color-dark: #e7e9ea;
    --sm-card--color-light: rgb(113, 118, 123);
}

/* Light theme */
.light-theme .sm-card {
    --sm-card--background: white;
    --sm-card--color-dark: black;
    --sm-card--color-light: rgb(83, 100, 113);
}

.sm-card {
    color: var(--sm-card--color-dark);
    font-size: 0.75em;
    padding: 0.5em 1em;
    background-color: var(--sm-card--background);
    border: 2px solid var(--surface-1-border);
    border-radius: 1em;

    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto 1fr auto;
    column-gap: 0.5em;
    max-height: 15em;
    width: 100%;
}

.sm-card__pfp {
    grid-row: span 3;
    width: 2em;
    height: 2em;
    border-radius: 100%;

    overflow: hidden;
}

.sm-card__pfp > img {
    max-width: 100%;
    max-height: 100%;
}

.sm-card__header {
}

.sm-card__display-name {
    font-weight: 700;
    margin-right: 0.5em;
    display: inline-block;
}

.sm-card__handle {
    color: var(--sm-card--color-light);
    display: inline-block;
}

.sm-card__content {
    flex: 1 0 0;
    overflow: hidden;
}

.sm-card__content > svg {
    max-height: 100%;
    max-width: 100%;
}

.sm-card__interactions {
    padding-top: 0.5em;
    flex: 0 0 auto;
    color: var(--sm-card--color-light);

    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sm-card__interactions > span {
    overflow: hidden;
}

.sm-card__interactions svg {
    width: 1em;
    height: 1em;
    vertical-align: text-top;
    margin-right: 0.5em;
}

/* Enable (easy) custom rune colors (to adapt to the theme) */

.sm-card .rune-segment--stroke {
    stroke: var(--rune-color, transparent);
}
.sm-card .rune-segment--fill {
    fill: var(--rune-color, transparent);
}

.sm-card .runic-layer--real .rune-segment--active {
    --rune-color: currentColor;
}
