@use 'styles/_typography';
@use 'styles/_spacing';
@use 'styles/_colors';

@mixin home-grid {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    column-gap: 10px;
}

.homeNav {
    padding: (51px - spacing.$home-spacer-y) 115px 22px 115px;

    overflow: visible;

    display: grid;
    grid-template-columns: 200px 1fr 200px;
    align-items: baseline;

    :global .information {
        @include typography.header-cta;
    }
}

.typesNav {
    text-align: center;

    .filter {
        @include typography.body;
    }

    .notLink {
        @include typography.body-cta;

        text-decoration-line: none;
    }

    .link {
        @include typography.body-cta;
    }
}

.cartLink {
    position: sticky;
    overflow: visible;

    top: 12px;

    @include typography.subheader;

    text-align: right;
    word-wrap: none;
    text-decoration-line: none;
    mix-blend-mode: difference;
    // mix-blend-mode: exclusion;
    z-index: 10;

    color: #fff !important;
}

.homeProductsList {
    @include home-grid;

    row-gap: 20px;
    padding-bottom: 364px;

    > {
        li {
            grid-column-end: span 8;

            &.featured {
                grid-column-end: span 14;
            }

            &:has(+ .featured:nth-child(2n + 1)) {
                grid-column-end: span 10;
            }
        }

        li.featured:nth-child(2n) + li {
            grid-column-end: span 10;
        }
    }
}

.homeProduct {
    text-decoration-line: none;

    display: flex;
    flex-direction: column;
    gap: 10px;

    .title,
    .collections {
        @include typography.subheader;
    }

    .image {
        position: relative;

        .hoverOverlay,
        img {
            transition: opacity 200ms;
        }

        .hoverOverlay {
            background-color: colors.$black;

            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;

            opacity: 0;
        }

        &:hover {
            .hoverOverlay {
                opacity: 1;
            }
            img {
                opacity: 0;
            }
        }
    }
}

.homeFooter {
    .top {
        padding: 0 spacing.$page-margin-x;
        padding-top: 20px;
        padding-bottom: 30px;

        @include home-grid;

        > p {
            @include typography.body;

            grid-column-end: span 10;

            a {
                &:not(&:last-of-type)::after {
                    content: ',\00a0';
                    text-decoration-line: none;
                    display: inline-block;
                }
                &:last-of-type::after {
                    content: '.';
                    text-decoration-line: none;
                    display: inline-block;
                }
            }
        }

        > *:last-child {
            grid-column-end: span 4;
        }

        > div {
            display: flex;
            align-items: flex-end;
            justify-content: flex-end;
        }

        button {
            @include typography.subheader;

            text-align: right;
            word-wrap: none;
        }
    }
}