@use "sass:map";
@import './vars';

.klaro {
    --button-text-color: #fff;

    .cookie-modal,
    .context-notice,
    .cookie-notice {
        h1 {
            font-size: 2em;
        }

        h2 {
            font-size: 1.5em;
        }

        .cm-btn {
            padding: 0.4em 0.8em;

            &:last-child {
                margin-right: 0;
            }
        }
    }

    .cookie-modal {
        .cm-modal {
            .cm-body {
                .cm-list-description {
                    p,
                    strong,
                    h1,
                    h2,
                    ul,
                    li,
                    .table {
                        @include var(color, dark3);
                    }

                    .table {
                        display: table;
                        width: 100%;
                        @include var(border-style, border-style);
                        @include var(border-color, dark3);
                        @include var(border-width, border-width);

                        > .tr {
                            display: table-row;

                            > .th {
                                white-space: nowrap;
                                font-weight: bold;
                            }

                            > .th,
                            > .td {
                                padding: 0.25rem 0.5rem;
                                display: table-cell;
                                @include var(border-bottom-style, border-style);
                                @include var(border-bottom-color, dark3);
                                @include var(border-bottom-width, border-width);
                                @include var(border-left-style, border-style);
                                @include var(border-left-color, dark3);
                                @include var(border-left-width, border-width);
                            }

                            &:last-child {
                                > .th,
                                > .td {
                                    border-bottom: none;
                                }
                            }

                            > .th,
                            > .td {
                                &:first-child {
                                    border-left: none;
                                }
                            }
                        }
                    }
                }
            }

            .cm-footer {
                .cm-powered-by {
                    &.d-flex {
                        display: flex;
                        justify-content: space-between;
                    }
                }

                > span {
                    &:last-child {
                        display: block;
                        font-size: 0.8em;
                        padding-top: 4px;
                        text-align: right;
                        padding-right: 8px;
                        @include var(color, dark2);
                    }
                }

                .cm-powered-by {
                    font-size: inherit;
                    padding-top: 0;
                    padding-right: 0;
                }
            }
        }
    }
}