@import "../../themes/liberty.globals";

:host([hidden]) {
    display: none;
}

:host {
    display: flex;
    position: fixed;
    bottom: 0;

    flex-wrap: wrap;

    align-items: center;
    justify-content: center;

    width: 100vw;

    background: white;

    font-size: 1em;

    box-shadow: -14px 0 28px 0 rgba(0, 0, 0, 0.18),
        -10px 0 10px 0 rgba(0, 0, 0, 0.09);

    z-index: 100000;

    .ux-gdpr__text-container {
        @include padding(1.714285714em 1.714285714em 1.571428571em);

        flex: 0 1 26.642857143em;
    }

    .ux-gdpr__header {
        @include margin(0 0 0.571428571em);

        flex: 1 1 100%;

        font-size: inherit;
        font-weight: 500;

        line-height: 1;
    }

    .ux-gdpr__description {
        @include margin(0);

        flex: 1 1 100%;

        font-size: 0.857142857em;
    }

    .ux-gdpr__link,
    .ux-gdpr__link:visited {
        transition: box-shadow 0.2s ease-out;

        color: #2272bd;

        text-decoration: none;

        &:focus {
            outline: none;

            box-shadow: 0 0 0 0.142857143em #2272bd;
        }
    }

    .ux-gdpr__action-container {
        @include padding(0 2em 0);

        display: flex;

        flex: 0 1 17.142857143em;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
    }

    .ux-gdpr__button_revoke,
    .ux-gdpr__button_grant {
        @include border-radius(0.142857143em);
        @include margin(0 0 2em 0);
        @include padding(0);

        height: 2.833333333em;

        transition: box-shadow 0.2s ease-out;

        border: none;

        background: none;

        font-family: inherit;

        font-size: 0.857142857em;
        font-weight: 300;

        &:focus {
            outline: none;

            box-shadow: 0 0 0 0.142857143em #2272bd;
        }
    }

    .ux-gdpr__button_revoke {
        order: 0;

        width: 9.166666667em;

        background-color: white;
        color: #2272bd;

        box-shadow: inset 0 0 0 0.071428571em #c6c7c9;
    }

    .ux-gdpr__button_grant {
        order: 1;

        width: 13.333333333em;

        background-color: #2272bd;
        color: white;
    }
}

@media all and (min-width: 21.375em) {
    :host {
        .ux-gdpr__action-container {
            flex: 0 1 20.428571429em;

            justify-content: space-between;
        }
    }
}

@media all and (min-width: 45em) {
    :host {
        flex-wrap: nowrap;

        .ux-gdpr__text-container {
            @include padding(1.714285714em 2.285714286em 1.571428571em);

            flex: 1 1 100%;

            max-width: 82.428571429em;
        }

        .ux-gdpr__action-container {
            @include padding(0 2.285714286em 0 0);

            flex: 0 0 20.428571429em;
            flex-wrap: nowrap;
        }

        .ux-gdpr__button_revoke,
        .ux-gdpr__button_grant {
            @include margin(0);
        }
    }
}