@import "../global";

$sections-padding-y: 1rem;
$sections-padding-x: 1.3rem;
$footer-links-gap: 1.3rem;

#cc-main{

    .cm{
        opacity: 0;
        position: fixed;
        max-width: 24rem;
        display: flex;
        flex-direction: column;
        background: var(--cc-bg);
        border-radius: var(--cc-modal-border-radius);
        z-index: 1;
        overflow: hidden;
        box-shadow: $modal-box-shadow;
        visibility: hidden;
        opacity: 0;

        /* START: Vertical align modal */
        &--top{
            top: var(--cc-modal-margin);
        }

        &--middle{
            top: 50%;
        }

        &--bottom{
            bottom: var(--cc-modal-margin);
        }
        /* END: Vertical align modal */

        /* START: Horizontal align modal */
        &--center{
            left: var(--cc-modal-margin);
            right: var(--cc-modal-margin);
            margin: 0 auto;
            width: unset;
        }

        &--left{
            left: var(--cc-modal-margin);
            margin-right: var(--cc-modal-margin);
        }

        &--right{
            right: var(--cc-modal-margin);
            margin-left: var(--cc-modal-margin);
        }
        /* END: Horizontal align modal */
    }

    .cm__body{
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    .cm__btns,
    .cm__links{
        width: unset;
        padding: $sections-padding-y $sections-padding-x;
    }

    .cm__texts{
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        padding: $sections-padding-y 0 0;
    }

    .cm__title,
    .cm__desc{
        padding: 0 $sections-padding-x;
    }

    .cm__title{
        font-size: 1.05em;

        &+.cm__desc{
            margin-top: 1.1em;
        }
    }

    .cm__desc{
        color: var(--cc-secondary-color);
        line-height: 1.5;
        font-size: .9em;
        max-height: 40vh;
        overflow-x: visible;
        overflow-y: auto;
        padding-bottom: 1em;
    }

    /* START: Buttons section */
    .cm__btns{
        display: flex;
        flex-direction: column;
        justify-content: center;
        border-top: 1px solid var(--cc-separator-border-color);
    }

    .cm__btn-group {
        display: grid;
        grid-auto-columns: minmax(0, 1fr);
    }

    .cm__btn + .cm__btn,
    .cm__btn-group + .cm__btn-group {
        margin-top: $cc-btn-gap;
    }

    .cm--flip {
        .cm__btn + .cm__btn,
        .cm__btn-group + .cm__btn-group {
            margin-top: 0;
            margin-bottom: $cc-btn-gap;
        }
    }

    .cm--inline {

        .cm__btn + .cm__btn {
            margin-top: 0;
            margin-left: $cc-btn-gap;
        }

        &.cm--flip {

            .cm__btn + .cm__btn {
                margin-bottom: 0;
                margin-left: 0;
                margin-right: $cc-btn-gap;
            }

            .cm__btn-group + .cm__btn-group {
                margin-right: 0;

                margin-bottom: $cc-btn-gap;
            }
        }
    }

    .cm--wide {
        .cm__btn + .cm__btn,
        .cm__btn-group + .cm__btn-group {
            margin-top: 0;
            margin-left: $cc-btn-gap;
        }

        &.cm--flip {
            .cm__btn + .cm__btn,
            .cm__btn-group + .cm__btn-group {
                margin-bottom: 0;
                margin-right: $cc-btn-gap;
            }
        }
    }

    /** Start: Layout with 2 buttons, one of
    which is the show preferences btn **/
    .cm--wide,
    .cm--bar:not(.cm--inline) {

        .cm__btn-group--uneven{
            display: flex;
            flex: 1;
            justify-content: space-between;
        }

        &.cm--flip{
            .cm__btn-group--uneven{
                flex-direction: row-reverse;
            }
        }
    }
    /** End **/

    .cm__btn{
        color: var(--cc-btn-primary-color);
        background: var(--cc-btn-primary-bg);
        border: 1px solid var(--cc-btn-primary-border-color);
        text-align: center;

        font-weight: $font-weight-bold;
        font-size: .82em;
        min-height: $btn-height;
        padding: $btn-vertical-padding 1em;
        border-radius: var(--cc-btn-border-radius);

        &:hover{
            color: var(--cc-btn-primary-hover-color);
            background: var(--cc-btn-primary-hover-bg);
            border-color: var(--cc-btn-primary-hover-border-color);
        }

        /* Secondary btn colors */
        &--secondary{
            color: var(--cc-btn-secondary-color);
            background: var(--cc-btn-secondary-bg);
            border-color: var(--cc-btn-secondary-border-color);

            &:hover{
                color: var(--cc-btn-secondary-hover-color);
                background: var(--cc-btn-secondary-hover-bg);
                border-color: var(--cc-btn-secondary-hover-border-color);
            }
        }

        &--close{
            display: none;
            position: absolute;
            right: 0;
            top: 0;
            width: $btn-height;
            height: $btn-height;
            border-radius: 0;
            border-bottom-left-radius: var(--cc-btn-border-radius);
            border-top: none;
            border-right: none;
            padding: 0!important;
            min-width: auto!important;
            font-size: 1em;
            overflow: hidden;

            svg {
                stroke: var(--cc-btn-primary-color);
                transform: scale(.5);
                transition: stroke .15s ease;
            }

            &:hover {
                svg {
                    stroke: var(--cc-btn-primary-hover-color);
                }
            }

            &.cm__btn--secondary{
                svg {
                    stroke: var(--cc-btn-secondary-color);
                }

                &:hover {
                    svg {
                        stroke: var(--cc-btn-secondary-hover-color);
                    }
                }
            }

            & + .cm__texts{
                .cm__title {
                    padding-right: 3rem;
                }
            }
        }
    }

    .cm--inline{
        .cm__btn-group{
            grid-auto-flow: column;
        }
    }


    .cm__footer{
        color: var(--cc-footer-color);
        background: var(--cc-footer-bg);
        border-top: 1px solid var(--cc-footer-border-color);
        padding: .4em 0 .5em 0;
    }

    .cm__links{
        padding-top: 0;
        padding-bottom: 0;
        display: flex;
        flex-direction: row;
    }

    .cm__link-group {
        font-size: .8em;
        display: flex;
        flex-direction: row;
        width: 100%;

        & > * + * {
            margin-left: $footer-links-gap;
        }
    }

    .cm--flip{
        .cm__btn:last-child{
            grid-row: 1;
        }
    }

    .cm--inline{
        .cm__btn-group{
            grid-auto-flow: column;
        }

        &.cm--flip{
            .cm__btn:last-child{
                grid-column: 1;
            }
        }
    }

    /* START: Box layout */
    .cm--box{

        .cm__btn{
            &--close{
                display: block;
            }
        }

        &.cm--flip{
            .cm__btns{
                flex-direction: column-reverse;
            }
        }

        &.cm--wide{
            max-width: 36em;

            .cm__btns{
                flex-direction: row;
                justify-content: space-between;
            }

            .cm__btn-group{
                grid-auto-flow: column;
            }

            .cm__btn{
                min-width: 120px;
                padding-right: 1.8em;
                padding-left: 1.8em;
            }

            &.cm--flip{

                .cm__btns{
                    flex-direction: row-reverse;
                }

                .cm__btn:last-child{
                    grid-column: 1;
                }
            }
        }
    }
    /* END: Box layout */

    /** START: Cloud layout **/
    .cm--cloud{
        width: unset;
        max-width: 54em;

        .cm__body{
            flex-direction: row;
        }

        .cm__texts{
            flex: 1;
        }

        .cm__desc{
            max-height: 9.4em
        }

        .cm__btns{
            border-top: none;
            border-left: 1px solid var(--cc-separator-border-color);
            // min-width: 280px;
        }

        .cm__btn-group{
            flex-direction: column;
        }

        .cm__btns{
            max-width: 23em;
        }

        .cm__btn{
            min-width: 19em;
        }

        &.cm--flip{
            .cm__btns,
            .cm__btn-group{
                flex-direction: column-reverse;
            }
        }

        &.cm--inline{
            .cm__btn-group{
                flex-direction: row;
            }

            .cm__btn{
                min-width: 10em;
            }

            &.cm--flip{
                .cm__btn-group{
                    flex-direction: row-reverse;
                }
            }
        }
    }
    /* END: Cloud layout */

    /* START: Bar layout */
    .cm--bar{
        max-width: unset;
        width: 100vw;
        left: 0;
        right: 0;
        margin: 0;
        transform: translateY(0);
        border-radius: 0;
        opacity: 1;

        --cc-modal-transition-duration: .35s;

        &.cm--top{
            top: 0;
        }

        &.cm--bottom{
            bottom: 0;
        }

        .cm__body,
        .cm__links{
            max-width: 55em;
            margin: 0 auto;
            width: 100%
        }

        .cm__body{
            padding: .5em 0 .9em 0;
        }

        .cm__btns{
            border-top: none;
            flex-direction: row;
            justify-content: space-between;
        }

        .cm__btn-group{
            grid-auto-flow: column;
        }

        &:not(.cm--inline) {
            .cm__btn + .cm__btn,
            .cm__btn-group + .cm__btn-group {
                margin-top: 0;
                margin-left: $cc-btn-gap;
            }
        }

        .cm__btn{
            min-width: 120px;
            padding-right: 2em;
            padding-left: 2em;
        }

        &.cm--flip{

            &:not(.cm--inline){
                .cm__btn + .cm__btn,
                .cm__btn-group + .cm__btn-group {
                    margin-bottom: 0;
                    margin-left: 0;
                    margin-right: $cc-btn-gap;
                }
            }

            .cm__btns{
                flex-direction: row-reverse;
            }

            .cm__btn:last-child{
                grid-column: 1;
            }
        }


        &.cm--inline{

            .cm__body,
            .cm__links{
                max-width: 74em;
            }

            .cm__body{
                padding: 0;
                flex-direction: row;
            }

            .cm__btns{
                flex-direction: column;
                justify-content: center;
                max-width: 23em;
            }

            &.cm--flip{
                .cm__btns{
                    flex-direction: column-reverse;
                }
            }
        }
    }
    /* END: Bar layout */

    .cc--anim{
        .cm,
        &.cm-wrapper::before{
            transition: opacity var(--cc-modal-transition-duration) ease,
                    visibility var(--cc-modal-transition-duration) ease,
                    transform var(--cc-modal-transition-duration) ease;
        }

        .cm__close,
        .cm__btn{
            transition: background-color .15s ease,
                        border-color .15s ease,
                        color .15s ease;
        }
    }
}

