/**
 * Omegamma - Hugo theme for ad5001.eu and related websites.
 * Copyright (C) 2021  Ad5001
 * 
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU General Public License as published by
 * the Free Software Foundation, either version 3 of the License, or
 * (at your option) any later version.
 * 
 * This program is distributed in the hope that it will be useful,
 * but WITHOUT ANY WARRANTY; without even the implied warranty of
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
 * GNU General Public License for more details.
 * 
 * You should have received a copy of the GNU General Public License
 * along with this program.  If not, see <https://www.gnu.org/licenses/>.
 */

// CSS specific to the apps website.

#appslist {
    width: Min(108em, 100vw);
}

@media screen and (max-width: 108em) {
    #appslist {
        width: 81em;
    }
}

@media screen and (max-width: 81em) {
    #appslist {
        width: 54em;
    }
}

@media screen and (max-width: 54em) {
    #appslist {
        width: Min(27em, 100vw);
    }
}

.app-download {
    --border: solid 1px var(--primary-color);
    --border-radius: 1rem;
    border-right: var(--border);
    border-bottom: var(--border); 
    
    &:first-of-type {
        border-left: var(--border);
        border-top-left-radius: var(--border-radius);
        border-bottom-left-radius: var(--border-radius);
        
        .app-download-platform {
            border-top-left-radius: var(--border-radius);
        }
    }
    
    &:last-of-type {
        border-top-right-radius: var(--border-radius);
        border-bottom-right-radius: var(--border-radius);
        
        .app-download-platform {
            border-top-right-radius: var(--border-radius);
        }
    }
    
    .app-download-platform {
        line-height: 3;
        font-size: x-large;
    }
        
    .app-os-sources {
        hr {
            color: var(--primary-color);
            
            &:last-of-type {
                opacity: 0;
                height: 0.1em;
            }
        }
        
        a img {
            width: Min(300px, calc(100% - 2em));
            box-shadow: 0px 0px 2px 0px #000000;
            transition: box-shadow 0.15s ease-in-out, filter 0.15s ease-in-out;
            border-radius: 1em;
            filter: brightness(100%);
        
            &:hover {
                box-shadow: 0px 0px 8px 0px #000000;
                filter: brightness(85%);
            }
        }
    }
}


@media screen and (max-width: 850px) {
    .app-download {
        border-left: var(--border);
        
        &:first-of-type {
            border-top-left-radius: var(--border-radius) !important;
            border-top-right-radius: var(--border-radius) !important;
            border-bottom-left-radius: 0;
            border-bottom-right-radius: 0;
            
            & .app-download-platform {
                border-top-left-radius: var(--border-radius) !important;
                border-top-right-radius: var(--border-radius) !important;
                border-bottom-left-radius: 0;
                border-bottom-right-radius: 0;
            }
        }
        
        &:last-of-type {
            border-top-right-radius: 0;
            border-bottom-left-radius: var(--border-radius) !important;
            border-bottom-right-radius: var(--border-radius) !important;
            
            & .app-download-platform {
                border-top-right-radius: 0;
            }
        }
    }
}