/*
 * Source code of the Ubuntu-it website
 * Copyright (C) 2018 Pietro Albini <pietroalbini@ubuntu.com>
 * Copyright (C) 2021 Alessandro Viprati <vipri.alessandro@gmail.com>
 * Copyright (C) 2023 shadMod
 *
 * This program is free software: you can redistribute it and/or modify
 * it under the terms of the GNU Affero 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 Affero General Public License for more details.
 *
 * You should have received a copy of the GNU Affero General Public License
 * along with this program.  If not, see <http://www.gnu.org/licenses/>.
*/

div.page div.row.background-wallpaper {
    .box {
        background: rgba(255, 255, 255, 0.5);
    }

    background: url("../../images/wallpapers/dotted.png") no-repeat 130% 10%;

    @media all and (max-width: 60rem) {
        background: transparent;
    }

    &.ubuntu, &.desktop, &.edubuntu, &.kubuntu, &.lubuntu, &.xubuntu, &.ubuntu-mate,
    &.ubuntu-budgie, &.ubuntu-cinnamon, &.ubuntu-kylin, &.ubuntu-studio, &.ubuntu-unity,
    &.ubuntu-touch, &.latest-version, &.banner-latest {
        color: #fff;

        border-top: 0;
        & + div.row {
            border-top: 0;
        }

        a {
            color: rgba(255, 255, 255, 0.5);
        }

        a.btn {
            color: #fff;
        }

        .box {
            box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.2) inset;
            background: rgba(0, 0, 0, 0.25);
            border: 0;
        }
    }

    &.ubuntu, &.desktop {
        background: url("../../images/wallpapers/ubuntu.jpg") 200% 0%;
    }

    &.edubuntu {
        background:
            linear-gradient(rgba(100, 100, 100, 0.3), rgba(100, 100, 100, 0.3)),
            url("../../images/wallpapers/edubuntu.jpg") 200% 50%;
    }

    &.kubuntu {
        background: url("../../images/wallpapers/kubuntu.jpg") 200% 50%;
    }

    &.xubuntu {
        background:
            linear-gradient(rgba(100, 100, 100, 0.3), rgba(100, 100, 100, 0.3)),
            url("../../images/wallpapers/xubuntu.jpg") 200% 50%;
    }

    &.lubuntu {
        background: url("../../images/wallpapers/lubuntu.jpg") 200% 50%;
    }

    &.ubuntu-mate {
        background:
            linear-gradient(rgba(85, 85, 85, 0.3), rgba(85, 85, 85, 0.3)),
            url("../../images/wallpapers/ubuntu-mate.jpg") 200% 50%;
    }

    &.ubuntu-budgie {
        background:
            linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
            url("../../images/wallpapers/ubuntu-budgie.jpg") 200% 50%;
    }

    &.ubuntu-cinnamon {
        background:
            linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
            url("../../images/wallpapers/ubuntucinnamon.jpg") 158% 50%;
    }

    &.ubuntu-kylin {
        background: url("../../images/wallpapers/ubuntu-kylin.jpg") 200% 50%;
    }

    &.ubuntu-studio {
        background: url("../../images/wallpapers/ubuntustudio.jpg") 200% 50%;

        .box {
            background: rgba(100, 100, 100, 0.25);
        }
    }

    &.ubuntu-unity {
        background:
            linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
            url("../../images/wallpapers/ubuntu-unity.jpg") 200% 50%;
    }

    &.ubuntu-touch {
        background: url("../../images/wallpapers/ubuntu-touch.jpg") 100% 0%;
    }

    &.latest-version {
        background: url("../../images/versions/mantic-minotaur/desktop.jpg") 100% 0%;
    }

    &.banner-latest {
        background: url("../../images/versions/mantic-minotaur/wallpaper.jpg") 50% 50%;
    }

}

div.page div.row.download-index-distro {
    @media all and (min-width: 60rem) {
        div.col.col-center {
            text-align: right;
        }
    }

    @media all and (max-width: 60rem) {
        text-align: center;

        div.col {
            margin-top: 1em;

            &:first-child {
                margin-top: 0;
            }
        }
    }
}

div.download-form {
    padding: 0.5em 1.5em;

    div.download-form-group {
        margin: 1em 0;
    }

    div.download-form-buttons {
        margin: 1em 0;

        .btn {
            display: block;
            text-align: center;
            width: 100%;
        }
    }
}

p.intro {
    font-size: 1.2em;
    margin: 0.5em 0;
}

.pictogram {
    height: 55%;
    width: 55%;
}

div.page div.row.image-overflow {
    margin-bottom: 4em;

    div.col img {
        max-width: none;
        max-height: none;
        width: 70%;

        display: block;
        margin: 2em auto -6em auto !important;

        @media all and (max-width: 40rem) {
            width: 85%;
        }
    }
}

div.page div.row div.col.image-attach-corner {
    position: relative;
    text-align: right;

    img {
        display: block;

        @media all and (min-width: 60rem) {
            position: absolute;
            bottom: -2em;
            right: -2em;
        }

        @media all and (max-width: 60rem) {
            margin-left: auto;
            margin-right: -1em !important;
            margin-bottom: -1em !important;
        }
    }
}

div.cookie-policy {
  z-index: 10;
}

div.p-100 {
    padding: 100px !important;
}

.h-150 {
    height: 150px !important;
}

ul.item-list li {
    margin: 0 0 0.25em 1.5em;
    padding: 0 0 0 20px;
    list-style-type: none;
    background: url('../../images/pictograms/ubuntu-li.png') no-repeat left 4px;
    font-size: 14px;
    line-height: 20px;
}

@each $value in (10, 20, 25) {
    $margin_sizes: ("": "#{$value}px", "y": "#{$value}px 0", "x": "0 #{$value}px");
    @each $name, $margin in $margin_sizes {
      .m#{$name}-#{$value} {
        margin: #{$margin} !important;
      }
    }

    $margin_sizes: ("t": "top", "e": "right", "b": "bottom", "s": "left");
    @each $name, $position in $margin_sizes {
      .m#{$name}-#{$value} {
        margin-#{$position}: #{$value}px !important;
      }
    }
}
.my-25 {
    margin: 0 25px;
}
.mt-25 {
    margin-top: 25px;
}
.me-25 {
    margin-right: 25px;
}
.mb-25 {
    margin-bottom: 25px;
}
.ms-25 {
    margin-left: 25px;
}