/* START: Dark overlay */
.disable--interaction #cc-main .cm-wrapper::before{
    content: '';
    opacity: 0;
    visibility: hidden;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 0;
    background: var(--cc-overlay-bg);
}
/* END: Dark overlay */

#cc-main{

    .cm{
        transform: translateY($translate-y);

        &--middle{
            transform: translateY(calc(-50% + $translate-y));
        }

        &--bar{
            &.cm--bottom{
                transform: translateY(100%);
            }
            &.cm--top{
                transform: translateY(-100%);
            }
        }
    }
}

.show--consent{
    #cc-main {
        .cc--anim{
            .cm{
                opacity: 1;
                visibility: visible!important;
                transform: translateY(0);

                &--middle{
                    transform: translateY(-50%);
                }

                &--bar{
                    transform: translateY(0);
                }
            }

            &.cm-wrapper::before{
                opacity: 1;
                visibility: visible;
            }
        }
    }
}

/* Start: fix RTL layout */
#cc-main.cc--rtl {
    .cm__btn--close {
        right: unset;
        left: 0;
        border-bottom-left-radius: unset;
        border-bottom-right-radius: var(--cc-btn-border-radius);

        & + .cm__texts .cm__title {
            padding-right: $sections-padding-x;
            padding-left: 3rem!important;
        }
    }

    .cm--inline {
        .cm__btn + .cm__btn {
            margin-left: 0;
            margin-right: $cc-btn-gap;
        }

        &.cm--flip {
            .cm__btn + .cm__btn {
                margin-left: $cc-btn-gap;
                margin-right: 0;
            }
        }
    }

    .cm:not(.cm--inline) {
        &.cm--bar,
        &.cm--wide {

            .cm__btn + .cm__btn,
            .cm__btn-group + .cm__btn-group {
                margin-left: 0;
                margin-right: $cc-btn-gap;
            }

            &.cm--flip {
                .cm__btn + .cm__btn {
                    margin-left: $cc-btn-gap;
                    margin-right: 0;
                }
            }
        }
    }

    .cm__link-group > * + * {
        margin-left: 0;
        margin-right: $footer-links-gap;
    }

}
/* End: Fix RTL alyout */

