#cookiebanner-overlay{
    transition: all .5s ease;
    @apply fixed top-0 left-0 w-full h-screen bg-black bg-opacity-50 z-30 opacity-0 invisible pointer-events-none;
    &.is-active{
        @apply opacity-100 visible pointer-events-auto;
    }
}
.cookiebanner{
    --accordion-border-color: theme(colors.grey.200);
    --accordion-bg: theme(colors.white);
    --accordion-text-color: theme(colors.black);
    --accordion-border-color: theme(colors.grey.200);

    --input-toggle-bg: theme(colors.white);
    --input-toggle-active-bg: theme(colors.white);
    --input-toggle-active-slider-bg: theme(colors.black);

    @apply fixed bottom-0 right-0 lg:bottom-5 lg:right-5 bg-black text-white z-50 w-full lg:max-w-[640px] px-5 py-5;
    p{
        @apply text-white mb-0;
    }
    &__btns{
        @apply flex justify-between mt-8;
        button{
            @apply bg-grey-300 text-white px-4 py-1.5;
            &:hover{
                @apply bg-white text-black;
            }
            + button{
                @apply ml-2.5;
            }
        }
    }
    &__cookies{
        @apply mt-8;
    }
    .block-accordion{
        @apply mb-8;
        .input-toggle{
            @apply absolute right-2.5 top-2;
        }    
        .block-accordion__inner{
            @apply relative;
            > button{
                &::before{
                    background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37.5 26H12.5V24H37.5V26Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 37.5L24 12.5L26 12.5L26 37.5L24 37.5Z' fill='white'/%3E%3C/svg%3E%0A");
                }
            }
            > div{
                > p{
                    + table{
                        @apply mt-8 mb-0;
                    }
                }
            }
            &.is-toggled, &:hover{
                --input-toggle-bg: theme(colors.grey.300);
                --input-toggle-slider-bg: theme(colors.white);
                --input-toggle-active-bg: theme(colors.black);
                --input-toggle-active-slider-bg: theme(colors.white);
                > button{
                    &::before{
                        background-image: url("data:image/svg+xml,%3Csvg width='50' height='50' viewBox='0 0 50 50' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M37.5 26H12.5V24H37.5V26Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M24 37.5L24 12.5L26 12.5L26 37.5L24 37.5Z' fill='black'/%3E%3C/svg%3E%0A");
                    }
                }
                .cookiebanner-necessary-icon{
                    background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 10.5C21 16.299 16.299 21 10.5 21C4.70101 21 0 16.299 0 10.5C0 4.70101 4.70101 0 10.5 0C16.299 0 21 4.70101 21 10.5Z' fill='black'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.02172 13.3129L6.35134 10.6425L5.64866 11.3541L9.02393 14.7293L16.3525 7.35466L15.6476 6.64534L9.02172 13.3129Z' fill='white'/%3E%3C/svg%3E%0A");
                    @apply w-5 h-5 bg-contain absolute right-2.5 top-2;
                }
                .input-toggle{
                    input{
                        &:checked + span{
                            &::after{
                                background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M2.521 5.983.525 3.987 0 4.52l2.523 2.523L8 1.53 7.473 1 2.521 5.983Z' fill='white'/%3E%3C/svg%3E");
                            }
                        }
                    }
                    span{
                        &::after{
                            background-image: url("data:image/svg+xml,%3Csvg fill='none' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 9'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m8.331 1.355-6.977 7.02-.705-.709L7.626.646l.705.709Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='m1.353.646 6.978 7.02-.705.71-6.978-7.02.705-.71Z' fill='white'/%3E%3C/svg%3E");
                        }
                    }
                }     
            }
        }
    }
    &-necessary-icon{
        background-image: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21 10.5C21 16.299 16.299 21 10.5 21C4.70101 21 0 16.299 0 10.5C0 4.70101 4.70101 0 10.5 0C16.299 0 21 4.70101 21 10.5Z' fill='white'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M9.02172 13.3129L6.35134 10.6425L5.64866 11.3541L9.02393 14.7293L16.3525 7.35466L15.6476 6.64534L9.02172 13.3129Z' fill='black'/%3E%3C/svg%3E%0A");
        @apply w-5 h-5 bg-contain absolute right-2.5 top-2;
    }
}