src/components/collapse/style.scss
@import 'mo/style/common';

$collapse__extra: #{$collapse}__extra;
$split_pane_visible: #{$split}__pane__item--visible;

$header-size: 26px;

#{$collapse} {
    background-color: var(--sideBar-background);
    color: var(--sideBar-foreground);
    height: 100%;

    &:focus-within {
        #{$collapse__extra} {
            opacity: 1;
        }
    }

    &__pane {
        transition: top ease-out 0.15s, height ease-out 0.15s;

        &:first-child #{$collapse}__header {
            border-top-color: transparent;
        }
    }

    &__item {
        height: 100%;
        line-height: 22px;
        overflow: hidden;
        width: 100%;

        &:hover {
            #{$collapse__extra} {
                opacity: 1;
            }
        }
    }

    &__header {
        align-items: center;
        border-bottom: 1px solid transparent;
        border-top: 1px solid var(--sideBarSectionHeader-border, transparent);
        box-sizing: border-box;
        cursor: pointer;
        display: flex;
        font-size: 11px;
        font-weight: bold;
        height: $header-size;
        outline: 1px solid transparent;
        outline-offset: -1px;
        padding: 1px 2px;
        user-select: none;

        &:focus {
            outline-color: var(--list-focusOutline);
        }

        &__title {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }
    }

    &__extra {
        margin: 0 0 0 auto;
        opacity: 0;

        #{$actionBar}__label.codicon {
            height: inherit;
            line-height: inherit;
        }
    }

    &__content {
        flex: 1;
        height: calc(100% - $header-size);
        outline: 1px solid transparent;
        outline-offset: -1px;
        padding: 0 1px;

        &:focus {
            outline-color: var(--list-focusOutline);
        }
    }
}
