/* Headline */

#cookielay-container {
    .cookielay-headline {
        padding: 15px;
        margin: 15px 0;
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        justify-content: space-between;
        @include media-breakpoint-down(md) {
            padding: 10px;
        }
        a {
            color: $text-color;
        }
    }
}

/* Benefits */

#cookielay-container {
    .benefits {
        list-style: none;
        padding: 0;
        margin: 0;
        margin-bottom: 30px;
        @include media-breakpoint-down(md) {
            margin-bottom: 20px;
        }
        li {
            display: flex;
            flex-flow: row wrap;
            align-items: center;
            margin-bottom: 8px;
            font-weight: $font-weight-bold;
            span {
                height: 30px;
                width: 30px;
                display: block;
                position: relative;
                border: solid 1px $white;
                border-radius: 50%;
                margin-right: 8px;
                i {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                }
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

/* Quickstart */

#cookielay-container {
    .quickstart {
        list-style: none;
        padding: 0;
        margin: 0;
        li {
            position: relative;
            padding-left: 45px;
            margin-bottom: 20px;
            span {
                height: 30px;
                width: 30px;
                position: absolute;
                left: 0;
                top: -6px;
                border: solid 1px $black;
                border-radius: 50%;
                font-weight: $font-weight-bold;
                display: flex;
                align-items: center;
                justify-content: center;
            }
            .title {
                font-weight: $font-weight-bold;
                margin-bottom: 5px;
            }
            .desc {
                color: $text-color;
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
}

/* Button Group */

#cookielay-container {
    .cl-button-group {
        .cl-button {
            margin-right: 10px;
            @include media-breakpoint-down(sm) {
                margin-top: 10px;
            }
            &:last-of-type {
                margin-right: 0;
            }
        }
    }
}

/* Status */

#cookielay-container {
    .status {
        display: flex;
        flex-flow: row wrap;
        margin-bottom: 20px;
        .label {
            font-weight: $font-weight-bold;
            flex: 0 0 280px;
            margin-right: 30px;
            @include media-breakpoint-only(lg) {
                flex: 0 0 180px;
            }
            @include media-breakpoint-down(md) {
                margin-right: 20px;
            }
        }
        .value {
            flex: 1;
            .inactive {
                color: $error-color;
            }
            .active {
                color: $success-color;
            }
        }
        &:last-of-type {
            margin-bottom: 0;
        }
    }
}

/* Input */

#cookielay-container {
    .input {
        display: flex;
        flex-flow: row wrap;
        margin-bottom: 30px;
        .label {
            flex: 0 0 280px;
            margin-right: 30px;
            color: $text-color;
            line-height: 1.4;
            @include media-breakpoint-only(lg) {
                flex: 0 0 180px;
            }
            @include media-breakpoint-down(md) {
                margin-right: 20px;
            }
            @include media-breakpoint-down(sm) {
                flex: 0 0 100%;
                max-width: 100%;
            }
            span {
                font-weight: $font-weight-bold;
                color: $black;
                display: block;
                margin-bottom: 5px;
            }
        }
        .field {
            flex: 1;
            @include media-breakpoint-down(sm) {
                flex: 0 0 100%;
                max-width: 100%;
                margin-top: 15px;
            }
            select {
                width: 100%;
                border: solid 1px rgba(0, 0, 0, 0.08);
                border-radius: $global-radius;
                overflow-y: auto;
                outline: none;
                option {
                    padding: 5px 10px;
                    color: $black;
                }
                &:not([multiple]) {
                    padding: 12px;
                }
            }
            input[type="text"],
            input[type="url"],
            input[type="number"] {
                width: 100%;
                padding: 12px;
                border: solid 1px rgba(0, 0, 0, 0.08);
                border-radius: $global-radius;
                outline: none;
                height: 43px;
                &:focus {
                    box-shadow: none;
                    border: solid 1px $primary;
                }
            }
            textarea {
                width: 100%;
                padding: 12px;
                border: solid 1px rgba(0, 0, 0, 0.08);
                border-radius: $global-radius;
                outline: none;
                line-height: 18px;
                &:focus {
                    box-shadow: none;
                    border: solid 1px $primary;
                }
            }
        }
        &.disabled {
            .label {
                span {
                    color: $text-color;
                }
            }
        }
    }
}

/* Shortcode */

#cookielay-container {
    .shortcode {
        display: flex;
        flex-flow: row wrap;
        margin-bottom: 30px;
        .label {
            flex: 0 0 280px;
            margin-right: 30px;
            color: $text-color;
            line-height: 1.4;
            @include media-breakpoint-only(lg) {
                flex: 0 0 180px;
            }
            @include media-breakpoint-down(md) {
                margin-right: 20px;
            }
            @include media-breakpoint-down(sm) {
                flex: 0 0 100%;
                max-width: 100%;
            }
            span {
                font-weight: $font-weight-bold;
                color: $black;
                display: block;
                margin-bottom: 5px;
            }
        }
        .value {
            flex: 1;
            display: flex;
            @include media-breakpoint-down(sm) {
                flex: 0 0 100%;
                max-width: 100%;
                margin-top: 15px;
            }
            input {
                flex: 1;
                margin-right: 0;
                padding: 12px;
                border: solid 1px rgba(0, 0, 0, 0.08);
                border-right: none;
                border-radius: 0;
                border-top-left-radius: $global-radius;
                border-bottom-left-radius: $global-radius;
                outline: none;
                height: 43px;
                &:focus {
                    box-shadow: none;
                }
            }
            button {
                height: 43px;
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
                position: relative;
                width: 100px;
                text-align: center;
                .tooltip {
                    position: absolute;
                    bottom: 100%;
                    left: 50%;
                    white-space: nowrap;
                    transform: translateX(-50%);
                    margin-bottom: 10px;
                    background: $primary;
                    display: block;
                    padding: 8px;
                    color: $white;
                    z-index: 20;
                    border-radius: 8px;
                    display: none;
                    &:after {
                        content: "";
                        position: absolute;
                        top: 100%;
                        left: 50%;
                        transform: translateX(-50%);
                        width: 0; 
                        height: 0; 
                        border-left: 8px solid transparent;
                        border-right: 8px solid transparent;
                        border-top: 8px solid $primary;
                    }
                }
            }
        }
        &:last-of-type {
            margin-bottom: 0;
        }
    }
}

/* Cookie */

#cookielay-container {
    .cookie {
        display: flex;
        flex-flow: row wrap;
        align-items: center;
        margin-bottom: 30px;
        .info {
            flex: 1;
            margin-right: 30px;
            color: $text-color;
            line-height: 1.4;
            @include media-breakpoint-down(sm) {
                margin-right: 20px;
                flex: 0 0 100%;
                max-width: 100%;
            }
            span {
                font-weight: $font-weight-bold;
                color: $black;
                display: block;
                margin-bottom: 5px;
            }
        }
        .actions {
            flex-shrink: 1;
            display: flex;
            align-items: center;
            @include media-breakpoint-down(sm) {
                flex: 0 0 100%;
                max-width: 100%;
                margin-top: 15px;
            }
            a,
            button {
                width: 39px;
                height: 39px;
                background: $gradient;
                border-radius: $global-radius;
                border: none;
                box-shadow: none;
                display: inline-block;
                position: relative;
                margin-left: 5px;
                cursor: pointer;
                outline: none;
                position: relative;
                i {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                    color: $white;
                    font-size: 16px;
                    margin-left: -1px;
                }
                &:disabled {
                    background: $gradient-disabled;
                    cursor: default;
                    .tooltip {
                        position: absolute;
                        bottom: 100%;
                        left: 50%;
                        white-space: nowrap;
                        transform: translateX(-50%);
                        margin-bottom: 10px;
                        background: $primary;
                        display: block;
                        padding: 8px;
                        color: $white;
                        z-index: 20;
                        border-radius: 8px;
                        display: none;
                        &:after {
                            content: "";
                            position: absolute;
                            top: 100%;
                            left: 50%;
                            transform: translateX(-50%);
                            width: 0; 
                            height: 0; 
                            border-left: 8px solid transparent;
                            border-right: 8px solid transparent;
                            border-top: 8px solid $primary;
                        }
                    }
                    &:hover {
                        .tooltip {
                            display: block;
                        }
                    }
                }
            }
            .switch-wrapper {
                margin-right: 30px;
                @include media-breakpoint-down(md) {
                    margin-right: 20px;
                }
            }
        }
        &:last-of-type {
            margin-bottom: 0;
        }
    }
}

