/* Cookielay Box (Bottom) */

#cookielay {
    &.cl-layout-bottom {
        .cookielay__box {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            overflow: auto;
            max-height: 100%;
            .cl-buttons {
                flex-shrink: 1;
                @media (max-width: $breakpoint-small) {
                    flex: 0 0 100%;
                    width: 100%;
                    max-width: 100%;
                    text-align: center;
                }
                .cl-button {
                    margin-right: 10px;
                    @media (max-width: $breakpoint-small) {
                        margin-top: 10px;
                        margin-right: 0;
                    }
                    &:last-of-type {
                        margin-right: 0;
                    }
                }
            }
            .cookielay__content {
                .cl-title {
                    font-weight: bold;
                    font-size: 20px;
                    padding: 24px;
                    @media (max-width: $breakpoint-small) {
                        font-size: 16px;
                        padding: 16px;
                    }
                }
                .cl-content {
                    padding: 24px;
                    display: flex;
                    flex-flow: row wrap;
                    align-items: flex-start;
                    justify-content: space-between;
                    @media (max-width: $breakpoint-small) {
                        padding: 16px;
                    }
                }  
                .cl-desc {
                    flex: 1;
                    max-width: 800px;
                    padding-right: 30px;
                    @media (max-width: $breakpoint-medium) {
                        flex: 0 0 100%;
                        width: 100%;
                        max-width: 100%;
                        padding-right: 0;
                    }
                }
                .cl-options {
                    flex-shrink: 1;
                    @media (max-width: $breakpoint-medium) {
                        flex: 0 0 100%;
                        width: 100%;
                        margin-top: 20px;
                    }
                    .cl-checkboxes {
                        margin-bottom: 16px;
                        @media (max-width: $breakpoint-small) {
                            margin-bottom: 8px;
                        }
                    }
                }
                .cl-footer {
                    flex: 0 0 100%;
                    display: flex;
                    flex-flow: row wrap;
                    align-items: center;
                    justify-content: space-between;
                    padding: 24px;
                    margin-top: 50px;
                    @media (max-width: $breakpoint-small) {
                        padding: 16px;
                    }
                    .cl-links {
                        flex-shrink: 1;
                        @media (max-width: $breakpoint-small) {
                            flex: 0 0 100%;
                            width: 100%;
                            max-width: 100%;
                            text-align: center;
                        }
                        a {
                            opacity: 0.5;
                            text-decoration: none;
                            margin-right: 20px;
                            &:last-of-type {
                                margin-right: 0;
                            }
                        }
                    }
                    .cl-branding {
                        flex-shrink: 1;
                        @media (max-width: $breakpoint-small) {
                            flex: 0 0 100%;
                            width: 100%;
                            max-width: 100%;
                            text-align: center;
                            margin-top: 5px;
                        }
                        a {
                            display: flex;
                            flex-flow: row wrap;
                            align-items: center;
                            text-decoration: none;
                            font-weight: bold;
                            font-size: 12px;
                            svg {
                                width: 24px;
                                height: auto;
                            }
                        }
                    }
                }
            }
            .cookielay__settings {
                display: none;
                .cl-inner {
                    padding: 30px;
                    padding-bottom: 0;
                    display: flex;
                    flex-flow: row wrap;
                    align-items: flex-start;
                    justify-content: space-between;
                    @media (max-width: $breakpoint-small) {
                        padding: 20px;
                        padding-bottom: 0;
                    }
                }
                .cl-text {
                    flex: 1;
                    max-width: 800px;
                    padding-right: 30px;
                    @media (max-width: $breakpoint-medium) {
                        flex: 0 0 100%;
                        width: 100%;
                        max-width: 100%;
                        padding-right: 0;
                        margin-bottom: 20px;
                    }
                    .cl-title {
                        flex: 0 0 100%;
                        width: 100%;
                        max-width: 100%;
                        font-weight: bold;
                        font-size: 26px;
                        @media (max-width: $breakpoint-small) {
                            font-size: 22px;
                        }
                    }
                    .cl-desc {
                        flex: 0 0 100%;
                        width: 100%;
                        max-width: 100%;
                        margin-top: 30px;
                        @media (max-width: $breakpoint-medium) {
                            margin-top: 15px;
                        }
                    }
                }
                .cl-buttons {
                    @media (max-width: $breakpoint-small) {
                        text-align: left;
                    }
                    .cl-button {
                        @media (max-width: $breakpoint-medium) {
                            width: auto;
                            margin-right: 10px;
                        }
                    }
                }
                .cl-accordions {
                    flex: 0 0 100%;
                    width: 100%;
                    max-width: 100%;
                    display: flex;
                    flex-flow: row wrap;
                    margin: 0 -15px;
                    margin-top: 50px;
                    @media (max-width: $breakpoint-small) {
                        margin: 0;
                        margin-top: 30px;
                    }
                    .cl-accordion {
                        flex: 0 0 50%;
                        width: 50%;
                        max-width: 50%;
                        padding: 0 15px;
                        margin-bottom: 30px;
                        @media (max-width: $breakpoint-small) {
                            flex: 0 0 100%;
                            width: 100%;
                            max-width: 100%;
                            padding: 0;
                            margin-bottom: 20px;
                        }
                        .cl-accordion__inner {
                            .cl-accordion__header {
                                padding: 20px;
                                @media (max-width: $breakpoint-small) {
                                    padding: 15px;
                                }
                                .cl-group-name {
                                    font-weight: bold;
                                    font-size: 20px;
                                    margin-bottom: 30px;
                                    display: flex;
                                    flex-flow: row wrap;
                                    align-items: center;
                                    justify-content: space-between;
                                    @media (max-width: $breakpoint-small) {
                                        margin-bottom: 10px;
                                        font-size: 18px;
                                    }
                                    .cl-name {
                                        flex-shrink: 1;
                                        @media (max-width: $breakpoint-small) {
                                            flex: 0 0 100%;
                                            width: 100%;
                                            max-width: 100%;
                                            order: 2;
                                            margin-top: 10px;
                                        }
                                    }
                                    .cl-switch {
                                        @media (max-width: $breakpoint-medium) {
                                            margin-left: auto;
                                        }
                                    }
                                }
                                .cl-group-desc {
                                    margin-bottom: 15px;
                                }
                                .cl-more {
                                    font-weight: bold;
                                    cursor: pointer;
                                }
                            }
                            .cl-accordion__content {
                                display: none;
                                .cl-cookies {
                                    .cl-cookie {
                                        padding: 20px;
                                        display: flex;
                                        flex-flow: row wrap;
                                        justify-content: space-between;
                                        align-items: flex-start;
                                        @media (max-width: $breakpoint-small) {
                                            padding: 15px;
                                        }
                                        .cl-switch {
                                            order: 2;
                                            @media (max-width: $breakpoint-medium) {
                                                order: 0;
                                                margin-left: auto;
                                                margin-bottom: 10px;
                                            }
                                            .cl-switch__slider {
                                                cursor: pointer;
                                                display: block;
                                                width: 40px;
                                                height: 20px;
                                                position: relative;
                                                transition: all 0.3s ease;
                                                &:before {
                                                    height: 12px;
                                                    width: 12px;
                                                    top: 4px;
                                                    left: 4px;
                                                }
                                            }
                                            input:checked + .cl-switch__slider {
                                                &:before {
                                                    transform: translateX(20px);
                                                }
                                            }
                                        }
                                        table {
                                            flex: 1;
                                            padding-bottom: 10px;
                                            margin: 0;
                                            margin-bottom: 10px;
                                            @media (max-width: $breakpoint-large) {
                                                flex: 0 0 100%;
                                                width: 100%;
                                                max-width: 100%;
                                            }
                                            tr {
                                                td {
                                                    @media (max-width: $breakpoint-large) {
                                                        display: block;
                                                    }
                                                    &:first-child {
                                                        padding-right: 10px;
                                                        width: 180px;
                                                        font-weight: bold;
                                                        @media (max-width: $breakpoint-large) {
                                                            padding-right: 0;
                                                            width: 100%;
                                                            margin-top: 10px;
                                                        }
                                                    }
                                                }
                                            }
                                            &:last-of-type {
                                                margin-bottom: 0;
                                                padding-bottom: 0;
                                                border-bottom: 0;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}