@font-face {
    font-family: "Inter";
    src: local("Inter"),
        url("../fonts/Inter.woff2") format("woff2-variations");
}

:root {
    --padding: 24px;
    --padding-half: calc(var(--padding) / 2);
    --padding-quarter: calc(var(--padding) / 4);
    --black: black;
    --white: white;
    --light: #757575;
    --border-width: 1px;
    --border-color: var(--light);
    --border-radius: 24px;
    --border-radius-half: calc(var(--border-radius) / 2);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-flow: column;
    justify-content: stretch;
    min-width: 480px;
    font-family: Inter, "Helvetica Neue", Arial, sans-serif;
    font-size: 1em;
    line-height: 1.2;
    min-height: 100vh;

    button,
    a.button {
        color: var(--black);
        font-size: 1em;
        padding: var(--padding-quarter) var(--padding-half);
        border: var(--border-width) solid var(--black);
        background-color: var(--white);
        border-radius: var(--border-radius);
        text-decoration: none;
        user-select: none;
    }

    .select {
        padding: var(--padding-quarter) var(--padding-half);
        border: var(--border-width) solid var(--black);
        border-radius: var(--border-radius);

        select {
            appearance: none;
            border: none;
            font-size: 1em;
            background-color: transparent;
        }
    }

    .select label,
    label[for="search"],
    legend {
        font-weight: 600;
    }

    input {
        font-size: 1em;
        padding: var(--padding-quarter) var(--padding-half);
        border: var(--border-width) solid var(--black);
        border-radius: var(--border-radius);
    }

    .checkbox {
        position: relative;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        gap: var(--padding-half);

        &:not(:last-of-type) {
            margin-bottom: var(--padding-quarter);
        }

        &::before {
            content: "";
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--black);
            font-size: 1.6em;
            width: 24px;
            height: 24px;
        }

        &:has(input:checked)::before {
            content: "\2714";
        }

        &:has(input[disabled]) {
            &::before {
                border-color: var(--light);
            }

            label {
                color: var(--light);
            }
        }

        input {
            position: absolute;
            appearance: none;
            width: 26px;
            height: 26px;
            border: var(--border-width) solid var(--black);
            border-radius: 5px;

            &[disabled] {
                border-color: var(--light);
            }
        }
    }
}

.container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 var(--padding-half);

    &.articles {
        display: flex;
        flex-flow: column;
        gap: var(--padding-half);
    }
}

header {
    padding-top: var(--padding);
    padding-bottom: var(--padding-half);
}

section {
    nav.order {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-between;
    }

    .filters-container {
        display: flex;
        flex-flow: row nowrap;
        gap: var(--padding-half);

        aside.filter {
            display: flex;
            flex-flow: column;
            gap: var(--padding-half);
            position: sticky;
            top: var(--padding);
            padding-right: var(--padding-half);
            max-height: calc(100vh - var(--padding) * 2);
            overflow-x: hidden;
            overflow-y: auto;
            min-width: fit-content;

            scrollbar-width: thin;
            scrollbar-color: var(--border-color) transparent;

            .actions {
                display: flex;
                flex-flow: row wrap;
                gap: var(--padding-half);
                justify-content: space-between;
            }

            fieldset {
                display: flex;
                flex-flow: column;
                white-space: nowrap;
                border: var(--border-width) solid var(--border-color);
                padding: var(--padding-quarter);
                border-radius: var(--border-radius-half);

                label {
                    span {
                        color: var(--light);
                    }
                }
            }
        }

        .articles-container {
            flex: 1;
            max-width: fit-content;
            display: flex;
            flex-flow: column;
            gap: var(--padding);

            ul.articles {
                display: flex;
                flex-flow: row wrap;
                list-style: none;
                gap: var(--padding-half);

                .article {
                    position: relative;
                    display: flex;
                    flex-flow: column;
                    flex: 1 0 calc(25% - (var(--padding-half) * 3));
                    min-width: 264px;
                    max-width: 500px;
                    overflow: hidden;
                    border-radius: var(--border-radius-half);
                    border: var(--border-width) solid var(--border-color);

                    .article-images {
                        display: flex;
                        flex-flow: row nowrap;
                        max-width: 100%;
                        aspect-ratio: 1/1;
                        overflow-x: scroll;
                        scroll-snap-type: x mandatory;
                        scroll-behavior: smooth;
                        -webkit-overflow-scrolling: touch;

                        scrollbar-width: thin;
                        scrollbar-color: var(--border-color) transparent;

                        img {
                            width: 100%;
                            max-width: 100%;
                            object-fit: contain;
                            aspect-ratio: 1/1;
                            scroll-snap-align: start;
                            flex: 0 0 auto;
                        }
                    }

                    .article-content {
                        flex: 1;
                        display: flex;
                        flex-flow: column;
                        padding: var(--padding-half);

                        h2 {
                            font-size: 1.3em;
                            margin-bottom: auto;
                        }

                        .article-status {
                            position: absolute;
                            top: var(--padding-quarter);
                            right: var(--padding-quarter);
                            display: flex;
                            flex-wrap: wrap;
                            gap: 0.25rem;
                            z-index: 1;
                        }

                        .article-status span {
                            padding: 0.15rem 0.35rem;
                            border-radius: var(--border-radius);
                            font-size: 0.8rem;
                            font-weight: 500;
                        }

                        .status-discontinued {
                            background-color: #ffebee;
                            color: #c62828;
                            border: 1px solid #ef9a9a;
                        }

                        .status-out-of-stock {
                            background-color: #fff3e0;
                            color: #ef6c00;
                            border: 1px solid #ffcc80;
                        }

                        .status-end-of-life {
                            background-color: #e8eaf6;
                            color: #283593;
                            border: 1px solid #9fa8da;
                        }

                        .status-announced {
                            background-color: #e8f5e9;
                            color: #2e7d32;
                            border: 1px solid #a5d6a7;
                        }

                        .price {
                            margin-top: var(--padding-half);
                            font-weight: bold;
                            font-size: 1.2em;

                            .old-price {
                                color: #666;
                                font-size: 0.8em;
                                text-decoration: line-through;
                            }

                            .discount {
                                font-size: 0.8em;
                                color: red;
                            }
                        }

                        .article-details {
                            display: flex;
                            flex-direction: column;
                            gap: 4px;
                            font-size: 0.9em;
                            margin-top: var(--padding-half);

                            .pieces,
                            .price-per-piece {
                                color: #666;
                            }

                            .category {
                                text-transform: capitalize;
                                color: #666;
                            }
                        }

                        .article-footer {
                            margin-top: var(--padding-half);
                            display: flex;
                            flex-flow: row wrap;
                            gap: var(--padding-half);
                            align-items: baseline;
                            justify-content: space-between;

                            span {
                                font-size: 0.9em;
                                color: #666;

                                span {
                                    font-size: 1.5em;
                                }
                            }
                        }
                    }
                }
            }
        }

        nav.pagination {
            display: flex;
            flex-flow: row nowrap;
            justify-content: center;
            gap: var(--padding-quarter);

            label {
                position: relative;
                width: fit-content;
                display: flex;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                border: var(--border-width) solid var(--black);
                border-radius: var(--border-radius-half);
                padding: var(--padding-quarter) var(--padding-half);

                input {
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    border: none;
                    appearance: none;
                    pointer-events: none;
                }

                &:has(input[disabled]) {
                    color: var(--white);
                    border-radius: var(--border-radius-half);
                    background-color: var(--light);
                }
            }
        }
    }
}

footer {
    padding: var(--padding) 0;
    margin-top: auto;
}