/* Accordion */

#cookielay-container {
    .cl-accordion {
        margin-bottom: 30px;
        @include media-breakpoint-down(md) {
            margin-bottom: 20px;
        }
        .cl-accordion__header {
            font-weight: $font-weight-bold;
            position: relative;
            cursor: pointer;
            padding-right: 30px;
            &:after {
                content: "\e61a";
                font-family: "themify";
                position: absolute;
                right: 0;
                top: 50%;
                transform: translateY(-50%);
                color: $primary;
            }
        }
        .cl-accordion__content {
            display: none;
            .inner {
                padding-top: 30px;
                @include media-breakpoint-down(md) {
                    padding-top: 20px;
                }
                p {
                    margin-bottom: 20px;
                    color: $text-color;
                    &:last-of-type {
                        margin-bottom: 0;
                    }
                }
            }
        }
        &.open {
            .cl-accordion__header {
                &:after {
                    content: "\e622";
                }
            }
        }
        &:last-of-type {
            margin-bottom: 0;
        }
    }
}

/* Safe */

#cookielay-container {
    .safe {
        margin-top: 30px;
        margin-left: 310px;
        @include media-breakpoint-only(lg) {
            margin-left: 210px;
        }
        @include media-breakpoint-down(md) {
            margin-top: 20px;
            margin-left: 0;
        }
    }
}

