.ptl-view-switch-wrap {
    container-type: inline-size;
}

.ptl-view-switch {
    --ptl-view-switch-accent: var(--bs-primary);
    display: flex;
    align-items: center;
    gap: .75rem 1rem;
    border-left: .25rem solid var(--ptl-view-switch-accent) !important;
    background-color: var(--bs-body-bg);
}

.ptl-view-switch--text-right {
    flex-direction: row-reverse;
}

.ptl-view-switch__text {
    flex: 1 1 16rem;
    min-width: 0;
}

.ptl-view-switch__button {
    flex: 0 0 auto;
    white-space: normal;
}

@container (max-width: 28rem) {
    .ptl-view-switch,
    .ptl-view-switch--text-right {
        align-items: flex-start;
    }

    .ptl-view-switch--stack-top,
    .ptl-view-switch--stack-top.ptl-view-switch--text-right {
        flex-direction: column;
    }

    .ptl-view-switch--stack-bottom,
    .ptl-view-switch--stack-bottom.ptl-view-switch--text-right {
        flex-direction: column-reverse;
    }

    .ptl-view-switch__text,
    .ptl-view-switch__button {
        flex-basis: auto;
    }
}

@media (max-width: 36rem) {
    .ptl-view-switch,
    .ptl-view-switch--text-right {
        align-items: flex-start;
    }

    .ptl-view-switch--stack-top,
    .ptl-view-switch--stack-top.ptl-view-switch--text-right {
        flex-direction: column;
    }

    .ptl-view-switch--stack-bottom,
    .ptl-view-switch--stack-bottom.ptl-view-switch--text-right {
        flex-direction: column-reverse;
    }

    .ptl-view-switch__text,
    .ptl-view-switch__button {
        flex-basis: auto;
    }
}