.metadata {
    display: flex;
    flex-direction: column;
    align-items: end;
    font-size: 0.9em;
    white-space: nowrap;
    margin-left: auto;
    min-width: 0;
    overflow: clip;
    flex-basis: 30%;
    flex-shrink: 2;

    .info {
        display: block;

        .time {
            display: inline-block;
            margin-right: 0.5em;
        }

        a.time {
            color: var(--font-color);
        }

        .visibility {
            display: inline-block;
            vertical-align: middle;
            font-size: 1rem;
        }
    }
}

.ticker {
    --color: var(--highlight-color);
    display: inline-flex;
    gap: 0.5em;
    align-items: center;
    /*Left align so the right side is truncated*/
    align-self: start;
    /*Margin on the left so non truncated names are aligned to the right*/
    margin-left: auto;
    padding: 0 0.2rem;
    background-color: var(--color);
    border-radius: 4px;
    font-size: 0.9em;
    text-overflow: ellipsis;
    overflow: clip;
    .icon {
        width: 1rem;
        height: 1rem;
        color: transparent;
        border-radius: 4px;
        line-height: 1;
    }
    .instance {
        text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
    }
}

@media (max-width: 1000px) {
    .metadata {
        flex-basis: 25%;
        
        .instance {
            display: none;
        }
    }
}