styleguide/components/25-templates/panel/_panel.scss
#arneo-browser-highlight {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2147483645;
    pointer-events: none;

    div {
        position: absolute;
        border: 2px dashed var(--highLight-color);
        border-radius: 6px;
    }

    p {
        position: absolute;
        top: 0;
        left: 0;
        padding: 4px;
        background-color: var(--highLight-color);
        color: $color-white;
        font-size: 10px;
        font-weight: bold;
        line-height: 1.2;
        border-top-left-radius: 4px;

        &:empty {
            display: none;
        }
    }
}

.l-extension__contentWrapper {
    display: grid;
    grid-template-areas:
        'header'
        'content'
        'highlight';
    grid-template-rows: auto 1fr auto;
    height: 100vh;
    background-color: $color-white;

    @include tablet-up {
        grid-template-areas:
            'header header'
            'content highlight';
        grid-template-columns: 1fr auto;
    }
}

.l-extension__header {
    grid-area: header;
}

.l-extension__content {
    flex: 1;
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 1fr;
    grid-area: content;
    overflow: auto;
}

.l-extension__aside {
    position: relative;
    max-width: 160px;
    background-color: $color-white;
    min-height: 0px;

    .m-topicList {
        height: 100%;
    }
}

.l-extension__main {
    display: flex;
    flex-direction: column;
    gap: 32px;
    padding: 0 12px;
    background-color: var(--color-grey-6);
    overflow: auto;
}

.l-extension__filters {
    position: sticky;
    top: -18px;
    display: flex;
    flex-direction: column;
    padding: 0 8px;
    gap: 4px;
    z-index: 5; // Over .o-topic__top
}

.l-extension__filters__title {
    font-size: 10px;
}

.l-extension__topicList {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.l-extension__highlightList {
    grid-area: highlight;
    display: flex;
    flex-direction: column;

    @include tablet-down {
        width: 100%;
        max-height: 35vh;
    }

    @include tablet-up {
        width: 30vw;
        height: 100%;

        .o-highlightList__list {
            max-height: none;
        }
    }
}
