$dark-text: #333;
$transparent-image: 'data:image/jpeg;base64,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';

/* Admin settings */

.colorbar {
    [data-hint]:after {
        width: 300px!important;
        margin-left: -300px;
    }

    &.current-scheme, &.predefined-scheme {
        padding-bottom: 10px;

        span {
            color: transparent;
        }
    }

    &.predefined-scheme:hover {
        cursor: pointer;

        span {
            color: white;
        }

        .light span {
            color: black;
        }
    }

    .colorbar-element-container {
        width: 9rem;
        float: left;
        display: block;
        text-align: center;
        background: white;
        margin-bottom: 1px;
        margin-right: 1px;
        //background-image: url($transparent-image);


    }

    .colorbar-element {
        width: 100%;
        text-align: center;
        height: 4rem;
        //border: 1px solid #ccc;
        border-top: 0;


        span {
            font-size: .7rem;
        }

        color: #333;
        input {
            color: #333;
            width: 100% !important;
        }

        &.light-text {
            color: #fff;
            & input {
                color: #fff;
            }
        }
    }

    .colorbar-title {
        font-size: 0.8rem;
        //border: 1px solid #ccc;
        font-weight: bold;
        padding: 1px;
        background-color: rgba(#000, 0.05);
    }

    input {
        width: 100%;
        border: none;
        font-size: 0.8rem;
        text-align: center;
        border-radius: 0;
        height: 35px;
        position: absolute;
        background: transparent;
        &:focus {
            outline: none;
        }
    }

    .choose-predefined-scheme {
        cursor: pointer;
    }
}

// Admin preview
$ap-width: 8rem;
$ap-height: 10rem;
$nav-width: 25%;
$toolbar-height: 10%;
$ap-radius: 4px;

.admin-preview-wrapper {
    display: inline-block;
    width: $ap-width;
    position: relative;
    margin-right: 2rem;

}
.admin-preview-title {
    text-align: center;
}
.admin-preview {
    height: $ap-height;
    position: relative;
    border-radius: $ap-radius;
    border-width: 2px !important;
}

.ap-overlay {
    cursor: pointer;
    opacity: 0;
    position: absolute;
    top:0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: $ap-radius;
    z-index: 2;
    text-align: center;
    transition: opacity .4s ease;
    &:hover {
        opacity: 1;
        background: rgba(0,0,0,0.4);
    }
    b {
        display: inline-block;
        font-weight: normal;
        margin-top: ($ap-height / 2) - 1rem;
        background: #111;
        color: #bbb;
        border-radius: $ap-radius;
        padding: 4px 10px;
        &:hover {
            color: #fff;
            background: #000
        }
    }
}
.ap-sidebar {
    position: absolute;
    width: $nav-width;
    top: 0;
    left: 0;
    bottom: 0;
}
.ap-logo {
    height: 10%;
    text-align: center;
    &::after {
        display: block;
        position: relative;
        top: 50%;
        margin: 0 auto;
        transform: translateY(-50%);
        content: '';
        height: 8px;
        width: 25%;
    }
}
.ap-nav {
    padding: 5px 10px;
}
.ap-text, .ap-text::before, .ap-text::after {
    margin-top: 4px;
    position: relative;
    display: block;
    margin-bottom: 3px;
    height: 2px;
    content: '';
}
.ap-text::before {
    margin-top: 0;
    top: 7px;
}
.ap-text::after {
    margin-top: 0;
    top: 9px;
}
.ap-active {
    display: block;
    margin: 19px -10px 0;
    margin-bottom: 5px;
    padding: 5px 10px 5px 7px;
    border-left-width: 3px;
    border-left-style: solid;
    &::after {
        display: block;
        content: '';
        height: 2px;
    }
}
.ap-toolbar {
    position: absolute;
    left: $nav-width;
    right: 0;
    height: $toolbar-height;
    padding: 0 10px;
    &::after {
        display: block;
        position: relative;
        top: 50%;
        transform: translateY(-50%);
        content: '';
        width: 33%;
        height: 4px;
    }
}
.ap-button {
    float: right;
    position: relative;
    top: 50%;
    transform: translateY(-50%);
    height: 8px;
    width: 25px;
}
.ap-page {
    position: absolute;
    top: $toolbar-height;
    left: $nav-width;
    right: 0;
    bottom: 0;
    padding: 10px;
}
.ap-content {
    height: 100%;
    overflow: hidden;
}

.ap-title {
    display: block;
    height: 4px;
    width: 25%;
    margin: 8px 10px 5px;
}
.ap-content {
    .ap-text {
        margin-left: 10px;
        margin-right: 10px;
    }
}
.ap-update, .ap-notice, .ap-critical {
    margin-top: 19px;
    display: block;
    content: '';
    padding: 5px 10px;
    &::after {
        display: block;
        content: '';
        height: 2px;
        width: 50%;
    }
}
.ap-update {
    margin-top: 3px;
}