:where(#dialog__cookieconsent,#cc-main ){
    --dialog-padding: clamp(1.5rem, 3.5vw, 3rem);
    --dialog-border-radius: 0px;
    --dialog-shadow: rgb(85, 85, 85) 0px 20px 30px -10px;

    --cc-cookie-category-block-bg: transparent;
    --cc-cookie-category-arrowsize: 20px;
    --cc-cookie-toggle-padding: 1rem;
}
#dialog__cookieconsent {
    position: fixed;
    padding: var(--dialog-padding);
    width: min(90%, 50rem);
    border:0;
    box-shadow: var(--dialog-shadow);
    border-radius: var(--dialog-border-radius);

	font-family: UniversLTPro-Condensed;
    &:focus{
        outline: 0;
    }
    .cookieconsent__content{
        > :is(h1, h2){
            line-height: 1.1;
            margin-top: 0;
        }

        a {
            color: black;
            text-decoration: underline;
        }
    }
    .cookieconsent__btns{

		
        --btn-min-width: 15rem;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        gap: var(--space-sm, 2em);
        margin-block-start: var(--space-md, 1.5em);
        button{
            flex: 1 1 var(--btn-min-width);
        }
    }
}


#cc-main .cm--box {
    --cc-modal-border-radius:0px;
    .cm__btn {
        border: 0px;
        padding: var(--btn-padding-y) var(--btn-padding-x);
        font-size: var(--btn-font-size);
    }
}
/* // Preferences Window
// Needs some overrides as basic styling comes with cookie module */
#cc-main { 	
    font-family: var(--font-base);
    font-size: var(--fs-base, 1rem);
    .pm--box{
        padding: var(--dialog-padding);
        border-radius: var(--dialog-border-radius);
        box-shadow: var(--dialog-shadow);
    }

    .pm-overlay{
        overflow: visible;
    }

    :is(.pm__header,.pm__footer,.pm--box, .pm__section--expandable .pm__section-desc-wrapper, .pm__section--expandable .pm__section-title)
    {
        border: 0;
    }

    .pm__header{
        padding:0;
        .pm__title{
            font-size: var(--fs-md, 1.5rem);
        }
        .pm__close-btn {
            background-color: transparent;
            border:0;
            &:hover{
                svg{
                    stroke: var(--color-primary, gray);
                }
            }
        }
    }
    .pm__body{
        padding-left: 0;
        padding-right: 0;
        .pm__section{
            border: 0;
            padding:0;
            .pm__section-title-wrapper+.pm__section-desc-wrapper{
                margin-top: 0;
            }
            .pm__section-title{
                padding-left: 0;
                font-weight: 700;
                color: var(--font-color-base);
                margin-block-end: 0.2rem;
            }
            &-desc-wrapper>:not(:last-child){
                border:0px;
            }
            .pm__section-desc{
                color: var(--font-color-base);
            }
        }

        .pm__section-toggles{
            .pm__section--expandable{
                margin-bottom: 0;
                border-top: 1px solid var(--gray);
                border-radius: 0;
                .pm__section-desc-wrapper{
                    border:0;
                }
                button.pm__section-title{
                    padding-left: calc(var(--cc-cookie-category-arrowsize) + 0.8rem);
                    border-radius: 0;
                    border:0;
                    &:hover{
                        background-color: transparent;
                        color: var(--color-primary);
                    }
                    &:focus-visible{
                        background-color: var(--gray, #cdcdcd);
                    }
                }

                .pm__section-arrow{
                    left:0;
                    width: var(--cc-cookie-category-arrowsize);
                    height: var(--cc-cookie-category-arrowsize);
                }

                .pm__section-desc{
                    padding: 0;
                    margin-bottom: var(--space-xs);
                    
                }

                &:last-child{
                    border-bottom: 1px solid var(--gray);
                }
            }
			.pm__service{
				padding-left: 0;
			}
			.pm__service-header{
				.pm__service-icon{
					display: none;
				}
			}
        }

        .pm__section-table{
            .pm__table-head > tr{
                border:0;
            }
            .pm__table-th, .pm__table-td{
                padding-top: 0.5em;
                padding-bottom: 0.5em;
                padding-left: 0;
            }
        }
    }
    .pm__footer{
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }

    
}

/* //Buttons */

:is(.cookieconsent__content, #cc-main) :is(button,button.pm-btn){

    --cc-btn-color: white;
    --cc-btn-primary-bg: var(--color-secondary, #5f3626);

    --cc-btn-primary-bg-hover: #7da34b;
    --cc-btn-border-radius: 0px;
    min-height: auto;
    min-width: inherit;
    font-weight: inherit;
    padding-block: var(--btn-padding-y, 0.5rem);
    padding-inline: var(--btn-padding-x, 1rem);
    font-size: var(--btn-font-size, 1rem);
    background-color: var(--cc-btn-primary-bg);
    color: var(--cc-btn-color) ;
    border:0px;
    border-radius: var(--cc-btn-border-radius);
    font-family: UniversLTPro-Condensed;
    &:hover{
        background-color: var(--cc-btn-primary-bg-hover);
        color: white;
        border-radius: var(--cc-btn-border-radius);
    }
    &:focus{
        box-shadow: none;
    }
    &:focus-visible{
        background-color: black;
        outline: 0;
        color: white;
        border-radius: var(--cc-btn-border-radius);
    }
}
:is(.cookieconsent__content, #cc-main) button.pm__section-title{
    color: inherit;

}

#cc-main button.pm__close-btn{
    padding:0;
    border-radius: 0;
    &:hover{
        background-color: transparent;
    }
    &:focus-visible{
        background-color: transparent;
        outline: 1px solid black;
    }
}

/* //prefs btn */
#cookieconsent__settings-btn {

    background-color: transparent;
    padding: 0;
    color: var(--black);
    font-family: var(--font-base);
    font-weight: var(--font-weight-base);
    margin:0;
    -webkit-font-smoothing: inherit;
    &:hover{
        text-decoration: underline;
    }
}