@media screen and (max-width: 640px){
	#cc-main   {
        --cc-modal-margin: .5em;

        .cm{
            max-width: none!important;
            width: auto!important;
        }

        .cm__body{
            flex-direction: column!important;
            padding: 0!important;
        }

        .cm__title,
        .cm__desc,
        .cm__btns,
        .cm__links{
            padding-left: 1.1rem!important;
            padding-right: 1.1rem!important;
        }

        .cm__btns{
            flex-direction: column!important;
            max-width: none!important;
            min-width: auto!important;
            border-left: none!important;
            border-top: 1px solid var(--cc-separator-border-color)!important;
        }

        .cm__btn + .cm__btn,
        .cm__btn-group + .cm__btn-group {
            margin: 0!important;
            margin-top: $cc-btn-gap!important;
        }

        .cm--flip {
            .cm__btn + .cm__btn,
            .cm__btn-group + .cm__btn-group {
                margin-top: 0!important;
                margin-bottom: $cc-btn-gap!important;
            }
        }

        .cm__btn-group{
            display: flex!important;
            flex-direction: column!important;
            min-width: auto!important;
        }

        .cm__btn{
            flex: auto!important;
        }

        .cm__link-group{
            justify-content: center!important;
        }

        .cm--flip{
            .cm__btns,
            .cm__btn-group{
                flex-direction: column-reverse!important;
            }
        }
	}
}