$complianz-text: var(--awb-color8);
$complianz-bg: var(--awb-color3);
$complianz-banner-bg: var(--awb-color1);
$complianz-banner-border-radius: 0.7em;

$complianz-btn-bg: var(--awb-color6);
$complianz-btn-text: var(--awb-color1);
$complianz-btn-bg-hover: var(--awb-color4);
$complianz-btn-text-hover: var(--awb-color1);

$complianz-link: var(--awb-color6);
$complianz-link-hover: var(--awb-color4);

$complianz-title-font-size: 1.4em;
$complianz-title-font-weight: 800;

$complianz-setting-separator: var(--awb-color5);

$complianz-setting-toggle: var(--awb-color5);
$complianz-setting-toggle-active: var(--awb-color3);

// Seite Cookie-Hinweis
.cmplz-document.cookie-statement {
    width: 100% !important;
    max-width: 100% !important;
    font-size: 1em !important;

    * {
        font-size: 1em !important;
    }

    h2 {
        font-size: 1.4em !important;
        border: 0 !important;
    }
}

// Button Cookies anpassen
#cmplz-manage-consent {
    $icon-size-min: 30px;
    
    .cmplz-btn {
        position: fixed !important;
        z-index: 104 !important;
        right: auto !important;
        left: 20px !important;
        background-color: transparent !important;
        border-radius: 50% !important;
        border: 0 !important;
        font-size: 1px;
        line-height: 0;
        white-space: -100%;
        padding: 0 !important;
        width: 50px !important;
        height: 50px !important;
        max-width: 50px !important;
        max-height: 50px !important;
        min-width: 50px !important;
        min-height: 50px !important;
        margin: 0 !important;
        margin-bottom: 20px !important;
        opacity: 1;
        @include transition();
        @include box-sizing();
        @include flex($vertical: center, $horizontal: center);
        text-align: center;
        color: transparent !important;
        overflow: hidden;

        &:after {
            content: "";
            position: absolute;
            z-index: -1;
            top: -1%;
            left: -1%;
            width: 102%;
            height: 102%;
            background-color: var(--awb-color8);
            opacity: 1;
        }

        &:before {
            position: absolute;
            top: 0;
            left: 0;
            font-family: "Font Awesome 5 Free";
            content: "\f505";
            font-size: calc(30px * 0.6) !important;
            color: white;
            width: 30px !important;
            height: 30px !important;
            @include flex($vertical: center, $horizontal: center);
        }
    }
}

