/* -------------------------------------------------------------------------------------- */
/* reset */
/* -------------------------------------------------------------------------------------- */
:root {
    --col_ld_bg: var(--col-modal, black);
    --col_ld_bg_200: var(--col-black-200, grey);
    --col_ld_bg_300: var(--col-black-300, grey);
    --col_ld_bg_350: #565656;
    --col_ld_bg_400: #3f3f3f;
    --col_ld_bg_500: #333333;
    --col_ld_bg_600: #2e2e2e;
    --col_ld_bg_700: #262626;

    --ld_win_highlight: var(--ld_col_primary_400, Yellow);
    --ld_win_hover: var(--ld_col_primary_200, LightYellow);

    --hover_transiton_dur: .1s;
}



.ld_win *,
.ld_win *::before,
.ld_win *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}



/* -------------------------------------------------------------------------------------- */
/* vars */
/* -------------------------------------------------------------------------------------- */

:root {
    --ld_win_border_rad: 5px;
}



/* -------------------------------------------------------------------------------------- */
/* win */
/* -------------------------------------------------------------------------------------- */

.ld_win {
    width: 100%;
    height: 100%;
}

.ld_tab_content_container {
    overflow-y: auto;
    /* aspect-ratio: 2.5 / 1; */
    height: 100%;
    width: 100%;

    box-sizing: content-box;
    border: 2px solid var(--col_ld_bg_500);
}

.ld_win_dialog {
    height: 90%;
    width: min(95%, 900px);
    margin: 3rem auto auto auto;

    background-color: var(--col-modal, black);
    border-radius: var(--ld_win_border_rad);
}

.ld_content {
    height: 100%;
    width: 100%;
    /* width: min(100%, 200vh); */
    margin: auto;

    /* display: grid; */
    /* grid-template-columns: 1fr 12fr; */
    display: flex;
}


.ld_tab_group {
    display: grid;
    grid-auto-rows: minmax(0, 1fr);
    /* grid-auto-flow: column; */
    /* grid-template-rows: repeat(auto-fit, minmax(8em, 1fr)); */
    align-items: center;
    justify-items: center;
    width: 5em;
}

.ld_tab {
    background-color: var(--col_ld_bg_700);
    color: var(--col_ld_bg_300);
    height: 100%;
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
}

.ld_tab > span {
    text-overflow: ellipsis;
    overflow: hidden;
    max-height: 90%;
    max-width: 90%;
    white-space: nowrap;
}

.ld_tab:not(.ld_tab_selected):hover {
    background-color: var(--col_ld_bg_350);
    color: var(--col_ld_bg_700);
}

.ld_tab_group span {
    font-weight: bold;
    font-size: 1.2em;

    writing-mode: vertical-lr;
    transform: rotate(180deg);
}

.ld_tab_selected {
    background-color: var(--col_ld_bg_500);
    color: var(--ld_win_highlight);
}


.ld_tab_content {
    width: 100%;
    height: 100%;
}

.ld_tab_content:not(.ld_tab_content_selected) {
    display: none;
}


@media screen
and (min-height: 540px) {

    .ld_win_dialog_medium {
        height: 500px;
    }
}



/* -------------------------------------------------------------------------------------- */
/* content */
/* -------------------------------------------------------------------------------------- */

.ld_win_content {
    width: 100%;
    height: 100%;

    font-size: min(1em, 3vmin);

    display: flex;
    flex-direction: column;
}

.ld_win_border {
    background-color: var(--ld_win_highlight);
    height: 2px;
    width: 100%;
}




/* -------------------------------------------------------------------------------------- */
/* header */
/* -------------------------------------------------------------------------------------- */

.ld_win_header {
    padding: .5em;

    display: flex;
    justify-content: space-between;
}

.ld_win_header_left {
    display: flex;
}

.ld_win_header_right {
    display: flex;
    gap: .25em;
}

/* buttons */
/* ------- */
.ld_win_btn {
    padding: .2em;
    font-size: 1.2em;

    background-color: var(--ld_win_highlight);
    color: black;
    border: none;

    min-width: 1.8em;
}

.ld_win_btn:hover {
    background-color: var(--ld_win_hover);
    /* color: white; */
}

.ld_win_btn > span {
    padding: .2em.3em;
    text-align: center;
    vertical-align: middle;
}

.ld_win_btn.ld_win_close { }




/* title */
/* ----- */
.ld_win_title {
    /* font-weight: bold; */
    font-size: 1.6em;
    vertical-align: middle;
}

.ld_win_subtitle {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-weight: bold;
    font-size: 1.6rem;
    /*line-height: var(--garden-info-header-height, 25px);*/
    vertical-align: middle;

    color: var(--ld_win_highlight);
}



/* -------------------------------------------------------------------------------------- */
/* body */
/* -------------------------------------------------------------------------------------- */

.ld_win_body {
    padding: 10px 20px;
    flex-grow: 1;
    overflow: scroll;
}


@media screen and (min-height: 500px) {

    .ld_content {
        /* grid-template-columns: 1fr; */
        flex-direction: column;
    }

    .ld_tab_group {
        grid-auto-flow: column;
        height: 3em;
        width: auto;
    }

    .ld_tab_group span {
        writing-mode: inherit;
        transform: rotate(0);
    }
}


/* @media screen and (min-height: 800px) { */
/*     .ld_tab_content_container { */
/*         overflow-y: visible; */
/*     } */
/* } */