/* Base Shelf Styles, don't change these ------------------------------------ */

:root {
    --default-shelf-size: 420px;
    --transition-default: transform 300ms ease-in-out;
}

[class^="shelf-container-"] {
    position: fixed;
    width: var(--default-shelf-size);
    height: var(--default-shelf-size);
    padding: 40px;
    background-color: white;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    transition: var(--transition-default);
    overflow: hidden;
    z-index: 600;
}

.shelf-container-top {
    width: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
}

.shelf-container-bottom {
    width: 100%;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(100%);
}

.shelf-container-left {
    height: 100%;
    top: 50%;
    left: 0;
    transform: translateX(-100%) translateY(-50%);
}

.shelf-container-right {
    height: 100%;
    top: 50%;
    right: 0;
    transform: translateX(100%) translateY(-50%);
}

:is(.shelf-container-top, .shelf-container-bottom).open {
    transform: translateX(-50%) !important;
}

:is(.shelf-container-left, .shelf-container-right).open {
    transform: translateY(-50%) !important;
}

[class^="edge-container-"] {
    transition: var(--transition-default);
    z-index: 500;
}

.edge-container-top {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}

.edge-container-bottom {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}

.edge-container-left {
    position: fixed;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.edge-container-right {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

/* Cortex Specific Styles --------------------------------------------------- */

.close-info-shelf {
    position: fixed;
    top: 70px;
    left: 10px;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
}

.shelf-text {
    padding: 40px;
}

.shelf-nav {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0 40px;
}

.shelf-nav p {
    margin: auto;
}

.shelf-prev, .shelf-next {
    width: auto;
    height: 50px;
}

.shelf-prev {
    transform: rotate(180deg);
}

.shelf-next {
    margin-left: auto;
}

.shelf-icon-left {
    transform: translateX(-150%);
    transition: var(--transition-default);
}

.shelf-content p {
    padding: 10px 0;
    color: var(--colour-primary);
}

#stationDetails {
    width: 50%;
    padding: 40px;
    scrollbar-width: none; /* For Firefox */
}

#stationDetails .anothercontainer {
    height: 100%;
    display: grid;
    grid-template-columns: auto;
}

#stationDetails::-webkit-scrollbar, #stationDetails .shelf-content::-webkit-scrollbar {
    width: 0; /* For Chrome, Safari, and Opera */
}

#stationDetails::-webkit-scrollbar-thumb, #stationDetails .shelf-content::-webkit-scrollbar-thumb {
    background-color: transparent; /* keepin it sleek */
}

#stationDetails [class^="shelf-container-"] {
    transform: translateX(100%) translateY(-50%);
    width: 100%;
    padding: 40px;
    box-shadow: none;
}

#stationDetails .shelf-content {
    height: 100%;
    padding: 40px;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    scrollbar-width: none; /* For Firefox */
}

/* region filter tab */

#filters button {
    margin: 0;
}

#filters {
    display: flex;
    flex-direction: column;
}

#filters {
    overflow: scroll;
}

/* endregion */

/* region hideInner */

#stationDetails.hideInner {
    width: 40%;
    padding: 40px;
}

#stationDetails.hideInner [class^="shelf-container-"] {
    display: none;
}

.hideInner .shelf-text {
    overflow: hidden;
}

.hideInner .shelf-nav {
    display: none;
}

.hideInner .shelf-content {
    padding: 40px !important;
    max-height: 95vh;
    overflow-y: hidden;
}

/* endregion */

/* region responsive */

@media only screen and (max-width: 1400px) {
    #inner-stationDetails2 .shelf-content {
        padding: 40px 5px;
    }

    .shelf-text {
        padding: 0;
    }

    .hideInner .shelf-content {
        padding: 40px 0 0 0 !important;
    }

    .shelf-nav {
        padding: 0;
    }
}

/* endregion */