/*--------------------------------------------------------------
x.0 Base Settings Panel
--------------------------------------------------------------*/

.book_page_novelist-settings {
    .form-table {
        .desc {
            color: #666;
            display: block;
            font: {
                size: 14px;
                style: italic;
            }
            margin: 2px 0 5px;
        }

        input[type="checkbox"] {
            & + label {
                display: inline;
            }
        }
    }

    @media (min-width: 768px) {
        .novelist-settings-buttons {
            clear: both;
            overflow: hidden;

            p {
                float: left;
                margin: 20px 10px 0 0;
                padding: 20px 0 10px;
            }
        }
    }
}

/*--------------------------------------------------------------
x.0 Book Layout Builder
--------------------------------------------------------------*/

#book-layout-builder {
    clear: both;
    margin: 0 0 1em;
    overflow: hidden;
    position: relative;

    * {
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    h3 {
        text-align: center;
        margin: 0 0 1em;
    }

    @media (min-width: 950px) {
        max-width: 950px;
    }
}

/* Saved Options */
#enabled-book-settings {
    @media (min-width: 1200px) {
        float: left;
        width: 70%;
    }

    // Special styling for book cover
    #novelist-book-option-cover {
        //background: #333 url('../images/under-forever-sky.jpg') no-repeat center;
        background: #93648d;
        background-size: cover;
        border: none;
        color: white;
        display: block;
        margin: 0 auto 1em;
        height: 415px;
        width: 300px;
        text-align: center;
        z-index: 20;

        &:before {
            /*background: rgba(0, 0, 0, 0.6);
            content: '';
            display: block;
            height: 100%;
            width: 100%;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1;*/

            color: rgba(255, 255, 255, 0.25);
            content: 'Book Title by Book Author';
            display: block;
            font: {
                size: 22px;
            }
            margin-top: -28px;
            max-width: 100%;
            padding: 0 20%;
            position: absolute;
            top: 50%;
            left: 0;
            z-index: 1;
        }

        .novelist-book-option-title,
        .novelist-book-option-fields,
        button {
            position: relative;
            z-index: 20;
        }

        button {
            background: white;

            &:hover {
                background: rgba(255, 255, 255, 0.8);
            }
        }

        .novelist-book-option-fields {
            background: white;
            color: #444;
            overflow: visible;
            padding: 5px;
        }

        @media (min-width: 768px) {
            &.novelist-book-cover-align-left {
                float: left;
                margin: 0 1em 1em 0;
            }
            &.novelist-book-cover-align-center {
                display: block;
                margin: 0 auto 1em;
            }
            &.novelist-book-cover-align-right {
                float: right;
                margin: 0 0 1em 1em;
            }
        }
    }
}

#enabled-book-settings-inner {
    background: white;
    clear: both;
    overflow: hidden;
    padding: 15px;
}

/* Library of Options */
#available-book-settings {
    margin-top: 1.5em;

    @media (min-width: 1200px) {
        float: right;
        margin-top: 0;
        width: 28%;
    }

    .novelist-book-option-name {
        display: none;
    }

    .novelist-book-option {
        button {
            display: none;
        }
    }
}

#available-book-settings-inner {
    border: 2px dashed #ccc;
    padding: 15px;
}

.novelist-book-option {
    background: white;
    border: 1px solid rgba(0, 0, 0, 0.1);
    margin: 5px 0;
    padding: 10px;
    position: relative;

    &:hover {
        cursor: move;
    }

    button {
        background: rgba(0, 0, 0, 0.05);
        border: none;
        cursor: pointer;
        font: {
            size: 12px;
        }

        &:hover {
            background: rgba(0, 0, 0, 0.1);
        }
    }

    textarea, select, label {
        display: block;
        width: 100%;
    }

    textarea {
        height: 100px;
    }
}

.novelist-book-option-name {
    background: white;
    color: rgba(0, 0, 0, 0.5);
    font: {
        size: 10px;
    }
    padding: 0 4px;
    position: absolute;
    top: 5px;
    right: 5px;
    text-transform: uppercase;
    z-index: 10;
}

.novelist-book-option-fields {
    display: none;
    margin-top: .5em;
    overflow: hidden;
}

.novelist-sortable-placeholder {
    border: 1px dashed rgba(0, 0, 0, 0.1);
    height: 40px;
}

.novelist-book-option-field-wrap {
    margin-top: .5em;
}

.novelist-new-line-option {
    margin-top: .5em;

    label {
        display: inline;
    }
}

/*--------------------------------------------------------------
x.0 Purchase Links
--------------------------------------------------------------*/

.novelist-table,
#novelist-purchase-links {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    margin-bottom: .5em;

    th {
        padding: 15px 10px;
    }

    input {
        max-width: 100%;
    }
}

#novelist-link-remove {
    width: 50px;
}

/*--------------------------------------------------------------
x.0 Dimensions
--------------------------------------------------------------*/

@media (min-width: 600px) {
    .novelist-dimensions-wrap {
        clear: both;
        overflow: hidden;

        > div {
            display: inline-block;
            margin-right: 10px;
            vertical-align: top;
        }

        input[type="number"] {
            width: 100px;
        }

        span {
            color: #666;
            font: {
                size: 14px;
                //style: italic;
            }
        }
    }
}