:root {
    --sc-listdetails-details-gutter: 36px;
}

/* ANY SCREEN SIZE */
.sc-listdetails-container {
    overflow: hidden;
}

.sc-list-container {
    background-color: var(--tgpl-lighter);
    height: 100%;
}

.sc-list-container .rz-card {
    margin-bottom: 0.5rem;
}

.sc-details-container {
    background-color: var(--tgpl-lightest);
    width: calc(100% - 12px);
    height: 100%;
}

/* COMPONENTS */
.sc-expand-collapse-button {
    position: absolute;
    top: 0;
    left: 0;
    width: 32px;
}

    .sc-expand-collapse-button button {
        width: var(--sc-listdetails-details-gutter);
        padding: 0;
    }

    .sc-expand-collapse-button i {
        font-size: 24px;
    }

/* MOBILE */
.sc-listdetails-container.sc-mobile .sc-details-container {
    border-left: 1px black solid;
}

.sc-listdetails-container.sc-mobile {
    position: relative;
}

    .sc-listdetails-container.sc-mobile .sc-list-container {
        width: calc(100% - 36px);
    }

    .sc-listdetails-container.sc-mobile .sc-details-container {
        position: absolute;
        top: 0;
        z-index: 100;
        padding-left: var(--sc-listdetails-details-gutter);
    }

        .sc-listdetails-container.sc-mobile .sc-details-container.sc-collapsed {
            left: calc(100% - 36px);
            transition: left 0.3s ease;
        }

        .sc-listdetails-container.sc-mobile .sc-details-container.sc-expanded {
            left: 12px;
            transition: left 0.3s ease;
        }