/* BattleRanker V3.15.3 — proper Commons image tile gallery */

.image-picker-dialog{
    width:min(1200px,calc(100vw - 30px)) !important;
    max-width:none !important;
    max-height:92vh !important;
}

/*
 * Important: normal row-by-row grid.
 * Each search result is one independent tile.
 */
.image-picker-results{
    display:grid !important;
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    grid-auto-flow:row !important;
    grid-auto-rows:auto !important;
    align-items:start !important;
    gap:12px !important;
    max-height:62vh !important;
    overflow-y:auto !important;
    padding:2px 6px 8px 0 !important;
}

/* Reset any inherited button/card sizing. */
.image-picker-result{
    display:flex !important;
    flex-direction:column !important;
    width:100% !important;
    height:230px !important;
    min-height:230px !important;
    max-height:230px !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
    border:2px solid var(--theme-raw-111) !important;
    background:var(--theme-raw-151515) !important;
    appearance:none !important;
    cursor:pointer !important;
}

.image-picker-result:hover{
    border-color:var(--theme-raw-dfff00) !important;
    box-shadow:0 0 0 2px var(--theme-raw-rgba-223-255-0-16-4d65d7) !important;
}

/*
 * Every image gets the SAME preview area.
 * Portrait, square and landscape images all remain fully visible.
 */
.image-picker-thumb-wrap{
    display:flex !important;
    flex:1 1 auto !important;
    width:100% !important;
    height:190px !important;
    min-height:190px !important;
    max-height:190px !important;
    align-items:center !important;
    justify-content:center !important;
    overflow:hidden !important;
    background-color:var(--theme-raw-202020) !important;
    background-image:
        linear-gradient(45deg,var(--theme-raw-2b2b2b) 25%,transparent 25%),
        linear-gradient(-45deg,var(--theme-raw-2b2b2b) 25%,transparent 25%),
        linear-gradient(45deg,transparent 75%,var(--theme-raw-2b2b2b) 75%),
        linear-gradient(-45deg,transparent 75%,var(--theme-raw-2b2b2b) 75%) !important;
    background-size:18px 18px !important;
    background-position:0 0,0 9px,9px -9px,-9px 0 !important;
}

.image-picker-thumb-wrap img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    object-fit:contain !important;
    object-position:center center !important;
    margin:0 !important;
}

/* Small filename strip under each individual image. */
.image-picker-result-name{
    display:block !important;
    flex:0 0 40px !important;
    width:100% !important;
    height:40px !important;
    min-height:40px !important;
    max-height:40px !important;
    padding:6px 7px !important;
    overflow:hidden !important;
    background:var(--theme-raw-fff) !important;
    color:var(--theme-raw-151515) !important;
    font-size:9px !important;
    line-height:1.15 !important;
    font-weight:800 !important;
    text-align:left !important;
    white-space:normal !important;
}

@media(max-width:1050px){
    .image-picker-results{
        grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    }
}

@media(max-width:820px){
    .image-picker-results{
        grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    }
}

@media(max-width:600px){
    .image-picker-dialog{
        width:calc(100vw - 10px) !important;
        max-height:96vh !important;
    }

    .image-picker-results{
        grid-template-columns:repeat(2,minmax(0,1fr)) !important;
        gap:8px !important;
        max-height:66vh !important;
    }

    .image-picker-result{
        height:205px !important;
        min-height:205px !important;
        max-height:205px !important;
    }

    .image-picker-thumb-wrap{
        height:165px !important;
        min-height:165px !important;
        max-height:165px !important;
    }
}


/* Electric Yellow full preview theme */
.theme-builder-electric .image-picker-result-name{
    background:var(--theme-raw-11172e)!important;
    color:var(--theme-raw-fff)!important;
}