.SuiteSidebarPortal {
    display: flex;
}

.SuiteSidebar-container {
    display: none;
    width: 400px;
    overflow: hidden;

    &:has(> .SuiteSidebar) {
        display: block;
        width: 0;
        transition: width 1s ease-in-out;
    }

    &:has(> .SuiteSidebar.open) {
        display: block;
        width: 400px;

        /* stylelint-disable scss/at-rule-no-unknown */
        @starting-style {
            width: 0;
        }
        /* stylelint-enable */
    }
}

.SuiteSidebar {
    background-color: var(--container-fills-backgrounds-page);
    display: flex;
    flex-direction: column;
    width: 400px;
    height: 100%;
    border-left: 1px solid var(--dividers-light-stroke);

    &-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--padding-extra-large) var(--padding-extra-large) var(--padding-large);
        height: 60px;

        &-title {
            margin-bottom: 0;
        }

        &:has(.SuiteSidebar-header-title) {
            height: 80px;
        }
    }

    &-scrollmask {
        overflow: hidden;
        flex: 1;

        &.scrollTop {
            mask-image: linear-gradient(to bottom, transparent, black 24px, black);
        }
    }

    &-content {
        @include permanent-scrollbar;

        position: relative;
        padding: var(--padding-large) var(--padding-extra-large);
        height: 100%;
        overflow: auto;
    }
}