#cookie-consent:extend(.sidebar-main.off-canvas) {
    .unitize-width(280);
    .transition(transform 0.45s cubic-bezier(.3,0,.15,1));

    &.off-canvas {
        position: fixed;
        z-index: 8000;
        background: @body-bg;
    }

    &.block-transition {
        transition: none;
    }

    .cookie-consent--header {
        &:extend(.navigation--smartphone .entry--close-off-canvas);
        &:extend(.navigation--smartphone .entry--close-off-canvas .navigation--link);

        cursor: pointer;

        .icon--arrow-right {
            &:extend(.navigation--smartphone .entry--close-off-canvas .icon--arrow-right);
        }
    }

    .cookie-consent--description {
        .unitize-padding(15, 10);
    }

    .cookie-consent--configuration {
        .cookie-consent--group {
            .unitize-padding(15, 10);
            .clearfix();

            border-bottom: 1px solid @border-color;
            position: relative;
        }

        .cookie-consent--group-title {
            cursor: pointer;
            float: left;
            width: 85%;

            &.is--active .cookie-consent--group-arrow {
                transform: rotate(90deg);
            }
        }

        .cookie-consent--configuration-header-text {
            .unitize-padding(15, 10);

            font-weight: @font-bold-weight;
            color: @text-color-dark;
            border-bottom: 1px solid @border-color;
        }

        .cookie-consent--group-description {
            .unitize(margin-left, 42);

            color: lighten(@text-color, 15%);
        }
    }

    .cookie-consent--cookie {
        .clearfix();
        .unitize-padding(15, 0);

        position: relative;

        .cookie--label {
            cursor: pointer;
        }
    }

    .cookie-consent--group-container {
        .unitize(padding-top, 10);

        float: none;
        clear: both;
    }

    .cookie-consent--group-arrow {
        .unitize(right, 15);
        .unitize(font-size, 12);
        .unitize(top, 18);

        position: absolute;
    }

    .cookie-consent--save {
        .unitize-padding(15, 10);

        .cookie-consent--save-button {
            text-align: center;
            width: 100%;
        }
    }

    .cookie-consent--configuration-main {
        background: #fff;
    }

    .cookie-consent--state-label {
        .unitize(margin-left, 40);
    }
}

// State input
.cookie-consent--state-input {
    display: block;
    position: absolute;

    &.cookie-consent--cookie-state {
        top: ~"calc(50% - 10px)";
    }

    &.cookie-consent--required {
        opacity: 0.4;

        .cookie-consent--state-input-element {
            cursor: default;
        }
    }

    .cookie-consent--state-input-element {
        .unitize-height(20);
        .unitize-width(20);
        .unitize(border-radius, 3);
        border: 1px solid @border-color;
        cursor: pointer;
        display: block;
        position: relative;
    }

    input {
        display: none;

        &:checked + .cookie-consent--state-input-element {
            background: darken(@gray-dark, 20%);

            &::after {
                .unitize-width(10);
                .unitize-height(5);
                .unitize(top, 4);
                .unitize(left, 3);

                border: 2px solid #fff;
                border-top: none;
                border-right: none;
                background: transparent;
                content: '';
                position: absolute;
                transform: rotate(-45deg);
            }
        }

        &:indeterminate + .cookie-consent--state-input-element {
            background: darken(@gray-dark, 20%);

            &::after {
                .unitize-width(10);
                .unitize-height(5);
                .unitize(top, 3);
                .unitize(left, 4);

                border: 2px none #fff;
                border-bottom-style: solid;
                background: transparent;
                content: '';
                position: absolute;
            }
        }
    }
}