.tb-map-list-splitscreen {
    position: relative;
}

.tb-map-list-splitscreen--is-active {
    position: fixed;
    display: flex;
    flex-direction: column;
    padding: 0 config('padding.4') config('padding.4');
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: config('colors.white');
    overflow-y: scroll;

    // Needed for overlapping project header
    z-index: 9999;
}

.tb-map-list-splitscreen__header {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid config('colors.grey-light');
    margin-bottom: $spacing-5;
    padding: $spacing-base 0;
}

.tb-map-list-splitscreen__map {
    display: none;
    z-index: 0;
    height: 50vh;
    width: 100%;

    @screen lg {
        margin-top: 0;
        height: 100%;
        flex: 1;
        order: 9999; // last
    }
}

.tb-map-list-splitscreen--is-active .tb-map-list-splitscreen__map {
    display: block;
}

.tb-map-list-splitscreen__list {
    width: 100%;

    @media screen and (max-width: 1024px) {
        padding-bottom: 8rem;
    }
}

.tb-map-list-splitscreen--is-active .tb-map-list-splitscreen__list {
    @screen lg {
        flex: 1;
        height: 100%;
        margin-right: config('margin.4');
    }
}

.tb-map-list-splitscreen__body {
    overflow-y: scroll;

    @screen lg {
        display: flex;
        flex: 1;
        overflow: hidden;
    }
}

.tb-map-list-splitscreen--is-active .tb-map-list-splitscreen__list {
    padding-top: 0;
}

.tb-map-list-splitscreen__toggle-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;
}

.tb-map-list-splitscreen--is-active .tb-map-list-splitscreen__toggle-wrapper {
    padding-right: config('padding.4');
    padding-top: config('padding.4');
}

.tb-splitscreen-trigger {
    @apply border border-grey text-grey-darker rounded-sm no-underline inline-block py-2 px-3;
}

.tb-splitscreen-trigger--is-active {
    @apply bg-secondary text-white border-secondary;
}

.tb-splitscreen-trigger__label {
    display: none;
}

.tb-splitscreen-trigger__label--show {
    display: block;
}

.tb-splitscreen-trigger--is-active .tb-splitscreen-trigger__label--show {
    display: none;
}

.tb-splitscreen-trigger--is-active .tb-splitscreen-trigger__label--hide {
    display: block;
}