/* Color Select */

#cookielay-container {
    .select-color {
        display: flex;
        flex-flow: row wrap;
        margin: 0 -15px;
        .color {
            flex: 0 0 50%;
            max-width: 50%;
            padding: 0 15px;
            position: relative;
            @include media-breakpoint-down(lg) {
                flex: 0 0 100%;
                max-width: 100%;
                margin-bottom: 15px;
            }
            & > span {
                color: $text-color;
                margin-left: 10px;
                position: absolute;
                left: 160px;
                top: 8px;
                @include media-breakpoint-down(lg) {
                    left: 190px;
                }
            }
            .wp-picker-container {
                .wp-color-result {
                    font-size: 13px;
                    border: solid 1px $primary;
                    margin: 0;
                    box-shadow: none;
                    outline: none;
                    line-height: 35px;
                    .wp-color-result-text {
                        background: $gradient;
                        color: $white;
                        border-left: none;
                    }
                    &:disabled {
                        color: $white !important;
                        border-color: $primary !important;
                        background: $white !important;
                        opacity: 0.3;
                    }
                }
                .wp-picker-input-wrap {
                    margin-left: 0;
                    margin-top: 10px;
                    width: 100%;
                    input[type="text"] {
                        height: auto;
                        width: auto;
                        border-top-right-radius: 0;
                        border-bottom-right-radius: 0;
                        box-shadow: none;
                        outline: none;
                    }
                    .wp-picker-clear {
                        background: rgba(0, 0, 0, 0.08);
                        border: solid 1px rgba(0, 0, 0, 0.08);
                        border-left: 0;
                        border-radius: $global-radius;
                        border-top-left-radius: 0;
                        border-bottom-left-radius: 0;
                        font-size: 13px;
                        color: $text-color;
                        margin-left: 0;
                        height: 39px;
                        box-shadow: none;
                        outline: none;
                    }
                }
            }
            &:last-of-type {
                margin-bottom: 0;
            }
        }
    }
}

/* Empty */

#cookielay-container {
    .empty {
        font-weight: $font-weight-bold;
    }
}

/* Layout Select */

#cookielay-container {
    .select-layout {
        display: flex;
        flex-flow: row wrap;
        margin: 0 -15px;
        .radio {
            flex: 0 0 50%;
            max-width: 50%;
            position: relative;
            padding: 0 15px;
            input {
                opacity: 0;
                width: 0;
                height: 0;
                position: absolute;
            }
            .images {
                cursor: pointer;
                img {
                    width: 100%;
                    height: auto;
                    border-radius: $global-radius;
                    &.active {
                        display: none;
                        border: solid 1px $primary;
                    }
                    &.inactive {
                        display: block;
                        border: solid 1px rgba(0, 0, 0, 0.2);
                    }
                }
            }
            input:checked + .images {
                .active {
                    display: block;
                }
                .inactive {
                    display: none;
                }
            }
        }
    }
}

/* Prime (Lock) */

#cookielay-container {
    .prime {
        color: $primary;
        font-weight: $font-weight-bold;
        display: inline-block;
        display: flex;
        align-items: center;
        span {
            background: $gradient;
            border-radius: $global-radius;
            display: block;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            position: relative;
            margin-right: 6px;
            i {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                color: $white;
                font-size: 12px;
            }
        }
    }
}

/* Box */

#cookielay-container {
    .cookielay-content {
        .cookielay-box {
            background: $white;
            border-radius: $global-radius;
            margin-bottom: 30px;
            @include media-breakpoint-down(md) {
                margin-bottom: 20px;
            }
            .cookielay-box__header {
                padding: 30px;
                border-bottom: solid 1px rgba(0, 0, 0, 0.06);
                display: flex;
                flex-flow: row wrap;
                align-items: center;
                justify-content: space-between;
                @include media-breakpoint-down(md) {
                    padding: 20px;
                }
            }
            .cookielay-box__content {
                padding: 30px;
                @include media-breakpoint-down(md) {
                    padding: 20px;
                }
                hr {
                    margin-bottom:30px;
                    margin-right: -30px;
                    margin-left: -30px;
                    border: none;
                    border-bottom: solid 1px rgba(0, 0, 0, 0.06);
                    @include media-breakpoint-down(md) {
                        margin-bottom: 20px;
                        margin-left: -20px;
                        margin-right: -20px;
                    }
                }
            }
        }
    }
}