:root {
    --addons-color-primary: hsl(44, 38%, 42%);
    --addons-color-light: hsl(44, 38%, 72%);
    --addons-deg: 0deg;

    --addons-gap: 20px;
}

.abcweb.configuration {
    position: relative;

    & section {

        & .addons {
            display: flex;
            flex-flow: row wrap;
            justify-content: center;
            gap: 2rem;

            & header.title {
                display: flex;
                flex-flow: row nowrap;
                justify-content: center;
                align-items: center;
                
                width: 100%;
                white-space: nowrap;
                text-transform: uppercase;
                font-size: 1.3rem;
                font-weight: 700;
                margin-block: 2rem 0rem;

                &::before,
                &::after
                {
                    content: '';
                    width: 100%;
                    height: 4px;
                    display: block;
                    margin-inline: 1rem;
                    background: linear-gradient(
                        var(--addons-deg),
                        var(--addons-color-primary) 0%,
                        var(--addons-color-light) 75%,
                        transparent 99%
                    );
                    flex: 1 1 100%;
                }
                &::before { --addons-deg: 270deg; }
                &::after { --addons-deg: 90deg; }
            }
            & .addon {
                flex-basis: 100%;
                display: flex;
                flex-flow: row nowrap;
                gap: 2rem;

                & .image {
                    width: 25%;

                    & img {
                        width: 100%;
                        object-fit: cover;

                    }
                }
                & .description {
                    width: 75%;
                    position: relative;

                    & h2 {
                        scroll-margin-block-start: 5rem;
                    }
                    & p {}
                }
            }
        }
    }

    & aside {
        --index-width: 25vw;
        @media (width <= 1024px) {
            --index-width: calc(100vw - 2.5rem);
        }
        
        & .tab {
            padding: 0.5rem 2rem;
            background: var(--addons-color-primary);
            cursor: pointer;
            z-index: 1;
            position: fixed;
            top: 150px;
            right: 0;
            transition: 0.5s;
            transform-origin: bottom right;
            rotate: 270deg;

            &.active {
                transform: translateY(calc(-1 * var(--index-width)));
            }

        }
        & .list {
            position: fixed;
            top: 0;
            right: 0;
            max-width: var(--index-width);
            max-height: 100%;
            padding: 100px 2rem 2rem 2rem;
            background: white;
            box-shadow: 0px 0px 10px 0px hsla(0, 0%, 5%, 0.25);
            text-align: left;
            overscroll-behavior: contain;
            overflow-y: auto !important;
            scrollbar-width: none;
            transition: 0.5s;
            z-index: 1;

            &:not(.active) {
                transform: translateX(var(--index-width));
            }

            & .list-title {
                font-size: 1.2rem;
                font-weight: 700;
                margin-block: 0.5rem;
            }
            & .list-link {
                display: block;
                cursor: pointer;

                &::before {
                    content: '»';
                    margin-right: 0.5rem;
                }
                &:hover::before {
                    margin-left: 0.25rem;
                    margin-right: 0.25rem;
                }
            }
        }
    }
}

@media screen and (width <= 1024px) {
    .abcweb.configuration {
        & section {
            & .addons {
                & .addon {
                    flex-flow: column wrap;
    
                    & .image {
                        width: 100%;
                        order: 20;
                    }
                    & .description {
                        width: 100%;
                        order: 10;
                    }
                }
            }
        }
    }
}