.rcv2-columns {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    width: 100%;
    min-width: 0;
}

.rcv2-primary {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
    overflow: visible;
    transition: flex-grow var(--rcv2-layout-duration, 300ms) cubic-bezier(.22, 1, .36, 1), flex-basis var(--rcv2-layout-duration, 300ms) cubic-bezier(.22, 1, .36, 1);
}

.rcv2-secondary {
    position: relative;
    align-self: stretch;
    flex: 0 0 0;
    width: 0;
    min-width: 0;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transition: flex-grow var(--rcv2-layout-duration, 300ms) cubic-bezier(.22, 1, .36, 1), flex-basis var(--rcv2-layout-duration, 300ms) cubic-bezier(.22, 1, .36, 1), opacity var(--rcv2-fade-duration, 180ms) ease;
}

.rcv2-columns.rcv2-open > .rcv2-primary {
    flex: var(--rcv2-primary-ratio, 2) 1 0;
    width: auto;
}

.rcv2-columns.rcv2-open > .rcv2-secondary {
    flex: var(--rcv2-secondary-ratio, 1) 1 0;
    width: auto;
    pointer-events: auto;
}

.rcv2-columns.rcv2-content-visible > .rcv2-secondary {
    opacity: 1;
    overflow: visible;
}

.rcv2-columns.rcv2-no-transition > .rcv2-primary,
.rcv2-columns.rcv2-no-transition > .rcv2-secondary {
    transition: none;
}

.rcv2-columns.rcv2-open > .rcv2-secondary::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    min-height: 100svh;
    border-left: 1px solid var(--fw-white-300);
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    transition: opacity 120ms ease;
}

.rcv2-secondary-sticky > .rcv2-secondary > .rcv2-secondary-sticky-wrapper {
    position: sticky;
    top: calc(var(--rcv2-sticky-top, 0px) + var(--rcv2-sticky-buffer, 0px));
    max-height: calc(100dvh - var(--rcv2-sticky-top, 0px) - var(--rcv2-sticky-buffer, 0px));
    overflow-y: auto;
}