.opengraph-area {
    margin: 10px auto 5px;
    max-width: 700px;

    .switcher {
        list-style: none;
        text-align: right;

        li {
            border-top: thin solid var(--dark-gray-color-20);
            display: inline-block;
            padding: 5px;

            &:first-child {
                border-left: thin solid var(--dark-gray-color-20);
            }
            &:last-child {
                border-right: thin solid var(--dark-gray-color-20);
            }
        }
        .switch-left,
        .switch-right {
            @include hide-text;
            @include square(var(--icon-size-default));
            padding: 0;
            color: var(--color--highlight);

            &:not([disabled]) {
                cursor: pointer;
            }
            &[disabled] {
                color: var(--color--font-inactive);
            }
        }
        .switch-left {
            @include icon(before, arr_1left);
        }
        .switch-right {
            @include icon(before, arr_1right);
        }
    }

    .js & .opengraph.hidden,
    .js &:not(.handled) .opengraph:not(:first-of-type) {
        // The second selector prevents flash of content before everything
        // is setup
        display: none;
    }
}

.opengraph {
    $padding: 10px;
    $height: 120px;

    @include clearfix;

    font-size: 0.8em;
    border: 1px solid var(--dark-gray-color-20);
    padding: $padding;
    min-height: $height;

    a.info {
        box-sizing: border-box;
        color: var(--black);
        display: block;
        word-break: normal !important;
        &:hover {
            color: var(--black);
        }
    }
    .image {
        @include square($height);
        background-size: contain;
        background-position: left center;
        background-repeat: no-repeat;
        display: inline-block;
        float: left;
        margin-right: $padding;
    }
}