// Cookie Banner
#cmplz-cookiebanner-container {
    font-size: var(--body_typography-font-size) !important;
    z-index: 30000 !important;

    &.cmplz-soft-cookiewall {
        background-color: transparent !important;

        &:after {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: $complianz-bg;
            opacity: 0.85;
        }
    }

    * {
        font-family:inherit !important;
        outline:none !important
    }

    .cmplz-cookiebanner {
        padding: clamp(25px, 3.1vw, 3.1vw) clamp(25px, 3.1vw, 3.1vw) clamp(15px, 2.1vw, 2.1vw) clamp(25px, 3.1vw, 3.1vw) !important;
        max-width: clamp(500px, 40vw, 800px) !important;
        min-width: auto !important;
        width: 100vw !important;
        border-radius: $complianz-banner-border-radius;
        @include flex($direction: row, $wrap: wrap, $horizontal: center, $vertical: flex-start, $row-gap: 1em, $column-gap: 0);
        background-color: $complianz-banner-bg; 

        > * {
            width:100%;
        }

        .cmplz-title,
        .cmplz-message,
        .cmplz-category-title,
        .cmplz-always-active,
        .cmplz-description{
            font-size: var(--body_typography-font-size) !important;
            line-height: inherit !important;
            color: $complianz-text !important;
        }

        &.cmplz-dismissed,
        .cmplz-divider {
            display: none !important;
        }

        .cmplz-header {
            @include flex($direction: row, $wrap: wrap, $horizontal: center, $vertical: flex-start, $row-gap: 0, $column-gap: 0);

            .cmplz-title {
                display: inline-flex !important;
                text-align: center !important; 
                font-size: $complianz-title-font-size !important;
                font-weight: $complianz-title-font-weight !important;
            }
        }

        .cmplz-body {
            min-height: 0 !important;

            .cmplz-message {
                width:100% !important;
                margin-right:0 !important;
                margin-bottom:0 !important;
                text-align: center !important;

                p {
                    margin: 0;

                    + p {
                        margin-top: 0.5em;
                    }
                }
            }

            .cmplz-categories {
                width:100% !important;

                .cmplz-category {
                    position:relative;
                    margin-top:1em !important;
                    margin-bottom:0 !important;
                    padding:0 !important;
                    background-color:transparent !important;

                    &:before{
                        content:"";
                        position:absolute;
                        top:0;
                        left:0;
                        width:100%;
                        height:2px;
                        background-color: $complianz-setting-separator;
                        opacity:1;
                    }

                    .cmplz-category-header,
                    .cmplz-description{
                        padding-left:0 !important;
                        padding-right:1em !important
                    }

                    .cmplz-category-title{
                        font-weight:bold !important
                    }

                    .cmplz-always-active{
                        font-size:.9em !important;
                        color: $complianz-text;
                    }

                    .cmplz-icon svg *{
                        fill: $complianz-text !important
                    }

                    .cmplz-label{
                        cursor:pointer;

                        &:before{
                            height:18px !important;
                            top:-8px !important;
                            background-color: $complianz-setting-toggle !important;
                            opacity:1;
                        }

                        &:after{
                            height:12px !important;
                            width:12px !important;
                            top:-5px !important;
                            left:3px !important
                        }
                    }

                    *:checked+.cmplz-label:before{
                        background-color: $complianz-setting-toggle-active !important;
                        opacity:1;
                    }

                    *:checked+.cmplz-label:after{
                        left:auto !important;
                        right:5px !important;
                    }
                }
            }
        }

        .cmplz-buttons {
            margin-top: 0.5em;
            margin-bottom: 1em;
            @include flex($direction: column, $wrap: wrap, $horizontal: center, $vertical: flex-start, $row-gap: 0.5em, $column-gap: 0); 

            .cmplz-btn {
                font-family: var(--button_typography-font-family);
                font-style: var(--button_typography-font-style);
                font-size: var(--button_font_size) !important;
                font-weight: var(--button_typography-font-weight);
                line-height: var(--button_typography-line-height);
                letter-spacing: var(--button_typography-letter-spacing);
                text-transform: var(--button_text_transform);
                color: $complianz-btn-text !important;
                padding-top: var(--button_padding-top) !important;
                padding-right: var(--button_padding-right) !important;
                padding-bottom: var(--button_padding-bottom) !important;
                padding-left: var(--button_padding-left) !important;
                border-color: var(--awb-color5) !important;
                border-width: var(--button_border_width-top) !important;
                border-style: solid !important;
                border-radius: var(--button-border-radius-top-left);
                background-color: $complianz-btn-bg !important;
                height: auto !important;
                white-space: normal !important;
                @include transition();

                &:hover {
                    color: $complianz-btn-text-hover !important;
                    background-color: $complianz-btn-bg-hover !important;
                    opacity: 1 !important;
                }
            }
        }

        .cmplz-links {

            @include flex($wrap: wrap, $horizontal: center, $column-gap: 1em, $row-gap: 0.3em);

            .cmplz-link {
                font-size:.9em !important;
                line-height:inherit !important;
                text-decoration:none !important;
                color: $complianz-link;

                &:hover {
                    color: $complianz-link-hover;
                    opacity: 1;
                }
            }
        }
    }
}


// Hinweis bei blockierten Elementen
.cmplz-placeholder-element.cmplz-blocked-content-container {
    //background-image: none !important;
    background: none !important;

    .cmplz-blocked-content-notice {
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 100% !important;
        max-height: 100% !important;
        margin: 0 !important;
        padding: 1.5em !important;
        background-color: transparent !important;
        border: 0 !important;
        transform: none !important;
        font-size: var(--body_typography-font-size) !important;
        color: var(--awb-color1) !important;

        @include flex($direction: column, $vertical: center, $horizontal: center, $row-gap: 1em);

        &:after {
            content: "";
            position: absolute;
            z-index: -1;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--awb-color2);
            opacity: 0.8;
        }

        .cmplz-blocked-content-notice-body {
            font-size: 0.9em;
            line-height: 1.6em;

            .cmplz-links {

                @include flex($wrap: wrap, $horizontal: center, $column-gap: 1em, $row-gap: 0.3em);

                .cmplz-link {
                    font-size: inherit !important;
                    line-height:inherit !important;
                    text-decoration:none !important;
                    color: var(--awb-color5);

                    &:hover {
                        //color: var(--awb-color5);
                        opacity: 0.5;
                    }
                }
            }
        }

        .cmplz-accept-service {
            font-family: var(--button_typography-font-family);
            font-style: var(--button_typography-font-style);
            font-size: 0.9em !important;
            font-weight: var(--button_typography-font-weight);
            line-height: var(--button_typography-line-height);
            letter-spacing: var(--button_typography-letter-spacing);
            text-transform: var(--button_text_transform);
            color: var(--awb-color5) !important;
            padding-top: 0.3em !important;
            padding-right: 1em !important;
            padding-bottom: 0.3em !important;
            padding-left: 1em !important;
            border-color: var(--awb-color5) !important;
            border-width: var(--button_border_width-top) !important;
            border-style: solid !important;
            border-radius: var(--button-border-radius-top-left);
            background-color: var(--awb-custom_color_2) !important;
            height: auto !important;
            @include transition();

            &:hover {
                color: var(--awb-color1) !important;
                background-color: var(--awb-color5) !important;
                opacity: 1 !important;
            }
        }
    }

}

.cmplz-placeholder-element {
    &.cmplz-blocked-content-container {
        border-radius: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}